Search code examples
cssrshinydt

Adjust height of DT datatable when fillContainer=TRUE


In my R Shiny app, I have a DT datatable that has too much columns for the available horizontal space of the container. I therefore use fillContainer=TRUE so that the table fits in its container and can be scrolled horizontally and vertically.

My problem is that doing so, only two rows are visible simultaneously, even though I have plenty of vertical space available on screen. A reproducible example is given below:

library(shiny)
library(DT)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(dataTableOutput("DT")),
    mainPanel()
  )
)

server <- function(input, output) {
data<-mtcars
output$DT<-renderDT(
  datatable(
    data,
    fillContainer=TRUE))
}
 
shinyApp(ui = ui, server = server)

Do you have tips to easily increase the number of rows visible in the table for more readability independently of other elements that might be present in the app? Of course, the height argument of datatable does not respond because fillContainer=TRUE. Aren't there any option other than having to fiddle with CSS or HTML to fix the height of the container (if so, how?)?


Solution

  • I'd suggest using scrollX = TRUE instead of fillContainer = TRUE along with a given number of rows to show (pageLength) or a given table height (scrollY = some css unit)

    library(DT)
    library(shiny)
    library(datasets)
    
    data <- mtcars
    
    ui <- fluidPage(sidebarLayout(sidebarPanel(DTOutput("DT")), mainPanel()))
    
    server <- function(input, output) {
      output$DT <- renderDT({datatable(data, options = list(scrollX = TRUE, pageLength = 15L))}) # alternative: scrollY = "80vh"
    }
    
    shinyApp(ui = ui, server = server)