DataTable not rendering when contained inside hidden div

[Laz Peterson]

Hello,

We have a dataTableOutput() contained within a tags$div with style=‘display:none;’, which is toggled to display on and off by a button.  Everything works as expected, except for the actual table itself.  It is never rendered by the server.

If we remove the style, it renders just fine.

We have tried outputOptions() with suspendWhenHidden=FALSE, but that does not help.

Is there something I’m missing about the way Shiny works that would break the renderDataTable() function when sending to a hidden div?

Any thoughts?

~ Laz Peterson
Paravis, LLC

[Laz C. Peterson]

Yihui, do you possibly have some insight to this?

~~~~ code ~~~~

library(shiny)
library(DT)

ui<-fluidPage(
    tags$div(style='text-align:center;',tags$button(type='button',onClick='$("#hiddenDiv").fadeIn();',class='btn btn-primary','Unhide Element')),
    fluidRow(
        column(6,tags$div(id='hiddenDiv',style='display:none;',tags$p('Hidden Table'),dataTableOutput('hiddenTable'))),
        column(6,tags$div(id='regularDiv',tags$p('Visible Table'),dataTableOutput('regularTable')))
    )
)
server<-function(input,output,session){
    output$hiddenTable<-renderDataTable({
        thisData<-data.frame(a=sample(1:10),b=sample(1:10),c=sample(1:10))
        datatable(thisData)
    })
    outputOptions(output,'hiddenTable',suspendWhenHidden=FALSE)
    output$regularTable<-renderDataTable({
        thisData<-data.frame(a=sample(1:10),b=sample(1:10),c=sample(1:10))
        datatable(thisData)
    })
}
shinyApp(ui,server)

~~~~ end code ~~~~

The hidden div does not receive the dataTableOutput ... Is there a more appropriate way to accomplish this task?

Thank you!
~Laz Peterson
Paravis, LLC

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/82a62af5-8f71-453a-a6f4-d9db4b2fefaa%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

 

[Yihui Xie]

I think that was due to
https://github.com/rstudio/DT/blob/aad518c5b/inst/htmlwidgets/datatables.js#L73
The intention here was to hold rendering until the table becomes
visible: https://github.com/rstudio/DT/blob/aad518c5b/inst/htmlwidgets/datatables.js#L864
Well, other than "becoming visible", one of these events has to be
triggered: https://github.com/ramnathv/htmlwidgets/blob/7454758379/inst/www/htmlwidgets.js#L582-L600
In your case, perhaps none of the events were triggered when you click
the button. I don't know what the best way to trigger the event is,
but perhaps you need to do something like $(window).trigger('resize');
when clicking the button. I'm sorry that you have to hack at this
using JavaScript, but I don't see an alternative way at the moment.

Regards,
Yihui

[Laz C. Peterson]

Yihui,

No worries, that works perfectly for us!  Thanks!

~ Laz Peterson
Paravis, LLC

To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/CANROs4fw5Fd868vTrMJRBfwgro5DSKii1P2%3DuhcM%2BNJ3vDsWbg%40mail.gmail.com.