MRT logoMaterial React Table

Aggregation and Grouping Example

Grouping and Aggregation features are usually hard to implement, but MRT (thanks to TanStack Table) makes it easy. Once enabled, simply click the vertical ellipses (⋮) icon for the column you want to group by and select Group by (column name).

You can group by a single column or multiple columns at a time. Then, you can run aggregations on grouped columns to calculate totals, averages, max, min, etc.

The Grouping and Aggregation features work hand in hand with the Expanding and Sorting features. Try grouping by various columns in the example below and sorting by the aggregated columns, such as "age" or "salary".

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
State
First Name
Last Name
Age
Gender
Salary
Alabama (7)Oldest by State:
64
Average by State:
$43,375
ThadWiegand64Female$56,146
AliviaLedner56Male$12,591
DanykaGleason36Male$71,238
LionelHartmann30Nonbinary$58,743
ReinholdReichel30Female$30,531
LurlineKoepp59Female$10,645
KodyBraun38Female$63,733
Alaska (8)Oldest by State:
59
Average by State:
$68,901
EloisaKohler31Male$45,801
KianHand56Male$81,062
LoyceSchmidt29Female$76,295
MichaleCollier59Male$75,197
EldridgeStroman42Male$59,594
AlveraBalistreri25Female$79,844
KaydenEmard35Female$98,252
DomingoBauch36Female$35,159
Arizona (1)Oldest by State:
22
Average by State:
$54,027
GunnerRolfson22Male$54,027
Arkansas (4)Oldest by State:
52
Average by State:
$58,194
Max Age:
65
Average Salary:
$56,319
1-20 of 249

Source Code 

1import { useMemo } from 'react';
2import { Box, Stack } from '@mui/material';
3import {
4  MaterialReactTable,
5  useMaterialReactTable,
6  type MRT_ColumnDef,
7} from 'material-react-table';
8import { data, type Person } from './makeData';
9

10const Example = () => {
11  const averageSalary = useMemo(
12    () => data.reduce((acc, curr) => acc + curr.salary, 0) / data.length,
13    [],
14  );
15

16  const maxAge = useMemo(
17    () => data.reduce((acc, curr) => Math.max(acc, curr.age), 0),
18    [],
19  );
20

21  const columns = useMemo<MRT_ColumnDef<Person>[]>(
22    () => [
23      {
24        header: 'First Name',
25        accessorKey: 'firstName',
26        enableGrouping: false, //do not let this column be grouped
27      },
28      {
29        header: 'Last Name',
30        accessorKey: 'lastName',
31      },
32      {
33        header: 'Age',
34        accessorKey: 'age',
35        aggregationFn: 'max', //show the max age in the group (lots of pre-built aggregationFns to choose from)
36        //required to render an aggregated cell
37        AggregatedCell: ({ cell, table }) => (
38          <>
39            Oldest by{' '}
40            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
41            <Box
42              sx={{ color: 'info.main', display: 'inline', fontWeight: 'bold' }}
43            >
44              {cell.getValue<number>()}
45            </Box>
46          </>
47        ),
48        Footer: () => (
49          <Stack>
50            Max Age:
51            <Box color="warning.main">{Math.round(maxAge)}</Box>
52          </Stack>
53        ),
54      },
55      {
56        header: 'Gender',
57        accessorKey: 'gender',
58        //optionally, customize the cell render when this column is grouped. Make the text blue and pluralize the word
59        GroupedCell: ({ cell, row }) => (
60          <Box sx={{ color: 'primary.main' }}>
61            <strong>{cell.getValue<string>()}s </strong> ({row.subRows?.length})
62          </Box>
63        ),
64      },
65      {
66        header: 'State',
67        accessorKey: 'state',
68      },
69      {
70        header: 'Salary',
71        accessorKey: 'salary',
72        aggregationFn: 'mean',
73        //required to render an aggregated cell, show the average salary in the group
74        AggregatedCell: ({ cell, table }) => (
75          <>
76            Average by{' '}
77            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
78            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
79              {cell.getValue<number>()?.toLocaleString?.('en-US', {
80                style: 'currency',
81                currency: 'USD',
82                minimumFractionDigits: 0,
83                maximumFractionDigits: 0,
84              })}
85            </Box>
86          </>
87        ),
88        //customize normal cell render on normal non-aggregated rows
89        Cell: ({ cell }) => (
90          <>
91            {cell.getValue<number>()?.toLocaleString?.('en-US', {
92              style: 'currency',
93              currency: 'USD',
94              minimumFractionDigits: 0,
95              maximumFractionDigits: 0,
96            })}
97          </>
98        ),
99        Footer: () => (
100          <Stack>
101            Average Salary:
102            <Box color="warning.main">
103              {averageSalary?.toLocaleString?.('en-US', {
104                style: 'currency',
105                currency: 'USD',
106                minimumFractionDigits: 0,
107                maximumFractionDigits: 0,
108              })}
109            </Box>
110          </Stack>
111        ),
112      },
113    ],
114    [averageSalary, maxAge],
115  );
116

117  const table = useMaterialReactTable({
118    columns,
119    data,
120    enableColumnResizing: true,
121    enableGrouping: true,
122    enableStickyHeader: true,
123    enableStickyFooter: true,
124    initialState: {
125      density: 'compact',
126      expanded: true, //expand all groups by default
127      grouping: ['state'], //an array of columns to group by by default (can be multiple)
128      pagination: { pageIndex: 0, pageSize: 20 },
129      sorting: [{ id: 'state', desc: false }], //sort by state by default
130    },
131    muiToolbarAlertBannerChipProps: { color: 'primary' },
132    muiTableContainerProps: { sx: { maxHeight: 700 } },
133  });
134

135  return <MaterialReactTable table={table} />;
136};
137

138export default Example;
139

View Extra Storybook Examples