How to Make the Horizontal Scrollbar Visible in Dt::Datatable

How to make the horizontal scrollbar visible in DT::datatable

I don't think you can (or should) force a scrollbar easily if you don't need one, but the above code works fine for me, it shows a scrollbar when the page initializes. Maybe the problem is with the data or something else.

Here's a minimal example that has a horizontal scrollbar on page load

runApp(shinyApp(
  ui = fluidPage(
    DT::dataTableOutput("results", width = 300)
  ),
  server = function(input, output, session) {
    output$results <- DT::renderDataTable(
      mtcars,
      options = list(scrollX = TRUE)
    )
  }
))

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

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)

R DT Horizontal scroll bar at top of the table

Flip Scrollbar for All DataTables in App

You could add some css to flip the div containing the scrollbar/table and then flip back the table content, as per this answer:

.dataTables_scrollBody {
    transform:rotateX(180deg);
}
.dataTables_scrollBody table {
    transform:rotateX(180deg);
}

Flip Scrollbar for Specific DataTable

If you only want to flip the scroll bar on one table, you could select the specific table:

#flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody {
    transform:rotateX(180deg);
}
#flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody table{
    transform:rotateX(180deg);
}

Example

library(shiny)
library(DT)

css <- HTML(
    "#flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody {
        transform:rotateX(180deg);
    }
    #flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody table{
        transform:rotateX(180deg);
    }"
)

ui <- fluidPage(
    tags$head(tags$style(css)),
    fluidRow(column(width = 6,
                    h4("Flipped Scrollbar"),
                    br(),
                    DT::dataTableOutput("flipped")
                    ),
             column(width = 6,
                    h4("Regular Scrollbar"),
                    br(),
                    DT::dataTableOutput("regular")
                    )
             )
)

server <- function(input, output, session) {
    output$flipped <- DT::renderDataTable({
        DT::datatable(mtcars, rownames = FALSE,
                      options = list(
                          scrollX = TRUE
                      )
        )
    })
    output$regular <- DT::renderDataTable({
        DT::datatable(mtcars, rownames = FALSE,
                      options = list(
                          scrollX = TRUE
                      )
        )
    })
}

shinyApp(ui, server)

Make a Horizontal scrollbar with R ShinyDashboard for DT table

Using mtcars as example this works for me to get a horizontal scroll bar.

library(DT)
library(shiny)
library(shinydashboard)
library(dashboardthemes)
library(shinyjs)

data <- mtcars
ui <- dashboardPage(
  dashboardHeader(title = "Table Summary"),
  dashboardSidebar(collapsed = FALSE,
                   sidebarMenu(
                     id = "tabs",
                     menuItem(text = "Tab 1",
                              tabName = "t1",
                              icon = icon('trophy'),
                              selected = TRUE
                     )
                   )
  ),
  dashboardBody(
    shinyjs::useShinyjs(),
    tabItems(
      tabItem(
        tabName = "t1",
        #we wan to create 3 separate pages on this tab
        tabsetPanel(
          id = "t1Selected", #returns value of current page we're on,
          type = "tabs",
          tabPanel(
            title = "totals",
            id = "tab_totals",
            fluidRow(
              column(width = 6, align = "right", DT::dataTableOutput("table"))
              #DT::dataTableOutput("table")
            ),
            fluidRow(
              column(
                width = 3, align = "left", checkboxInput("bt1", "Test for this?", TRUE)
              ),
              column(
                width = 3, align = "left",numericInput("bt1C", "Choice", 0, min = -100, max = 100)
              ),
              column(
                width = 3, align = "left", checkboxInput("bt2", "Test for this?", TRUE)
              ),
              column(
                width = 3, align = "left",numericInput("bt2C", "Choice", 0, min = -100, max = 100)
              ),
              
            )
          )
        )
      )
      
      
    )
  )
  
)
server <- function(input, output, session) {
  observe({
    shinyjs::enable("bt1C")
    if(input$bt1 == 0){
      shinyjs::disable("bt1C")
    }
    
  })
  output$table <- DT::renderDataTable({
    datatable(data, options = list(scrollX = TRUE)) %>% 
      formatStyle('mpg', backgroundColor = styleEqual(c(0, 9.57), c('gray', 'yellow')))
  })
  
}
shinyApp(ui, server)

R Shiny table with horizontal scrollbar both at the top and at the bottom

Here is a solution using the DoubleScroll JavaScript library.

Download the file jquery.doubleScroll.js from here. Put it in the www subfolder of your shiny app.

Then here is the app:

library(shiny)
library(DT)

wideTable <- as.data.frame(matrix(rnorm(1000), nrow = 10, ncol = 100))

js <- "
$(document).ready(function(){
  $('#dtable').on('shiny:value', function(e){
    setTimeout(function(){
      $('#dtable table').wrap('<div id=\"scrolldiv\"></div>');
      $('#scrolldiv').doubleScroll({
        contentElement: $('table'),
          scrollCss: {                
              'overflow-x': 'scroll',
              'overflow-y': 'hidden'
          },
          contentCss: {
              'overflow-x': 'scroll',
              'overflow-y': 'hidden'
          },
        resetOnWindowResize: true
      });
      setTimeout(function(){$(window).resize();}, 100);
    }, 0);
  });
});
"

CSS <- "
.doubleScroll-scroll-wrapper {
  clear: both;
}
"

ui <- fluidPage(
  tags$head(
    tags$script(src = "jquery.doubleScroll.js"),
    tags$script(HTML(js)),
    tags$style(HTML(CSS))
  ),
  br(),
  DTOutput("dtable")
)

server <- function(input, output, session){
  
  output[["dtable"]] <- renderDT({
    datatable(wideTable)
  })
  
}

shinyApp(ui, server)

If the output id of your datatable is not "dtable", then in the JS code (js) replace dtable (two occurences) with the output id of your datatable.

Problems with Datatables and unwanted Horizontal scrollbar

In the end the best solution was to set the width of the inner table to:

table-layout:fixed;
width: 98% !important; 

All solutions listed here had undesirable cropping behavior. Limiting the table width in this way also allowed me to dynamically adjust the height of the table such that the horizontal scrollbar can appear or disappear on demand without introducing an horizontal scroll.

http://jsfiddle.net/FBpLA/15/

---

Related Topics