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.

enter image description here

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. — Yihui Xie, Jun 11 '15 at 00:57
Thanks Yihui. True, I am using MacOSX. I will make sure I provide my sessionInfo() in the future. — Komal Rathi, Jun 11 '15 at 13:34
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... — Yihui Xie, Jun 11 '15 at 20:40

score 78 · Accepted Answer · answered Jun 10 '15 at 19:27

78

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

answered Jun 10 '15 at 19:27

DeanAttali

25,268
10
92
118

1

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. – Komal Rathi Jun 10 '15 at 19:33
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. – Komal Rathi Jun 10 '15 at 19:43
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. – DeanAttali Jun 10 '15 at 20:00
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. – Komal Rathi Jun 10 '15 at 20:07
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 – DeanAttali Jun 10 '15 at 20:45
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. – Paul Apr 19 '17 at 02:09
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. – lmsimp Oct 13 '20 at 10:00

score 16 · Answer 2 · edited Dec 12 '16 at 04:31

16

Try this:

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

edited Dec 12 '16 at 04:31

Alexander O'Mara

58,688
18
163
171

answered Dec 12 '16 at 04:10

Aditya Kothari

161
1
2

score 2 · Answer 3 · answered Nov 28 '18 at 16:44

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

score 0 · Answer 4 · answered Apr 27 '23 at 12:32

0

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.

answered Apr 27 '23 at 12:32

duck

1

1

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](/help/how-to-answer). – Community Apr 27 '23 at 19:04

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

4 Answers4

Linked