Scrollable datatable in bslib in Shiny app

[MarekGierlinski]

I want to create a scrollable table in a Shiny app, in a bslib card. I do not want paging in the table, just one long table with a vertical scrollbar. All my attempts have failed so far. Here is a code I tried:

library(shiny)
library(bslib)
library(DT)

# Prepare test data
n <- 100
data <- data.frame(
  x = seq(1, n),
  y = rpois(n, 100)
)

# bslib UI
ui <- page_sidebar(
  title = "Test",
  card(
    card_header("Data table"),
    height = 600,
    style = "resize:vertical;",
    card_body(
      min_height = 500,
      DT::dataTableOutput("table")
    )
  )
)

# Server
server <- function(input, output, session) {
  output$table <-  DT::renderDataTable({
    DT::datatable(
      data,
      options = list(paging = FALSE),
      style = "bootstrap4"
    )
  })
}

shinyApp(ui, server)

The table displays only top rows that fit in the card and the rest of the data is missing. Any ideas how to add a vertical scroll bar to scroll through all the data?

[nirgrahamuk]

in the UI, simply wrapping the dataTableOutput with a div results in the desired behaviour.

card_body(
      min_height = 500,
      div(
      DT::dataTableOutput("table")
    ))

[ismirsehregal]

You could use the scrollY option:

library(shiny)
library(bslib)
library(DT)

# Prepare test data
n <- 100
data <- data.frame(
  x = seq(1, n),
  y = rpois(n, 100)
)

# bslib UI
ui <- page_sidebar(
  title = "Test",
  card(
    card_header("Data table"),
    height = 600,
    style = "resize:vertical;",
    card_body(
      min_height = 500,
      DT::dataTableOutput("table")
    )
  )
)

# Server
server <- function(input, output, session) {
  output$table <-  DT::renderDataTable({
    DT::datatable(
      data,
      options = list(paging = FALSE, scrollY = "680px"),
      style = "bootstrap4"
    )
  })
}

shinyApp(ui, server)

PS: this also works with relative CSS units e.g. "75vh" instead of "680px"

[MarekGierlinski]

Thank you. Both solutions (@nirgrahamuk and @ismirsehregal) work well, though the latter one has the advantage of keeping the search box fixed.