MRT logoMaterial React Table

Expanding Tree Example

Material React Table supports showing rows in a expanding tree structure. Learn more about how to customize this in the expanding sub-rows feature guide.

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
DylanMurray261 Erdman FordEast DaphneKentucky
ErvinReinger566 Brakus InletSouth LindaWest Virginia
JordaneHomenick1234 Brakus InletSouth LindaWest Virginia
JordanClarkson4882 Palm RdSan FranciscoCalifornia
BrittanyMcCullough722 Emie StreamLincolnNebraska
RaquelKohler769 Dominic GroveColumbusOhio
BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina

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 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...
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 initialState: { expanded: true }, //expand all rows by default
114 paginateExpandedRows: false, //When rows are expanded, do not count sub-rows as number of rows on the page towards pagination
115 });
116
117 return <MaterialReactTable table={table} />;
118};
119
120export default Example;
121

View Extra Storybook Examples