[data grid] Display aggregation label at the aggregation row

[deerawan]

Summary

Able to move aggregation labels e.g sum, avg from the column header to the aggregation footer

Examples

Before

After

Move it to the aggregation row

Motivation

Putting them in the header is so far away from the data it's referring to

Search keywords: data grid, aggregation

Order ID: 119122

[michelengelen]

Hi @deerawan and thanks for opening an issue for this. What you describe makes perfect sense ... I guess this can be achieved with custom renderers, so let me take a look at a possible solution!

[michelengelen]

I did play around with this for a while and it indeed can be achieved with some customization.

The aggregation label in the header can be hidden through theming or the sx prop:

sx={{
  // Hide aggregation method label from column headers
  '& .MuiDataGrid-aggregationColumnHeaderLabel': {
    display: 'none',
  },
}}

And to display it in the aggregation row instead you can use the renderCell from the column definition:

const renderAggFooterCell: NonNullable<GridColDef['renderCell']> = (params) => {
  if ((params as any).aggregation) {
    const method = (params as any).aggregation.aggregationFunctionName;
    return (
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
        <span>{params.formattedValue}</span>
        <span style={{ fontSize: 11, opacity: 0.7 }}>{method}</span>
      </div>
    );
  }
  return params.formattedValue as any;
};

This will make it look similar to this

[github-actions[bot]]

This issue has been inactive for 7 days. Please remove the stale label or leave a comment to keep it open. Otherwise, it will be closed in 5 days.