Add a scroll bar for datatable in shiny when using wellPanel

Question

I'm trying to add an X scroll bar for datatable when it's wrapped around a fixedPanel. See the following example:

library(shiny)
library(shinydashboard)
library(DT)

ui <- function(request) {
  dashboardPage(
    skin = "black",
    dashboardHeader(), 
    dashboardSidebar(disable = TRUE),
    dashboardBody(
      fluidRow(
        uiOutput("table")
      ),
      fluidRow(
        DT::dataTableOutput("data2")
      )
    )
  )
}

server <- function(input, output, session) {

  output[["data"]] <-
        DT::renderDataTable({
         cbind(iris, iris, iris, iris, iris)[1, ]
        }, 
        selection = "none",
        options = list(
          searching = FALSE,
          lengthChange = FALSE,
          paginate = FALSE,
          scroller = TRUE,
          scrollX = TRUE
        ))

      output[["table"]] <-
        renderUI({
          fixedPanel(
          wellPanel(div(style = 'overflow-x: scroll', DT::dataTableOutput("data"))),
              style = "z-index: 10;"
          )
        })

      output[["data2"]] <-
        DT::renderDataTable({
          cbind(iris, iris, iris, iris, iris)
        }, 
        options = list(
          scroller = TRUE,
          scrollX = TRUE,
          pageLength = 25
        ))
}

shinyApp(ui, server)

In the opposite I could use the shiny box object and the scrolling works but then I don't have this datatable on top of other ui (style = "z-index: 10;") that I need in my app:

      output[["table"]] <-
        renderUI({
          box(div(style = 'overflow-x: scroll', DT::dataTableOutput("data")),
              width = 12,
              style = "z-index: 10;") # this line doesn't work

        })

Is it possible to combine the two? I'd rather use fixedPanel than box, but I need both components from datatable: scrolling and being on top of other ui output.

AdamB AdamB · Accepted Answer · 2020-02-28T09:59:35

See this post: https://stackoverflow.com/a/55574864/3439739

renderUI({
  fixedPanel(
    wellPanel(div(style = 'overflow-x: scroll', DT::dataTableOutput("data"))),
        style = "z-index: 10; left:0; right:0; overflow-y:hidden; overflow-xy:auto"
  )
})

seems to do the job.

Add a scroll bar for datatable in shiny when using wellPanel

1 Answers