3

I am trying to make a shiny dashboard with datatables that span the entire height of the page (similar to this flexdashboard layout).similar to this flexdashboard layout With my current layout, I am facing an issue where the datatables are short and do not take up the full page.With my current layout How can I modify my layout to achieve datatable heights in a shiny dashboard similar to what happens in flexdashboard? (I have a working version in flexdashboard, but I want to use shiny dashboard because of the collapsible sidebar menu).

ui:

   ui <- fluidPage(
    dashboardPage(
    dashboardHeader(title="HCD ADU Issue Look-Up Tool"),
    dashboardSidebar(sidebarMenuOutput("Semi_collapsible_sidebar")),
    dashboardBody(
        column(width = 4,DT::dataTableOutput('issue_table')),
        column(width =4, DT::dataTableOutput('interpretation_table')),
        column(width = 4,DT::dataTableOutput('code_table'))
    )
  )
)

server:

     server <- function(input, output, session) {
      output$Semi_collapsible_sidebar=renderMenu({
        sidebarMenu(
          paste0("Example Text that will display dashboard information")
        )
      })
      
      output$issue_table <- DT::renderDataTable( 
        DT::datatable(  
          issue_display_data,
          options = list(
            pageLength = nrow(issue_display_data),
            dom = 'ft',
            lengthChange = FALSE,
            searchHighlight = TRUE
          ),
          selection = 'single',
          rownames = FALSE,
          escape=FALSE
        ),fillContainer = TRUE
      )
      
      output$interpretation_table <- DT::renderDataTable( 
        DT::datatable(
          interpretation_display_data,
          options = list(
            pageLength = nrow(interpretation_display_data),
            dom = 'ft',
            lengthChange = FALSE,
            scrollX = TRUE,
            searchHighlight = TRUE
          ),
          selection = 'single',
          rownames = FALSE,
          escape=FALSE
        ), fillContainer = TRUE
      )
      
      
      output$code_table <- DT::renderDataTable(
        DT::datatable(
          code_display_data,
          options = list(
            dom = 'ft',
            pageLength = nrow(code_display_data),
            lengthChange = FALSE,
            searchHighlight = TRUE
          ),
          selection = 'single',
          rownames = FALSE,
          escape=FALSE
        ),fillContainer = TRUE
      )
}
Julia Wagenfehr
  • 143
  • 5
  • Hi Julia. Can you please share some dummy data. When I run your code using the iris data set, for example, the tables scroll past the bottom of the page. – Eli Berkow Aug 18 '21 at 20:39
  • It works fine for me too - with some dummy data. – YBS Aug 18 '21 at 20:46
  • 1
    On my side adding `scrollY = 600` to the datatable options list fits the screen nicely but you could adjust this value. – Eli Berkow Aug 18 '21 at 20:48
  • 1
    @EliBerkow Thank you, the `scrollY = 600` recommendation worked. – Julia Wagenfehr Aug 24 '21 at 19:22
  • Great, glad to hear! – Eli Berkow Aug 25 '21 at 20:04
  • 1
    Is there a way to dynamically fill the page as opposed to entering a fixed height? – Melissa Salazar Nov 15 '21 at 17:42
  • @MelissaSalazar: Yes, you can specify `fillContainer = TRUE` as above, plus you need to configure the parent container via CSS to occupy the entire space available. This can be achieved most simply by measuring the height of all items outside the container and setting the height to be calculated `height: calc(100vh - 80px)`. Note `100vh` is the total height of the visible space in the window, and it is dynamically calculated. – Viktor Horváth Mar 24 '22 at 15:38

0 Answers0