TL;DR ?
scrollX=TRUE seems bugged but overflow-x: auto works in pure css but it's not dynamic (and out of Shiny DT solution).
edit
March 4,2020: css added for .dataTables_length .dataTables_filter .dataTables_info .dataTables_paginate
Here is an reprex where the focus of the column is lost and the scroll go back to left
- Run the app,
- go to one of the last colum at right
- Put the pointer in the filter of choosen column to make a search
- => the scroll of DT goes to the left and the column focused has disappeared at right
library(shiny)
library(DT)
app<-
shinyApp(
ui = basicPage(
fluidPage(
h3("Home"),
fluidRow(
column (12,
div(DT::dataTableOutput('outblabla'),
style = "font-size:80%;white-space: nowrap;width:1500px")
)
)
)
),
server = function(input, output) {
blabla <- reactive({
test<-data.frame(
matrix (rep(c(c(999.2,2), 1200), 4000), nrow = 40, ncol = 30)
)
colnames(test) <- paste("aaaa_bbbb_ccccc_ddddd_eeee_fffff", 1:30)
return( test
)
})
output$outblabla<- DT::renderDataTable(
DT::datatable(blabla(),
style = "bootstrap", class = "compact", filter='top',
selection = c("single"),
options = list(
bSortClasses = TRUE,iDisplayLength = 10, width = "100%",
scrollX=TRUE,
autoWidth = TRUE
)
)
)
}
)
shiny::runApp(app)
I think it's a bug in DT but I can make a mistake.
Here is a first workaround with two css solutions,
but it's too large (css 1 int the code) or not dynamic (css 2 in the code), and it's with ScrollX=FALSE...to get scrollX on. The solution 1 is chosen in my real case waiting a good dynamic solution (or a fix in DT if there is a bug).
library(shiny)
library(DT)
app<-
shinyApp(
ui = basicPage(
fluidPage(
tags$head(
# 1) too large, it take the # of item and pages Previous/ Next
# but it works with all type of options of DT (with or without # of item by page, smart search, ..)
tags$style(type = "text/css", HTML(paste0(".datatables {position: relative; } "))),
tags$style(type = "text/css", HTML(paste0(".datatables [class^='col-'] {position: inherit;} "))),
tags$style(type = "text/css", HTML(paste0("
.datatables .dataTables_wrapper {
overflow-x: auto;
overflow-y: hidden;
padding-top: 35px;
padding-bottom: 35px;
}"))),
tags$style(type = "text/css", HTML(paste0(".datatables .dataTables_length {position: absolute; margin-top: -35px; left: 0px;}"))),
tags$style(type = "text/css", HTML(paste0(".datatables .dataTables_filter {position: absolute; margin-top: -35px; right: 0px;}"))),
tags$style(type = "text/css", HTML(paste0(".datatables .dataTables_info {position: absolute; left: 0px;}"))),
tags$style(type = "text/css", HTML(paste0(".datatables .dataTables_paginate {position: absolute; right: 0px;}"))),
tags$style(type = "text/css", HTML(paste0("
.datatables .dataTables_wrapper .dt-buttons {
left: 150px;
position: absolute;
top: 0;
}"))),
# OR
# 2) It take only the table but it's not dynamic for all type of options of DT
#tags$style(type = "text/css", HTML(paste0(".datatables .dataTables_wrapper .row:nth-child(2) > div:nth-child(1) {overflow-x: auto;}")))
),
h3("Home"),
fluidRow(
column (12,
div(DT::dataTableOutput('outblabla'),
style = "font-size:80%;white-space: nowrap;width:100%;")
)
)
)
),
server = function(input, output) {
blabla <- reactive({
test<-data.frame(
matrix (rep(c(c(999.2,2), 1200), 4000), nrow = 40, ncol = 30)
)
colnames(test) <- paste("aaaa_bbbb_ccccc_ddddd_eeee_fffff", 1:30)
return( test
)
})
output$outblabla<- DT::renderDataTable(
DT::datatable(blabla(),
style = "bootstrap", class = "compact", filter='top',
selection = c("single"),
options = list(
bSortClasses = TRUE,iDisplayLength = 10, width = "100%",
scrollX=FALSE,
autoWidth = TRUE
)
)
)
}
)
#shiny::runApp(app)
Here is a second workaround, it locates the good table element but it doesn't work with many pages in shiny, and it's with ScrollX=FALSE...to get scrollX on.
because the sub element of DT Shiny are not drawn (and load event doesn't seem to work with js delegate. I speak about that in github/rstudio/shiny. Knowing that from SO redirecting from jquery additionnal notes
"In all browsers, the load, scroll, and error events (e.g., on an element) do not bubble. [...] Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element generating the event."
library(shiny)
library(DT)
app<-
shinyApp(
ui = basicPage(
fluidPage(
tags$head(
HTML(# I want to get event when DT Shiny is drawn, but it's doesn't work for load event
"<script>
$(document).on('focusin', '.datatables', function(event) {
$(this).find('table.dataTable').closest('div').addClass('div_containing_table');
});
</script>
"
),
tags$style(type = "text/css", HTML(paste0(".div_containing_table {overflow-x: auto;}")))
),
h3("Home"),
fluidRow(
column (12,
p("You have to click on the table to simulate the end of loading of DT, to get scrollx"),
div(DT::dataTableOutput('outblabla'),
style = "font-size:80%;white-space: nowrap;width:1500px")
)
)
)
),
server = function(input, output) {
blabla <- reactive({
test<-data.frame(
matrix (rep(c(c(999.2,2), 1200), 4000), nrow = 40, ncol = 30)
)
colnames(test) <- paste("aaaa_bbbb_ccccc_ddddd_eeee_fffff", 1:30)
return( test
)
})
output$outblabla<- DT::renderDataTable(
DT::datatable(blabla(),
style = "bootstrap", class = "compact", filter='top',
selection = c("single"),
options = list(
bSortClasses = TRUE,iDisplayLength = 10, width = "100%",
scrollX=FALSE,
autoWidth = TRUE
)
)
)
}
)
#shiny::runApp(app)
