Tabulator中如何按分组calcResults计算结果对分组排序

Tabulator原生支持按分组calcResults的计算值对分组排序，默认排序不符合预期的核心原因是：默认分组排序逻辑是取分组内排序字段的最大/最小值判定分组顺序，不会读取配置的分组汇总计算结果。

实现步骤 #

1. 5.x及以上版本（推荐方案） #

直接使用内置的groupSort自定义排序参数，读取分组对象上的汇总结果做比对即可，基础配置示例：

const table = new Tabulator("#your-table", {
    data: [
        {id:1, company:"company 1", quantity:10}, 
        {id:2, company:"company 1", quantity:10}, 
        {id:3, company:"company 1", quantity:10}, 
        {id:4, company:"company 2", quantity:20}, 
        {id:5, company:"company 2", quantity:1}, 
        {id:6, company:"company 2", quantity:1}, 
        {id:7, company:"company 3", quantity:9}, 
        {id:8, company:"company 3", quantity:9}, 
        {id:9, company:"company 3", quantity:9}, 
    ],
    groupBy: "company",
    // 配置分组汇总规则
    groupCalc: {
        quantity: "sum"
    },
    // 关闭默认的分组头点击排序逻辑，避免覆盖自定义排序规则
    groupHeaderSort: false,
    // 自定义分组排序逻辑
    groupSort: (groupA, groupB) => {
        // 读取两个分组的quantity汇总值
        const valA = groupA.calcResults.quantity;
        const valB = groupB.calcResults.quantity;
        // 降序排列返回valB - valA，升序排列返回valA - valB
        return valB - valA;
    }
});

2. 4.x老版本兼容方案 #

如果用的是不支持groupSort参数的老版本，可以在数据处理完成的回调里手动重排分组顺序：

const table = new Tabulator("#your-table", {
    // 其余data、groupBy、groupCalc配置和上面一致
});

// 数据加载、计算完成后触发重排
table.on("dataProcessed", () => {
    // 获取当前所有分组
    const groups = table.getGroups();
    // 按quantity汇总值降序排序
    groups.sort((a, b) => b.calcResults.quantity - a.calcResults.quantity);
    // 按排序后的分组顺序重新挂载分组
    table.setGroupBy(groups.map(item => item.getKey()));
});

注意事项 #

• 原始数据的quantity字段如果是字符串格式，求和前需要先转为数字类型，否则会出现字符串拼接导致汇总值计算错误，建议直接在数据源中存为数字类型，或通过字段mutator做类型转换。
• 配置完成后渲染的分组顺序和预期完全一致：

company 1: 30 
company 3: 27
company 2: 22

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