R DT Horizontal scroll bar at the top of the table
I have a wide and long lasting DT in a shiny condition. By default, I would like to show a horizontal scrollbar on top of the table. Is there a way to do this? My current definition of DT looks like this:
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.
source to share
Flip-down scroll bar for all data tables in the application
You can add some CSS to flip the div containing the scrollbar / table and then flip the table contents as per this answer:
.dataTables_scrollBody {
transform:rotateX(180deg);
}
.dataTables_scrollBody table {
transform:rotateX(180deg);
}
Flip scrollbar for specific data table
If you only want to flip the scrollbar on one table, you can select a 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)
source to share
I was able to get the scrollbar on top using what @HallieSwam suggested, but I went through the HTML source to figure out which parts to rotate.
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
rotates the entire table, including the scrollbar, then scrollHead
required to align the scrollbar with the title in the final table. The scroll table will only transform the contents of the table, leaving the scroll bar on top.
source to share