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.

Lugger

Answer 1

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)

Vibraculum

Hi @HallieSwan I've tried this example on a couple of browsers and I dont get the scrollbar at the top – Claudianus

If you add the Scroller extension to DT, the CSS solution here appears to have some unintended side effects. – Bicephalous

Answer 2

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.

Chickasaw