如何实现Tabulator.js多级分组表格各层级显示总计

问题场景 #

已创建带多级分组的Tabulator表格，配置代码如下：

var table = new Tabulator("#example-table",  {
  groupClosedShowCalcs:true, // 分组关闭时显示计算结果
  columnCalcs:"both", // 启用表格和分组计算
  groupBy:["CURR","ASSETS"],
  // 其他配置...
});

当前子级分组（ASSETS）的小计可正常显示，但一级分组（CURR）的小计无法显示，需要实现每个分组层级都显示总计。

问题原因 #

全局配置columnCalcs: "both"默认仅会在最深层级的分组生成计算结果，一级分组不会自动触发计算，必须为需要计算的列单独指定计算层级。

修复方案 #

1. 保留现有全局配置不变；
2. 在需要显示小计的列定义中，添加计算规则并设置calcLevel: "all"，让计算逻辑应用到所有分组层级：

columns: [
  { title: "货币", field: "CURR" },
  { title: "资产类型", field: "ASSETS" },
  { 
    title: "金额", 
    field: "amount", 
    calc: "sum", // 根据业务需求选择计算类型：sum/avg/count/max/min等
    calcLevel: "all" // 关键配置：让该列在所有分组层级都显示小计
  },
  // 其他列的配置...
]

修改完成后，CURR一级分组、ASSETS子级分组都会显示对应列的小计，同时表格底部也会显示总计（因columnCalcs: "both"的配置）。

补充说明 #

• calcLevel的可选值：
  • "table"：仅在表格底部显示总计
  • "group"：仅在最深层级分组显示小计（默认行为）
  • "all"：所有分组层级+表格总计都显示计算结果
• 如果需要不同分组层级使用不同的计算规则，可以自定义calc函数，通过参数判断当前分组层级来返回对应结果。

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