R DT表格顶部的水平滚动条 [英] R DT Horizontal scroll bar at top of the table

问题描述

我有很长很长的DT，有光泽.默认情况下，我想在表格顶部显示水平滚动条.有没有办法做到这一点?我当前的DT定义如下:

  DT :: datatable(dt，行名= FALSE，过滤器= fbox，style ="bootstrap"，选项=列表(dom = dom，scrollX = TRUE，columnDefs = list(list(orderSequence = c('desc'，'asc')，目标="_all"))，处理=假，pageLength = 500，lengthMenu = list(c(500，1000，5000)，c("500"，"1000"，"5000")))，callback = DT :: JS("$(window).unload(function(){ta​​ble.state.clear();})"))％>％DT :: formatStyle(.，cn_cat，color ="black"，backgroundColor =#dee6ea"，fontWeight ="bold") 

谢谢.

解决方案

应用中所有数据表的翻转滚动条

您可以添加一些CSS，以翻转包含滚动条/表格的div，然后按照

 库(发光)图书馆(DT)CSS<-HTML("#flipped> .dataTables_wrapper.no-footer> .dataTables_scroll> .dataTables_scrollBody {转换:rotateX(180deg);}#flipped>.dataTables_wrapper.no-footer>.dataTables_scroll>.dataTables_scrollBody表{转换:rotateX(180deg);}")ui<-fluidPage(tags $ head(tags $ style(css))，fluidRow(column(width = 6，h4(翻转滚动条")，br()，DT :: dataTableOutput(翻转"))，列(宽度= 6，h4("Regular Scrollbar")，br()，DT :: dataTableOutput("regular"))))服务器<-功能(输入，输出，会话){输出$ flipped<-DT :: renderDataTable({DT :: datatable(mtcars，行名= FALSE，选项=列表(scrollX = TRUE))})输出$常规<-DT :: renderDataTable({DT :: datatable(mtcars，行名= FALSE，选项=列表(scrollX = TRUE))})}ShinyApp(用户界面，服务器) 

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.

解决方案

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)

这篇关于R DT表格顶部的水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！