MUI X Data Grid能否在表头列名后显示聚合求和结果？

当然可以实现，核心是利用MUI X DataGrid的自定义表头渲染能力，结合API获取聚合结果后拼接在列名后。以下是具体实现步骤和代码示例：

实现步骤 #

1. 先确保你的DataGrid已配置目标列的聚合规则，同时通过aggregationModel启用聚合功能
2. 给目标列配置renderHeader属性，在自定义渲染函数中通过DataGrid的API获取该列的聚合求和结果，再与原列名拼接显示
3. 若需要隐藏默认的底部聚合行，可添加hideFooter={true}属性

代码示例 #

import { DataGrid } from '@mui/x-data-grid';

// 定义列配置
const columns = [
  {
    field: 'amount',
    headerName: '交易金额',
    type: 'number',
    // 配置该列的聚合类型为求和
    aggregation: { type: 'sum' },
    // 自定义表头渲染
    renderHeader: (params) => {
      // 通过API获取当前列的聚合求和结果
      const totalAmount = params.api.getAggregationResult().amount;
      // 拼接列名与聚合结果，处理数据未加载时的空值
      return `${params.colDef.headerName} (总计: ${totalAmount ?? 0})`;
    },
  },
  {
    field: 'orderId',
    headerName: '订单ID',
    width: 150,
  },
];

// 模拟数据
const rows = [
  { id: 1, orderId: 'ORD-001', amount: 129 },
  { id: 2, orderId: 'ORD-002', amount: 245 },
  { id: 3, orderId: 'ORD-003', amount: 87 },
];

export default function AggregationInHeader() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        // 启用聚合，指定amount列使用求和规则
        aggregationModel={{ amount: 'sum' }}
        // 可选：隐藏底部默认聚合行，只在表头显示结果
        hideFooter={true}
      />
    </div>
  );
}

注意事项 #

• 如果你的数据是异步加载的，要处理totalAmount为undefined的情况，比如用?? 0兜底显示，或者添加加载状态提示
• 若需要给聚合结果设置不同样式，可以用React元素拼接，例如：

  return (
    <>
      {params.colDef.headerName}
      <span style={{ marginLeft: 8, color: '#1976d2', fontWeight: 600 }}>
        (总计: {totalAmount ?? 0})
      </span>
    </>
  );
  

• getAggregationResult()方法会返回所有已配置聚合列的结果，你可以根据列的field属性精准获取对应值

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