MRT logoMaterial React Table

Legacy V2 Docs

Column Grouping Example

Material React Table has a few different UI options and behaviors for displaying grouped columns. See the Column Grouping Guide to learn more.

Lazy Sub-Rows
Lazy Detail Panel
Editing Sub-Rows
More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
Utah (1)
Male (5)
DanikaRodriguez5731404
AlfonzoAbernathy4053374
AntwanZieme2156638
KathrynLangworth3925720
HayleePrice5759047
Alaska (2)
Male (4)
EloisaKohler3145801
KianHand5681062
MichaleCollier5975197
EldridgeStroman4259594
Female (4)
LoyceSchmidt2976295
AlveraBalistreri2579844
KaydenEmard3598252
DomingoBauch3635159
Arizona (1)
Male (1)
1-20 of 342

Source Code

1import { useMemo, useState } from 'react';
2import {
3 MaterialReactTable,
4 useMaterialReactTable,
5 type MRT_ColumnDef,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8import {
9 FormControl,
10 FormControlLabel,
11 FormLabel,
12 Radio,
13 RadioGroup,
14 Stack,
15} from '@mui/material';
16
17const Example = () => {
18 const columns = useMemo<MRT_ColumnDef<Person>[]>(
19 //column definitions...
48 );
49
50 //demo state
51 const [groupedColumnMode, setGroupedColumnMode] = useState<
52 false | 'remove' | 'reorder'
53 >('reorder'); //default is 'reorder
54
55 const table = useMaterialReactTable({
56 columns,
57 data,
58 enableGrouping: true,
59 groupedColumnMode,
60 initialState: {
61 expanded: true, //expand all groups by default
62 grouping: ['state', 'gender'], //an array of columns to group by by default (can be multiple)
63 pagination: { pageIndex: 0, pageSize: 20 },
64 },
65 muiTableContainerProps: { sx: { maxHeight: '800px' } },
66 });
67
68 return (
69 <Stack gap="1rem">
70 <DemoRadioGroup
71 groupedColumnMode={groupedColumnMode}
72 setGroupedColumnMode={setGroupedColumnMode}
73 />
74 <MaterialReactTable table={table} />
75 </Stack>
76 );
77};
78
79export default Example;
80
81//demo...
117

View Extra Storybook Examples