Quarto文档中reactable表格列自定义显示实现方案咨询

我在Quarto文档中用reactable生成表格，但列数太多，想默认只显示少数列，同时让用户能自主选择显示哪些列。以下是几种可行的实现方案：

方案1：reactable原生配置+自定义交互控件 #

reactable支持通过columns参数预设列的显示状态，结合HTML控件和简单JS就能实现用户控制列显示：

library(reactable)
library(htmltools)

# 预设列显示状态：默认显示核心列，隐藏其余列
column_config <- list(
  Sepal.Length = colDef(show = TRUE),
  Sepal.Width = colDef(show = TRUE),
  Petal.Length = colDef(show = FALSE),
  Petal.Width = colDef(show = FALSE),
  Species = colDef(show = TRUE)
)

# 创建列选择复选框
column_checkboxes <- tags$div(
  tags$label("选择要显示的列："),
  tags$br(),
  tags$input(type = "checkbox", id = "petal_len", value = "Petal.Length"),
  tags$label(for = "petal_len", "Petal.Length"),
  tags$br(),
  tags$input(type = "checkbox", id = "petal_wid", value = "Petal.Width"),
  tags$label(for = "petal_wid", "Petal.Width")
)

# 编写JS控制列显示/隐藏
toggle_script <- tags$script(HTML("
  document.querySelectorAll('input[type=\"checkbox\"]').forEach(box => {
    box.addEventListener('change', function() {
      const table = document.querySelector('.reactable');
      const colHeader = table.querySelector(`.reactable-column[data-column-name=\"${this.value}\"]`);
      const colCells = table.querySelectorAll(`.reactable-cell[data-column-name=\"${this.value}\"]`);
      
      if (this.checked) {
        colHeader.style.display = '';
        colCells.forEach(cell => cell.style.display = '');
      } else {
        colHeader.style.display = 'none';
        colCells.forEach(cell => cell.style.display = 'none');
      }
    });
  });
"))

# 组合控件、表格与脚本
tagList(
  column_checkboxes,
  reactable(iris, columns = column_config),
  toggle_script
)

方案2：将额外列放入折叠面板 #

把非核心列放在可折叠面板中，用户点击展开查看，适合不需要频繁切换列的场景：

library(reactable)
library(htmltools)

# 主表格显示核心列
core_table <- reactable(iris[, c("Sepal.Length", "Sepal.Width", "Species")],
                        defaultPageSize = 10)

# 折叠面板放置额外列
extra_panel <- tags$details(
  tags$summary("查看更多列"),
  reactable(iris[, c("Petal.Length", "Petal.Width")],
            defaultPageSize = 10,
            showPageSizeOptions = FALSE)
)

# 组合展示
tagList(core_table, extra_panel)

方案3：Quarto嵌入Observable JS交互 #

利用Quarto的Observable JS支持，通过JS实现更灵活的列控制：

// 加载iris数据（可替换为本地csv或直接生成）
iris = FileAttachment("iris.csv").csv({typed: true})

# 预设默认显示列
visibleCols = ["Sepal.Length", "Sepal.Width", "Species"]

# 生成列选择复选框
viewof selectedCols = Inputs.checkbox(Object.keys(iris[0]), {
  value: visibleCols,
  label: "选择要显示的列"
})

# 根据选择生成表格
Inputs.table(iris, {columns: selectedCols})

注：需将iris数据保存为csv文件放在Quarto文档同目录，或直接在OJS中构造数据。

内容的提问来源于stack exchange，提问作者mindlessgreen