MRT logoMaterial React Table

Expanding Parsed Tree Example

Material React Table supports showing rows in a expanding tree structure and parsing them from a flat data structure with the getSubRows option. Learn more about how to customize this in the expanding sub-rows feature guide.

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
HenryLynchCamden.Macejkovic@yahoo.comCalifornia
MckennaFriesenVeda_Feeney@yahoo.comNew York
1-2 of 2

Source Code

1import { useMemo } from 'react';
2import {
3 MaterialReactTable,
4 useMaterialReactTable,
5 type MRT_ColumnDef,
6} from 'material-react-table';
7
8export type Employee = {
9 id: string;
10 firstName: string;
11 lastName: string;
12 email: string;
13 state: string;
14 managerId: string | null;
15};
16
17//flat data that TanStack Table's getSubRows() function will parse into a tree
18export const data: Employee[] = [
19 {
20 id: '9s41rp',
21 firstName: 'Kelvin',
22 lastName: 'Langosh',
23 email: 'Jerod14@hotmail.com',
24 state: 'Ohio',
25 managerId: '08m6rx',
26 },
27 {
28 id: '08m6rx',
29 firstName: 'Molly',
30 lastName: 'Purdy',
31 email: 'Hugh.Dach79@hotmail.com',
32 state: 'Rhode Island',
33 managerId: '5ymtrc',
34 },
35 {
36 id: '5ymtrc',
37 firstName: 'Henry',
38 lastName: 'Lynch',
39 email: 'Camden.Macejkovic@yahoo.com',
40 state: 'California',
41 managerId: null, //top of a tree
42 },
43 {
44 id: 'ek5b97',
45 firstName: 'Glenda',
46 lastName: 'Douglas',
47 email: 'Eric0@yahoo.com',
48 state: 'Montana',
49 managerId: '08m6rx',
50 },
51 {
52 id: 'xxtydd',
53 firstName: 'Leone',
54 lastName: 'Williamson',
55 email: 'Ericka_Mueller52@yahoo.com',
56 state: 'Colorado',
57 managerId: '08m6rx',
58 },
59 {
60 id: 'wzxj9m',
61 firstName: 'Mckenna',
62 lastName: 'Friesen',
63 email: 'Veda_Feeney@yahoo.com',
64 state: 'New York',
65 managerId: null, //top of a tree
66 },
67 {
68 id: '21dwtz',
69 firstName: 'Wyman',
70 lastName: 'Jast',
71 email: 'Melvin.Pacocha@yahoo.com',
72 state: 'Montana',
73 managerId: 'wzxj9m',
74 },
75 {
76 id: 'o8oe4k',
77 firstName: 'Janick',
78 lastName: 'Willms',
79 email: 'Delfina12@gmail.com',
80 state: 'Nebraska',
81 managerId: 'wzxj9m',
82 },
83];
84
85const Example = () => {
86 const columns = useMemo<MRT_ColumnDef<Employee>[]>(
87 //column definitions...
110 );
111
112 //only root rows with no managerId
113 const rootData = useMemo(() => data.filter((r) => !r.managerId), [data]);
114
115 const table = useMaterialReactTable({
116 columns,
117 data: rootData,
118 enableExpanding: true,
119 //note: performance of this example should be improved with hash maps. This is currently 0(n^2)
120 getSubRows: (row) => data.filter((r) => r.managerId === row.id),
121 });
122
123 return <MaterialReactTable table={table} />;
124};
125
126export default Example;
127

View Extra Storybook Examples