TL; DR?
scrollX=TRUE кажется ошибочным, но overflow-x: auto работает в чистом css, но это не динамическое c (и не из решения Shiny DT).
edit
Март 4,2020: css добавлено для .dataTables_length .dataTables_filter .dataTables_info .dataTables_paginate
Здесь показан процесс, в котором фокус столбца потерян и прокрутка go назад влево
- Запустите приложение,
- go до одного из последних столбцов справа
- Поместите указатель в фильтр выбранного столбца, чтобы сделать search
- => прокрутка DT идет влево, а сфокусированный столбец исчезает справа
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)
Я думаю, что это ошибка в DT, но я могу ошибиться .
Вот первый обходной путь с двумя css решениями,
, но он слишком большой (css 1 в коде) или не динамический c (css 2 в код), и это с ScrollX = FALSE ... чтобы включить scrollX. Решение 1 выбрано в моем реальном случае в ожидании хорошего динамического c решения (или исправления в DT, если есть ошибка).
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)
Вот второй обходной путь, он находит хорошее * Элемент 1031 *, но он не работает со многими блестящими страницами, и для ScrollX = FALSE ... используется scrollX.
, поскольку подэлемент DT Shiny не рисуется (и load Кажется, что событие не работает с js delegate. Я говорю об этом в github / rstudio / глянцевый . Зная, что из SO перенаправление из jquery дополнительные примечания
"Во всех браузерах события загрузки, прокрутки и ошибок (например, для элемента) не всплывают. [...] Такие события не поддерживаются для использования с делегированием, но они могут использоваться, когда обработчик события напрямую присоединен к элементу, генерирующему событие. "
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)