MRT logoMaterial React Table

Legacy V2 Docs

Customized Grouping Example

Here is an advanced example showing off various ways in which the expand column can be customized with column grouping features. 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





Alabama(3)
Female(4)
FemaleThadWiegand6456146
FemaleReinholdReichel3030531
FemaleLurlineKoepp5910645
FemaleKodyBraun3863733
Male(2)
MaleAliviaLedner5612591
MaleDanykaGleason3671238
Nonbinary(1)
NonbinaryLionelHartmann3058743
Alaska(2)
Male(4)
MaleEloisaKohler3145801
MaleKianHand5681062
MaleMichaleCollier5975197
MaleEldridgeStroman4259594
Female(4)
FemaleLoyceSchmidt2976295
FemaleAlveraBalistreri2579844
1-20 of 342

Source Code

1import { useMemo, useState } from 'react';
2import {
3 MaterialReactTable,
4 useMaterialReactTable,
5 type MRT_ColumnDef,
6 type MRT_Row,
7 MRT_ExpandAllButton,
8} from 'material-react-table';
9import { data, type Person } from './makeData';
10import { Box, Stack } from '@mui/material';
11
12const Example = () => {
13 const columns = useMemo<MRT_ColumnDef<Person>[]>(
14 //column definitions...
43 );
44
45 const table = useMaterialReactTable({
46 columns,
47 data,
48 displayColumnDefOptions: {
49 'mrt-row-expand': {
50 Header: () => (
51 <Stack direction="row" alignItems="center">
52 <MRT_ExpandAllButton table={table} />
53 <Box>Groups</Box>
54 </Stack>
55 ),
56 GroupedCell: ({ row, table }) => {
57 const { grouping } = table.getState();
58 return row.getValue(grouping[grouping.length - 1]);
59 },
60 enableResizing: true,
61 muiTableBodyCellProps: ({ row }) => ({
62 sx: (theme) => ({
63 color:
64 row.depth === 0
65 ? theme.palette.primary.main
66 : row.depth === 1
67 ? theme.palette.secondary.main
68 : undefined,
69 }),
70 }),
71 size: 200,
72 },
73 },
74 enableGrouping: true,
75 enableColumnResizing: true,
76 groupedColumnMode: 'remove',
77 initialState: {
78 density: 'compact',
79 expanded: true, //expand all groups by default
80 grouping: ['state', 'gender'], //an array of columns to group by by default (can be multiple)
81 pagination: { pageIndex: 0, pageSize: 20 },
82 sorting: [{ id: 'state', desc: false }],
83 },
84 });
85
86 return <MaterialReactTable table={table} />;
87};
88
89export default Example;
90

View Extra Storybook Examples