R Shiny 中 DT::datatable() 中冻结标头问题的解决方法

Posted 2023-03-24

【中文标题】R Shiny 中 DT::datatable() 中冻结标头问题的解决方法

【英文标题】：Workaround for issues with freezing header in DT::datatable() in R Shiny

【发布时间】：2021-12-18 11:37:47

【问题描述】：

我在 R Shiny 应用程序中使用 DT::datatable() 来呈现一个表头和第一列固定的表。我的应用程序有多个选项卡。我尝试了两种不同的方法，但都有使它们无法使用的错误。我知道已经报告了这些问题，但我想知道是否有人知道适用于我的情况的解决方法。

方法一：scrollY

这里我在选项中设置了scrollY = "500px"。问题是当我将条目数更改为 10 以外的值时，当我滚动到底部时，第一列与其他列未对齐。

require(shiny)
require(DT)

shinyApp(
  ui = tabsetPanel(
    tabPanel(
      title = "Tab 1",
      fluidPage(
        DTOutput("table1")
      )
    ),
    tabPanel(
      title = "Tab 2",
      fluidPage(
        plotOutput("myPlot"),
        DTOutput("table2")
      )
    )
  ),
  server = function(input, output, session) 
    
    output$table1 <- DT::renderDataTable(
      
      myData <- cbind(iris, iris, iris, iris)
      colnames(myData) <- paste0("Column ", 1:ncol(myData))
      
      DT::datatable(
        data = myData, 
        extensions = "FixedColumns", 
        rownames = F,
        options = list(
          scrollX = T, 
          scrollY = "500px",
          fixedColumns = list(leftColumns = 1)
        ) 
      ) 
    )
    
    output$myPlot <- renderPlot(
      plot(1:10, 1:10)
    )
    
    output$table2 <- DT::renderDataTable(
      DT::datatable(iris)
    )
    
  
)

方法 #2：FixedHeader 扩展

这里我使用 FixedHeader 扩展并在选项中设置fixedHeader = T。这避免了方法#1 的问题，但它有一个更严重的问题。表格中的固定标题出现在其他选项卡上。在此示例中，如果我向下滚动选项卡 1 上的表格，标题仍按预期保持固定，但当我切换到选项卡 2 并向下滚动时，选项卡 1 上的表格的固定标题出现在选项卡 2 上。

require(shiny)
require(DT)

shinyApp(
  ui = tabsetPanel(
    tabPanel(
      title = "Tab 1",
      fluidPage(
        DTOutput("table1")
      )
    ),
    tabPanel(
      title = "Tab 2",
      fluidPage(
        plotOutput("myPlot"),
        DTOutput("table2")
      )
    )
  ),
  server = function(input, output, session) 
    
    output$table1 <- DT::renderDataTable(
      
      myData <- cbind(iris, iris, iris, iris)
      colnames(myData) <- paste0("Column ", 1:ncol(myData))
      
      DT::datatable(
        data = myData, 
        extensions = c("FixedColumns", "FixedHeader"), 
        rownames = F,
        options = list(
          scrollX = T, 
          fixedHeader = T,
          fixedColumns = list(leftColumns = 1)
        ) 
      ) 
    )
    
    output$myPlot <- renderPlot(
      plot(1:10, 1:10)
    )
    
    output$table2 <- DT::renderDataTable(
      DT::datatable(iris)
    )
    
  
)

【参考方案1】：

将 DT 从 0.19 版更新到 0.20 版（2021 年 11 月 15 日发布）修复了该问题，因此方法 #1 可以正常工作。