我有一个宽而长的DT闪亮。默认情况下,我想在表格顶部显示水平滚动条。有没有办法做到这一点?我目前的DT定义如下所示:
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")
提前致谢。
答案 0 :(得分:5)
在App中翻转所有DataTables的滚动条
您可以添加一些css来翻转包含滚动条/表格的div,然后根据this回复表格内容:
.dataTables_scrollBody {
transform:rotateX(180deg);
}
.dataTables_scrollBody table {
transform:rotateX(180deg);
}
翻转特定数据表的滚动条
如果您只想翻转一张桌子上的滚动条,可以选择特定的表格:
#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);
}
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)
答案 1 :(得分:0)
我使用@HallieSwam的建议设法使滚动条位于顶部,但是查看了源HTML代码以了解需要旋转哪些部分。
对我有用的东西:
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
旋转整个表,包括滚动条,然后需要scrollHead
将滚动条与最终表中的标题对齐。滚动表将仅旋转表中的内容,将滚动条置于顶部。