如何用reactable的groupBy分组并让列跨多列显示？

问题说明 #

我有一个仅含两列的数据集，两列均为较长的字符串，测试数据生成代码如下：

library(lorem) # 生成测试数据

dat <- data.frame(
    group=c( # 分为2组
        rep(as.character(lorem::ipsum(1)), 3), 
        rep(as.character(lorem::ipsum(1)), 3)
    ), 
    item=as.character(lorem::ipsum(6))
)

使用reactable并通过groupBy分组展示时，两列并排会产生大量空白。尝试过wrap=TRUE会丢失信息，用details生成子表则会丢失搜索功能，希望实现分组后组标题和子项内容都跨两列显示、占满表格宽度的效果。

实现代码 #

通过自定义列渲染结合HTML的colspan属性设置单元格跨列，同时保留原生分组和搜索功能，代码如下：

library(reactable)
library(htmltools)

reactable(
  dat,
  groupBy = "group",
  searchable = TRUE, # 保留搜索功能
  columns = list(
    group = colDef(
      # 自定义分组标题单元格，跨两列显示
      groupHeader = function(value) {
        tags$td(
          colspan = 2,
          style = "font-weight: bold; padding: 10px 8px; background-color: #f7f7f7;",
          value
        )
      },
      # 隐藏原group列的表头
      header = function() NULL
    ),
    item = colDef(
      # 自定义子项单元格，跨两列显示
      cell = function(value) {
        tags$td(
          colspan = 2,
          style = "padding: 8px; border-top: 1px solid #eee;",
          value
        )
      },
      # 隐藏原item列的表头
      header = function() NULL
    )
  ),
  # 调整表格整体样式
  theme = reactableTheme(
    borderColor = "#eee",
    tableStyle = list(width = "100%")
  )
)

效果说明 #

• 分组标题和每个子项的内容都会跨两列显示，完全占满表格宽度，消除空白
• 保留reactable原生的分组折叠/展开功能
• 保留全局搜索功能，可对所有内容进行检索
• 样式区分明显，分组标题与子项视觉层级清晰

内容的提问来源于stack exchange，提问作者Karsten W.