Aggregation and Grouping Material React Table Example

Material React Table

Expanding Tree Example

Material React Table supports showing rows in a expanding tree structure. This example is the simplest implementation of this feature where each row of data potentially has a special subRows property that contains an array of sub rows. You don't have to follow this exact structure, but this is how MRT will expect to find your sub rows by default.

Learn more about how to customize this in the expanding sub-rows feature guide.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

First Name	Last Name	Address	City	State
Dylan	Murray	261 Erdman Ford	East Daphne	Kentucky
Ervin	Reinger	566 Brakus Inlet	South Linda	West Virginia
Jordane	Homenick	1234 Brakus Inlet	South Linda	West Virginia
Jordan	Clarkson	4882 Palm Rd	San Francisco	California
Brittany	McCullough	722 Emie Stream	Lincoln	Nebraska
Raquel	Kohler	769 Dominic Grove	Columbus	Ohio
Branson	Frami	32188 Larkin Turnpike	Charleston	South Carolina

Rows per page

1-2 of 2

This example is written for MRT V2.

If your app is still using MRT V1, either Upgrade to MRT V2 or use the V1 Docs instead. (useMaterialReactTable only exists in V2)

Source Code

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7
8export type Person = {
9  firstName: string;
10  lastName: string;
11  address: string;
12  city: string;
13  state: string;
14  subRows?: Person[]; //Each person can have sub rows of more people
15};
16
17export const data: Person[] = [
18  {
19    firstName: 'Dylan',
20    lastName: 'Murray',
21    address: '261 Erdman Ford',
22    city: 'East Daphne',
23    state: 'Kentucky',
24    subRows: [
25      {
26        firstName: 'Ervin',
27        lastName: 'Reinger',
28        address: '566 Brakus Inlet',
29        city: 'South Linda',
30        state: 'West Virginia',
31        subRows: [
32          {
33            firstName: 'Jordane',
34            lastName: 'Homenick',
35            address: '1234 Brakus Inlet',
36            city: 'South Linda',
37            state: 'West Virginia',
38          },
39          {
40            firstName: 'Jordan',
41            lastName: 'Clarkson',
42            address: '4882 Palm Rd',
43            city: 'San Francisco',
44            state: 'California',
45          },
46        ],
47      },
48      {
49        firstName: 'Brittany',
50        lastName: 'McCullough',
51        address: '722 Emie Stream',
52        city: 'Lincoln',
53        state: 'Nebraska',
54      },
55    ],
56  },
57  {
58    firstName: 'Raquel',
59    lastName: 'Kohler',
60    address: '769 Dominic Grove',
61    city: 'Columbus',
62    state: 'Ohio',
63    subRows: [
64      {
65        firstName: 'Branson',
66        lastName: 'Frami',
67        address: '32188 Larkin Turnpike',
68        city: 'Charleston',
69        state: 'South Carolina',
70      },
71    ],
72  },
73];
74
75const Example = () => {
76  const columns = useMemo<MRT_ColumnDef<Person>[]>(
77    //column definitions...
78    () => [
79      {
80        accessorKey: 'firstName',
81        header: 'First Name',
82      },
83      {
84        accessorKey: 'lastName',
85        header: 'Last Name',
86      },
87
88      {
89        accessorKey: 'address',
90        header: 'Address',
91      },
92      {
93        accessorKey: 'city',
94        header: 'City',
95      },
96
97      {
98        accessorKey: 'state',
99        enableColumnOrdering: false,
100        header: 'State',
101      },
102    ],
103    [],
104    
105  );
106
107  const table = useMaterialReactTable({
108    columns,
109    data,
110    enableExpandAll: false, //hide expand all double arrow in column header
111    enableExpanding: true,
112    filterFromLeafRows: true, //apply filtering to all rows instead of just parent rows
113    getSubRows: (row) => row.subRows, //default
114    initialState: { expanded: true }, //expand all rows by default
115    paginateExpandedRows: false, //When rows are expanded, do not count sub-rows as number of rows on the page towards pagination
116  });
117
118  return <MaterialReactTable table={table} />;
119};
120
121export default Example;
122

View Extra Storybook Examples