Adding a vertical and horizontal scroll bar to the DT table in R shiny

Question

Please check the data table "Case Analyses Details" on the right. I want to fit the data table within the box, such that it aligns from right and bottom border in the box, such that we add a horizontal and vertical scroll bar to the DT which can be used to span the rows that overshoot the box.

## app.R ##
library(shiny)
library(shinydashboard)
library(DT)
ui <- dashboardPage(
dashboardHeader(title = "My Chart"),
dashboardSidebar(
width = 0
),
dashboardBody(
box(title = "Data Path", status = "primary",height = "595" ,solidHeader = T,
    plotOutput("trace_plot")),
box( title = "Case Analyses Details", status = "primary", height = 
"595",width = "6",solidHeader = T, 
     div(DT::dataTableOutput("trace_table",width = 220)))
))
server <- function(input, output) 
{ 
#Plot for Trace Explorer
output$trace_plot <- renderPlot({
plot(iris$Sepal.Length,iris$Sepal.Width)
})
output$trace_table <- renderDataTable({
mtcars
})
}
shinyApp(ui, server)

Pork Chop · Accepted Answer · 2017-11-27T12:09:20.337

28

Something like this do?

rm(list = ls())
## app.R ##
library(shiny)
library(shinydashboard)
library(DT)
ui <- dashboardPage(
  dashboardHeader(title = "My Chart"),
  dashboardSidebar(
    width = 0
  ),
  dashboardBody(
    box(title = "Data Path", status = "primary",height = "595" ,solidHeader = T,
        plotOutput("trace_plot")),
    box( title = "Case Analyses Details", status = "primary", height = 
           "595",width = "6",solidHeader = T, 
         column(width = 12,
                DT::dataTableOutput("trace_table"),style = "height:500px; overflow-y: scroll;overflow-x: scroll;"
         )
    )))
server <- function(input, output) { 
  #Plot for Trace Explorer
  output$trace_plot <- renderPlot({
    plot(iris$Sepal.Length,iris$Sepal.Width)
  })
  output$trace_table <- renderDataTable({

    datatable(cbind(mtcars,mtcars), options = list(paging = FALSE))

  })
}
shinyApp(ui, server)

edited Nov 27 '17 at 12:09

answered Nov 27 '17 at 08:22

Pork Chop

28,528
5
63
77

Hi @Pork Chop...For horizontal scrolling this can be added: `div(style = 'overflow-x: scroll',DT::dataTableOutput("trace_table",width = "100%"))` – Subhasish1315 Nov 27 '17 at 08:56
@Subhasish1315, Thanks for your suggestion too. – Ashmin Kaul Nov 27 '17 at 11:46
@PorkChop, I have one issue here, when I slide the table horizontally, I cannot see the last three columns sliding along. Please help. – Ashmin Kaul Nov 27 '17 at 11:58
Looking into it – Pork Chop Nov 27 '17 at 11:59
@AshminKaul see above – Pork Chop Nov 27 '17 at 12:09
@PorkChop, nice but the mtcars data appears twice now. Please help – Ashmin Kaul Nov 27 '17 at 12:27
Oh yes I know that, I was testing and need to see how it will work with a dataset with many columns – Pork Chop Nov 27 '17 at 13:40
@PorkChop, please help me with this DT with slider issue here, https://stackoverflow.com/questions/47713721/handling-and-optimizing-a-range-slider-in-r – Ashmin Kaul Dec 08 '17 at 12:13
Hi @Ashmin, did the last tree columns not able to see issue been solved? I am working on the scrolling bar in R shiny and has the same issue – YihanBao Feb 03 '22 at 22:16

score 1 · Answer 2 · answered Aug 03 '22 at 12:08

This is an old question, but we can also use the dedicated options scrollX and scrollY to add scrollbars to the datatable:

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

ui <- dashboardPage(
  dashboardHeader(title = "My Chart"),
  dashboardSidebar(
    width = 0
  ),
  dashboardBody(
    box(title = "Data Path", height = 450,
        plotOutput("trace_plot")),
    
    box(title = "Case Analyses Details", height = 450,
        DTOutput("trace_table")
    ))
)

server <- function(input, output) { 
  output$trace_plot <- renderPlot({
    plot(iris$Sepal.Length,iris$Sepal.Width)
  })
  output$trace_table <- renderDataTable({
    datatable(
      cbind(mtcars, mtcars),
      options = list(
        scrollX = TRUE,
        scrollY = "250px"
      )        
    )
  })
}
shinyApp(ui, server)

Adding a vertical and horizontal scroll bar to the DT table in R shiny

2 Answers2

Linked