reactable使用groupBy与自定义JS聚合函数实现三级层级分组表格问询

使用reactable原生的groupBy功能配合自定义列聚合规则，即可同时满足折叠展开需求与全局列对齐效果：

步骤1：预处理数据 #

先给每一条三级编码记录补全所属的一级、二级编码与对应名称：

library(dplyr)
library(readxl)
library(reactable)

# 读取原始数据
ocup  <- readxl::read_excel("cno11_estructura.xls",
                           col_names = F,
                           sheet     = 1,
                           range     = "A1:B761")
colnames(ocup) <- c("codigo_ocup", "nombre_ocup")

# 分离各级分组数据
grp1 <- filter(ocup, nchar(codigo_ocup) == 1) %>% 
  select(cod1 = codigo_ocup, nombre1 = nombre_ocup)
grp2 <- filter(ocup, nchar(codigo_ocup) == 2) %>% 
  select(cod2 = codigo_ocup, nombre2 = nombre_ocup)
grp3 <- filter(ocup, nchar(codigo_ocup) == 3) 

# 给三级数据补全上级信息
grp3 <- grp3 %>%
  mutate(
    cod1 = substr(codigo_ocup, 1, 1),
    cod2 = substr(codigo_ocup, 1, 2)
  ) %>%
  left_join(grp1, by = "cod1") %>%
  left_join(grp2, by = "cod2")

步骤2：配置reactable分组展示 #

指定分组字段，给各列设置自定义聚合函数，不同层级展示对应分组的编码和名称：

reactable(
  grp3,
  groupBy = c("cod1", "cod2"),
  columns = list(
    cod1 = colDef(
      name = "编码",
      aggregate = JS("values => values[0]")
    ),
    cod2 = colDef(
      name = "编码",
      aggregate = JS("values => values[0]"),
      hidden = TRUE
    ),
    codigo_ocup = colDef(name = "编码"),
    nombre_ocup = colDef(
      name = "名称",
      aggregate = JS("
        (_, rowInfo) => {
          if (rowInfo.groupBy === 'cod1') return rowInfo.rows[0].nombre1
          if (rowInfo.groupBy === 'cod2') return rowInfo.rows[0].nombre2
        }
      ")
    ),
    nombre1 = colDef(hidden = TRUE),
    nombre2 = colDef(hidden = TRUE)
  )
)

效果说明 #

• 初始状态仅展示1位编码的一级分组，点击展开后显示2位编码的二级分组，再次展开显示3位编码的三级明细
• 所有层级的编码、名称列全局对齐，没有嵌套表格的错位问题
• 不需要额外处理数据聚合，直接利用已有的分组名称信息展示即可

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