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

Question

Using R shiny & DT package, I am creating certain tables. The number of columns vary as per user input & is not fixed. I have included the following code snippet to include a horizontal scrollbar so that when the number of columns is large, the user can scroll through the columns that are not directly visible.

server.R:

output$results <- DT::renderDataTable({
    DT::datatable(data = datasetInput(),
                  options = list(scrollX = TRUE,...)
                  )
  })
<code reduced for brevity>

Using the above code, the Horizontal scrollbar is not visible at first but appears when I click on a row and hit right arrow on my keyboard. Is there any way the scroll bar becomes visible as soon as the table is fired up, no matter how many columns I have, and I can drag the scrollbar using the mouse pointer?

Update:

I tried the code in the answer below and this is what I see - no horizontal scrollbar.

Cabasset

Please always provide your sessionInfo(). You didn't say it, but my guess you were using Mac OS X. If that is the case, there is nothing surprising. That is just the default behavior of Mac -- scrollbars are hidden by default until you start scrolling. – Cyprinodont

Thanks Yihui. True, I am using MacOSX. I will make sure I provide my sessionInfo() in the future. – Cabasset

I don't use Mac often, but I guess there might be a way to make the scrollbar always visible. See if you have any luck with Google... – Cyprinodont

Answer 1

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)
    )
  }
))

Morin

I mean the scrollbar works in my code, but it is not visible until I click on a row & hit the right arrow. It is not visible so I can't use my mouse pointer to drag it. – Cabasset

I don't know how much or if it even matters, but I am using options inside DT::datatable and you are using it inside DT::renderDataTable. I am guessing that's not the problem. But I still can't see the scrollbar without using my keyboard and definitely cannot use my mouse to scroll. – Cabasset

you're right, using the options in renderDataTable vs in datatable makes no difference. As I said, I suspect the problem is not with the datatable but with your dataset or something else about your code that's causing this, because a plain simple example like the one I showed does work. – Morin

I tried your code too, it doesn't show me a horizontal scrollbar. I don't know is it something to do with my browser? I pasted the screenshot in my question. – Cabasset

Make sure you have the latest shiny and DT versions. Not the CRAN versions, but the GItHub versions, they both had a lot of work over the past 2 weeks so I would make sure you're using a version from this week – Morin

There are plenty of reasons why you would want a scroll bar -- for example if you want a fixed header or fixed column. And setting scrollY=T doesn't work for me. Maybe a compatibility issue among the options. – Torruella

This was a Mac issue for me. As already pointed out the default behaviour on Mac is to show scroll bars "Automatically based on mouse of trackpad". Once I changed my settings for scrolling in System Preferences -> General to "Show scroll bars" to "Always" I could see the scroll bars fine and point my mouse to drag it. – Ordinance

Answer 2

Try this:

DT::datatable(sta, options = list(
  pageLength=50, scrollX='400px'), filter = 'top')

Communist

Answer 3

I would have done this way also:

datasetInput1 <- reactive({
      infile <- input$file1
      if(is.null(infile))
        return(NULL) 
      else
        m <- read.csv(infile$datapath, header = input$header)
        return ( DT::datatable(m, extensions = 'Scroller', options = list(deferRender = F, dom = 't',
                                                                      columnDefs = list(list(className = 'dt-center',
                                                                                             targets = 5)),
                                                                     scrollY = 300, scroller = TRUE, scrollX = T,
                                                                     pageLength = 5))
               )
    })

Chiropody

Answer 4

Datatables for beginners can be so hard while using on server side. You can implement the datatables on server-side with almost no hustle, You should consider using the DataTables Quick. I found these to ease my day to day work, which I think every programmer out here will want. Note: Don't use it on the production as it may harm your data in some way.

Skiing

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Empathy