如何修复闪亮应用程序中 data.table 标题的位置答案

【问题标题】：How can I fix the position of the header of data.table in shiny-app如何修复闪亮应用程序中 data.table 标题的位置
【发布时间】：2020-08-27 07:44:55
【问题描述】：

假设我有以下app -

library(shiny)
library(DT)
library(dplyr)

ui <- fluidPage(
  div(style = "height: 300px; width: 100%; overflow-y: scroll;", DTOutput("aaa", height = '400px'))
)

server <- function(input, output) {
  output$aaa = 
            DT::renderDT({
            df = 
            structure(list(Col__1 = c("A", "A", "A", "A", "B", "C", "C", 
"D", "G", "G", "H", "H", "J", "K", "K", "M", "M", "M", "M", "M", 
"O", "P", "P", "R", "T", "T", "T", "U", "U", "W"), Col__2 = c(1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234), Col__3 = c(1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234), Col__4 = c(NA, 36, NA, 1, 
4, 1, NA, 65, NA, 396, 7, 2, 3, 29, 4, 185, 651, NA, 1, NA, 2, 
NA, 27, 92, 35, 29, NA, 60, 1, 144), Col__5 = c(NA, 1012, NA, 
12, 350, 98, NA, 3925, NA, 4729, 327, 5, 87, 310, 30, 1854, 13013, 
NA, 1, NA, 122, NA, 1354, 1629, 3278, 450, NA, 1808, 21, 948), 
    Col__6 = c(1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234), Col__7 = c(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1), 
    Col__8 = c(2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
    2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2), Col__9 = c("-", 
    " 36 (2%)", "-", "  1 (2%)", "  4 (1%)", "  1 (1%)", "-", 
    " 65 (1%)", "-", "396 (6%)", "  7 (1%)", "  2 (4%)", "  3 (2%)", 
    " 29 (4%)", "  4 (1%)", "185 (6%)", "651 (4%)", "-", "  1 (8%)", 
    "-", "  2 (1%)", "-", " 27 (2%)", " 92 (3%)", " 35 (1%)", 
    " 29 (3%)", "-", " 60 (2%)", "  1 (2%)", "144 (10%)"), Col__10 = c(2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5)), row.names = c(NA, -30L), class = "data.frame")

{  ### Few Important Definitions
                    Render3 = JS(
                                "function(data, type, row, meta){",
                                "  if(type === 'sort' || type === 'type'){",
                                "    return row[4];",
                                "  } else {",
                                "    return data;",
                                "  }",
                                "}"
                            )
                }

datatable(df, 
          callback = JS("$('table.dataTable.no-footer').css('border-bottom', '1px solid #b7b7b7');"),
          options = list(pageLength = dim(df)[1], bLengthChange = FALSE, autoWidth = FALSE, bInfo = FALSE, searching = FALSE, info = FALSE, bPaginate = FALSE,
                          order = list(list(7, 'desc')),
                          columnDefs = 
                              list(
                                  list(width = '40%', targets = 1, className = 'dt-center dt-center1'), 

                                  list(width = '0%', targets = 2, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 3, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 4, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 5, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 6, className = 'dt-center dt-center1', visible = FALSE),


                                  list(width = '15%', targets = 9,  className = 'dt-center dt-center1', visible = TRUE, render = Render3),


                                  list(targets = 0, visible = FALSE)
                              ))) 
        })
}
shinyApp(ui, server)

如您所见，如果我向下滚动 container div，那么我将无法看到 data.table 的标题。有什么办法可以将header的位置固定在当前位置吗？

任何指针都会非常有帮助。

Stéphane Laurent 回答后更新

将app 更新为FixedHeader

library(shiny)
library(DT)
library(dplyr)

ui <- fluidPage(
  tags$link(rel = "stylesheet", type = "text/css", href = "https://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.css"),
  tags$script(src='https://cdn.datatables.net/v/dt/dt-1.10.21/fh-3.1.7/datatables.min.js'),
  div(style = "height: 300px; width: 100%; overflow-y: scroll;", DTOutput("aaa", height = '400px'))
)

server <- function(input, output) {
  output$aaa = 
            DT::renderDT({
            df = 
            structure(list(Col__1 = c("A", "A", "A", "A", "B", "C", "C", 
"D", "G", "G", "H", "H", "J", "K", "K", "M", "M", "M", "M", "M", 
"O", "P", "P", "R", "T", "T", "T", "U", "U", "W"), Col__2 = c(1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234), Col__3 = c(1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234), Col__4 = c(NA, 36, NA, 1, 
4, 1, NA, 65, NA, 396, 7, 2, 3, 29, 4, 185, 651, NA, 1, NA, 2, 
NA, 27, 92, 35, 29, NA, 60, 1, 144), Col__5 = c(NA, 1012, NA, 
12, 350, 98, NA, 3925, NA, 4729, 327, 5, 87, 310, 30, 1854, 13013, 
NA, 1, NA, 122, NA, 1354, 1629, 3278, 450, NA, 1808, 21, 948), 
    Col__6 = c(1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234), Col__7 = c(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1), 
    Col__8 = c(2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
    2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2), Col__9 = c("-", 
    " 36 (2%)", "-", "  1 (2%)", "  4 (1%)", "  1 (1%)", "-", 
    " 65 (1%)", "-", "396 (6%)", "  7 (1%)", "  2 (4%)", "  3 (2%)", 
    " 29 (4%)", "  4 (1%)", "185 (6%)", "651 (4%)", "-", "  1 (8%)", 
    "-", "  2 (1%)", "-", " 27 (2%)", " 92 (3%)", " 35 (1%)", 
    " 29 (3%)", "-", " 60 (2%)", "  1 (2%)", "144 (10%)"), Col__10 = c(2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5)), row.names = c(NA, -30L), class = "data.frame")

{  ### Few Important Definitions
                    Render3 = JS(
                                "function(data, type, row, meta){",
                                "  if(type === 'sort' || type === 'type'){",
                                "    return row[4];",
                                "  } else {",
                                "    return data;",
                                "  }",
                                "}"
                            )
                }

datatable(df, extensions = "FixedHeader", 
          callback = JS("$('table.dataTable.no-footer').css('border-bottom', '1px solid #b7b7b7');"),
          options = list(fixedHeader = TRUE,pageLength = dim(df)[1], bLengthChange = FALSE, autoWidth = FALSE, bInfo = FALSE, searching = FALSE, info = FALSE, bPaginate = FALSE,
                          order = list(list(7, 'desc')),
                          columnDefs = 
                              list(
                                  list(width = '40%', targets = 1, className = 'dt-center dt-center1'), 

                                  list(width = '0%', targets = 2, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 3, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 4, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 5, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 6, className = 'dt-center dt-center1', visible = FALSE),


                                  list(width = '15%', targets = 9,  className = 'dt-center dt-center1', visible = TRUE, render = Render3),


                                  list(targets = 0, visible = FALSE)
                              ))) 
        })
}
shinyApp(ui, server)

我仍然没有看到header 在当前设置下保持在固定位置。但是，如果我删除样式overflow-y: scroll，那么它就可以工作了。有什么解决办法吗？

【问题讨论】：

标签： datatable shiny dt shinyapps fixed-header-tables

【解决方案1】：

FixedHeader 扩展是否适合您的需要？

library(DT)

datatable(iris, extensions = "FixedHeader", 
          options = list(
            fixedHeader = TRUE
          )
)

【讨论】：

我使用了 'FixedHeader' 库，但仍然没有看到任何变化。但是，如果我删除样式 overflow-y: scroll 那么它正在工作。用这个发现更新了我原来的帖子。有什么解决办法吗？