I'm using the DataGridPremium component from MUI X, and I want to aggregate only one column, "amount", using the sum function.
<DataGridPremium
aggregationModel={{
amount: 'sum',
}}
...
/>
In addition, I explicitly set aggregable: false on all other columns, like so:
export const MarketplaceColumn: GridColDef = {
flex: 1,
field: 'marketplaceId',
headerName: 'Marketplace',
headerAlign: 'center',
sortable: true,
aggregable: false,
sortComparator: (v1, v2) => {
return v1.localeCompare(v2);
},
renderHeader: params => renderHeaderColumn(params),
renderCell: params => {
const marketplace = useGetMarketplace(params.value);
return (
<Box component={'div'} className="h-full flex items-center justify-center">
<MarketplaceIcon marketplaceId={marketplace?._id} />
</Box>
);
},
};
export const AmountColumn: GridColDef = {
field: 'amount',
headerAlign: 'center',
align: 'center',
flex: 1,
aggregable: true,
type: 'number',
preProcessEditCellProps: params => {
const hasError = params.props.value < 0;
return {
...params,
error: hasError,
helperText: hasError ? 'Amount must be greater than 0' : '',
};
},
renderEditCell: params => <TooltipWrapper {...params} />,
valueFormatter: value => formatCurrency(value as number),
headerName: 'Amount',
renderHeader: params => renderHeaderColumn(params),
};
Despite this, the footer row is still displaying aggregation values or empty cells under those other columns (like marketplace, brand, etc.).
I also tried removing the initialState.aggregation.model completely, and kept only the aggregationModel as shown above — but the issue still persists.
To prevent unwanted content in aggregation rows, use the isAutogeneratedRow
helper from @mui/x-data-grid-premium
inside renderCell or valueFormatter:
import { isAutogeneratedRow } from '@mui/x-data-grid-premium';
{
field: 'marketplaceId',
headerName: 'Marketplace',
aggregable: false,
renderCell: (params) => isAutogeneratedRow(params) ? null : params.value,
}