如何在React的ag-grid表格底部实现列求和并实时更新？

问题背景 #

我在React项目中使用AG Grid构建表格，现有组件代码和列定义如下：

组件代码 #

<AgGridReact
    rowData={details}
    columnDefs={columnDefs}
    defaultColDef={defaultColDef}
    autoGroupColumnDef={autoGroupColumnDef}
    aggFuncs={aggFuncs}
    groupIncludeFooter={groupIncludeFooter}
    groupIncludeTotalFooter={groupIncludeTotalFooter}
></AgGridReact>

列定义代码 #

const [columnDefs, setColumnDefs] = useState([
    {
        headerName: 'Details',
        children: [
            {
                field: 'uniqId',
                width: 90,
                filter: 'agTextColumnFilter',
            },
            {
                field: 'name',
                width: 180,
                filter: 'agNumberColumnFilter',
            },
        ],
    },
    {
        headerName: 'Other Details',
        children: [
            { field: 'gender', width: 100 },
            {
                field: 'salary',
                aggFunc: "sum",
                width:100,
            },
            {
                field: 'country',
                width: 100,
                filter: 'agNumberColumnFilter',
            },
            {
                field: 'birthdate',
                width: 100,
                filter: 'agNumberColumnFilter',
            },
            {
                field: 'vegetarian',
                width: 100,
                filter: 'agNumberColumnFilter',
            },
            {
                field: "Edit",
                colId: "view",
                width: 100,
                cellRendererFramework: function (params) {
                    return <button className="btn btn-secondary gridButton" onClick={() => getUserDetails(params.data._id)}> Edit </button>
                }
            },
            {
                field: "Delete",
                colId: "view",
                width: 100,
                cellRendererFramework: function (params) {
                    return <button className="btn btn-danger gridButtonDelete" onClick={() => handleDelete(params.data._id)}> Delete </button>
                }
            },
        ],
    },
]);

需要实现：在表格底部显示各数值列的求和结果，且单元格编辑、新增数据时求和结果自动更新。

解决方案 #

1. 开启总脚注显示 #

AG Grid的groupIncludeTotalFooter属性用于控制表格底部总聚合脚注的显示，直接在组件中设置为true即可启用：

<AgGridReact
    rowData={details}
    columnDefs={columnDefs}
    defaultColDef={defaultColDef}
    autoGroupColumnDef={autoGroupColumnDef}
    aggFuncs={aggFuncs}
    groupIncludeFooter={true} // 可选：如果需要分组行的聚合脚注
    groupIncludeTotalFooter={true} // 关键配置：开启表格底部总脚注
></AgGridReact>

2. 配置数值列的求和聚合 #

只有设置了aggFunc的列才会在总脚注中生成聚合结果，需要针对数值列做以下调整：

• 对真正的数值列（比如salary）保留aggFunc: 'sum'配置
• 修正非数值列的过滤器：name、country、birthdate、vegetarian这类非数值字段，把agNumberColumnFilter改为对应类型的过滤器（比如agTextColumnFilter），避免解析错误

修正后的数值列示例：

{
    field: 'salary',
    aggFunc: 'sum',
    width: 100,
    // 可选：给脚注单元格加样式，区分普通数据行
    cellClass: 'ag-footer-cell'
}

3. 确保数据更新时触发自动刷新 #

AG Grid会监听rowData的变化，只要在编辑、新增、删除数据时正确更新details状态，聚合结果就会自动重新计算：

编辑数据场景

修改数据后替换数组中对应元素，更新状态：

const handleUpdateUser = (updatedData) => {
    const newDetails = details.map(item => 
        item._id === updatedData._id ? updatedData : item
    );
    setDetails(newDetails);
};

新增数据场景

将新数据推入数组并更新状态：

const handleAddUser = (newUser) => {
    setDetails([...details, newUser]);
};

删除数据场景

保持现有handleDelete的逻辑即可，删除后更新details状态：

const handleDelete = (id) => {
    const newDetails = details.filter(item => item._id !== id);
    setDetails(newDetails);
};

4. 可选：自定义总脚注显示 #

如果默认的求和样式不符合需求，可以通过footerComponentFramework自定义脚注内容：

{
    field: 'salary',
    aggFunc: 'sum',
    width: 100,
    footerComponentFramework: (props) => {
        return <div className="font-bold">薪资总计：{props.value || 0}</div>;
    },
}

关键注意事项 #

• 必须用不可变方式更新rowData：每次数据变化都返回新数组，不能直接修改原数组，否则React状态不会触发重渲染，AG Grid也无法感知数据变化
• 非数值列不要设置agNumberColumnFilter，避免AG Grid解析错误导致聚合异常
• 如果开启了AG Grid自带的行编辑（editable: true），编辑完成后AG Grid会自动同步数据到rowData，聚合结果会实时刷新

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