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.

Look the table.

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.

Look the table.

• reactjs
• material-ui
• mui-x-data-grid

1 Answer 1

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,
}