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






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