MUI X DataGridPremium仅聚合单列却显示多列聚合内容问题求助

方法1：精准配置列的聚合与footer渲染 #

即使给非目标列设置了aggregable: false，部分列可能仍会显示空单元格，你可以通过footerRenderer强制隐藏这些列的footer内容：

const columns = [
  { field: 'marketplace', headerName: '市场', aggregable: false, footerRenderer: () => null },
  { field: 'brand', headerName: '品牌', aggregable: false, footerRenderer: () => null },
  { 
    field: 'amount', 
    headerName: '金额', 
    aggregable: true, 
    aggregationFunction: 'sum',
    // 可选：格式化聚合结果显示
    valueFormatter: (params) => params.value ? `$${params.value.toFixed(2)}` : ''
  },
  // 其余非目标列均按上述格式配置
];

组件中保持聚合模型配置，无需额外initialState设置：

<DataGridPremium
  rows={rows}
  columns={columns}
  aggregationModel={{ amount: 'sum' }}
  showFooter={true}
/>

方法2：自定义整个Footer行渲染 #

如果方法1未解决问题，可直接替换默认Footer组件，仅渲染目标列的聚合值：

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

const CustomFooter = (props) => {
  const { apiRef } = props;
  const amountSum = apiRef.current.getAggregationResult('amount');
  
  return (
    <GridFooter {...props}>
      <tr>
        {/* 非amount列单元格留空 */}
        <td></td>
        <td></td>
        {/* 渲染amount列聚合结果 */}
        <td>$ {amountSum?.toFixed(2)}</td>
        {/* 其他列对应位置同样留空 */}
      </tr>
    </GridFooter>
  );
};

// 组件使用
<DataGridPremium
  rows={rows}
  columns={columns}
  aggregationModel={{ amount: 'sum' }}
  components={{ Footer: CustomFooter }}
/>

额外排查点 #

• 彻底移除initialState.aggregation相关配置，避免遗留设置干扰
• 若开启了分组功能，需确认分组后的聚合规则未覆盖目标配置

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