R DT 表格顶部的水平滚动条答案

【问题标题】：R DT Horizontal scroll bar at top of the tableR DT 表格顶部的水平滚动条
【发布时间】：2017-11-24 06:50:45
【问题描述】：

我有一个很宽很长的闪亮的 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")

提前致谢。

【问题讨论】：

标签： r shiny dt

【解决方案1】：

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

您可以添加一些 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)

【讨论】：

嗨@HallieSwan 我已经在几个浏览器上尝试过这个例子，但顶部没有滚动条
如果将Scroller 扩展名添加到DT，这里的CSS 解决方案似乎有一些意想不到的副作用。

【解决方案2】：

我设法使用@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 将滚动条与最终表格中的标题对齐。滚动表格只会翻转表格中的内容，将滚动条留在顶部。

【讨论】：