Shinydashboard tabBox to fill mainPanel

Question

Is there a simple way to get the following tabBox to span the entire height of the dashboardBody?

app_ui <- function() {

    shinydashboard::dashboardPage(
      shinydashboard::dashboardHeader(title = "Baseball Statistics"),
      
      shinydashboard::dashboardSidebar(
        width = 250
      ),
      
      shinydashboard::dashboardBody(
        shinydashboard::box(title = "Individual"),
        shinydashboard::tabBox(title = "Stats",
                               shiny::tabPanel("Batting", DT::DTOutput("batting")),
                               shiny::tabPanel("Pitching", DT::DTOutput("pitching")),
                               shiny::tabPanel("Fielding", DT::DTOutput("fielding"))
                               )
      )
    )
}

I would like the datatable to occupy as much vertical screen as possible:

The following answer was not successful - Shinydashboard Tabbox Height

I attempted to integrate the above answer by:

      shinydashboard::dashboardBody(
        shinydashboard::box(title = "Individual"),
        shinydashboard::tabBox(title = "Stats",
                               shiny::tags$head(
                                 shiny::tags$style(shiny::HTML(" #tabBox { height:90vh !important; } "))
                               ),
                               id="tabBox",
                               shiny::tabPanel("Batting", DT::DTOutput("batting")),
                               shiny::tabPanel("Pitching", DT::DTOutput("pitching")),
                               shiny::tabPanel("Fielding", DT::DTOutput("fielding"))
                               )
      )

The output looks like:

Have you already tried this work around? https://stackoverflow.com/questions/31872980/shinydashboard-tabbox-height — Patrick Bormann, Mar 03 '21 at 20:03
Hmm ok, for me it worked, can you show me how you tried to integrate it? — Patrick Bormann, Mar 03 '21 at 20:07
I added my answer below, maybe we can come closer to a solution — Patrick Bormann, Mar 03 '21 at 20:27

HubertL · Answer 1 · 2021-03-03T20:30:00.357

0

It probably depends on the oter DT options.

When I use only scrollX options

  output$batting <- renderDT(iris, 
                             options = list( scrollX = TRUE))

I get

edited Mar 03 '21 at 20:30

answered Mar 03 '21 at 20:14

HubertL

19,246
3
32
51

So how can you add in scrollbars to the DT so you can scroll to parts of the data that are cut off? – Dylan Russell Mar 03 '21 at 20:16
eg.: output$dataset <- DT::renderDT(dataframes$df.response, options = list( scrollX = TRUE, lengthMenu = c(15, 50, 100, 200, 500), colReorder = list(realtime = FALSE) ) ) with scrollX – Patrick Bormann Mar 03 '21 at 20:18
Perfect, that adds a horizontal scrollbar. Now it's only running way off the bottom of the page, especially when I select show 100 rows. Is there a way to limit the vertical extension? – Dylan Russell Mar 03 '21 at 20:28
I edited to add scrolling and paging. With paging it can not span further than pagelength – HubertL Mar 03 '21 at 20:32

Patrick Bormann · Answer 2 · 2021-03-03T21:12:53.820

0

This is my final try, it seems the other things didn't work out, so:

  output$dataset <- DT::renderDT(dataframes$df.response,
    callback = JS(js),
    filter = "top",
    rownames = FALSE,
    selection = list(target = "row+column"),
    extensions = c("ColReorder"),
    options = list(
      # scrollX = TRUE,
      # lengthMenu = c(15, 50, 100, 200, 500),
      # colReorder = list(realtime = FALSE),
      pageLength = 1000,
      scrollY=TRUE
   )
  )

the pagelength element to the max rows of your data set it will show it entirely when loading. like in this screen:. Is this a possible workaround for you?

edited Mar 03 '21 at 21:12

answered Mar 03 '21 at 20:26

Patrick Bormann

729
6
16

Yes, I get that weird extra tab with no title. And I also don't see your data set. – Dylan Russell Mar 03 '21 at 20:30
Ok i can see the data now and have no weird empty panel however Datatable is atm not scaling – Patrick Bormann Mar 03 '21 at 20:41
I may have a last workaround to show you that could help you – Patrick Bormann Mar 03 '21 at 21:07
I updated my answer and you can see the entire dataset rows from the beginning spanning, can this be a possible workaround for you? In my example it spanned the whole screen and i had to scroll a lot scrolly=TRUE – Patrick Bormann Mar 03 '21 at 21:14

Shinydashboard tabBox to fill mainPanel

2 Answers2