R DT Horizontal scroll bar at top of the table

Question

I have a wide and lengthy DT in shiny. By default I would like to show the horizontal scroll bar on top of the table. Is there a way to do this? My current DT definition looks like below:

DT::datatable(dt, rownames = FALSE,
                    filter = fbox,
                    style = "bootstrap",
                    options = list(
                      dom = dom,
                      scrollX = TRUE,
                      columnDefs = list(list(orderSequence = c('desc', 'asc'), targets = "_all")),
                      processing = FALSE,
                      pageLength = 500,
                      lengthMenu = list(c(500, 1000, 5000), c("500","1000","5000"))
                    ),
                    callback = DT::JS("$(window).unload(function() { table.state.clear(); })")
 ) %>% DT::formatStyle(., cn_cat,  color = "black", backgroundColor = "#dee6ea",fontWeight = "bold")

Thanks in advance.

score 10 · Accepted Answer · answered Apr 11 '18 at 19:53

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)

Hi @HallieSwan I've tried this example on a couple of browsers and I dont get the scrollbar at the top — Sebastian Zeki, Jul 26 '19 at 09:15
If you add the `Scroller` extension to DT, the CSS solution here appears to have some unintended side effects. — TTS, Aug 17 '21 at 22:08

score 1 · Answer 2 · edited Oct 17 '19 at 17:09

I managed to get the Scrollbar on top using what @HallieSwam suggested, but looked into the source HTML code to understand what parts needed to be rotated.
What worked for me:

tags$head(tags$style(HTML( 
   "#Table1 .dataTables_scrollBody {transform:rotate(180deg);}
    #Table1 .dataTables_scrollHead {transform:rotate(180deg);}
    #Table1 .dataTables_scroll table {transform:rotate(180deg);}
   "
)))

scrollBody turns the whole table, including the scrolling bar, then scrollHead is required to align the scrolling bar with the header in the final table. Scroll table will turn just the content in the table, leaving the scrolling bar on top.

R DT Horizontal scroll bar at top of the table

2 Answers2

Linked