Expanding Sub-Rows/Tree Data Feature Guide

Expanding Sub-Rows (Tree Data) Feature Guide

Material React Table has support for expanding sub-rows or tree data. This feature is useful for displaying hierarchical data. The sub-rows can be expanded and collapsed by clicking on the expand/collapse icon.

NOTE: This feature is for expanding rows of the same data type. If you want to add expansion of more data for the same row, check out the Detail Panel Feature Guide.

Relevant Props

	#	Type	Default Value	More Info Links
	1	Array<TData>		Usage Docs
The data for the table to display. This array should match the type you provided to table.setRowType<...>, but in theory could be an array of anything. It's common for each item in the array to be an object of key/values but this is not required. Columns can access this data via string/index or a functional accessor to return anything they want. When the data option changes reference (compared via Object.is), the table will reprocess the data. Any other data processing that relies on the core data model (such as grouping, sorting, filtering, etc) will also be reprocessed.
	2	boolean		TanStack Table Expanding Docs
Enable this setting to automatically reset the expanded state of the table when grouping state changes.
	3	boolean	true
No Description Provided... Yet...
	4	boolean
No Description Provided... Yet...
	5	(dataRow: TData) => TData[]
No Description Provided... Yet...
	6	() => MRT_RowModel<TData>
No Description Provided... Yet...
	7	(row: Row<TData>) => boolean		TanStack Table Expanding Docs
If provided, allows you to override the default behavior of determining whether a row is currently expanded.
	8	(row: Row<TData>) => boolean		TanStack Table Expanding Docs
If provided, allows you to override the default behavior of determining whether a row can be expanded.
	9	( originalRow: TData, index: number ) => undefined \| TData[]		TanStack Table Core Table Docs
This optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row.
	10	boolean		TanStack Table Expanding Docs
Enables manual row expansion. If this is set to true, getExpandedRowModel will not be used to expand rows and you would be expected to perform the expansion in your own data model. This is useful if you are doing server-side expansion.
	11	IconButtonProps \| ({ table }) => IconButtonProps		Material UI IconButton Props
No Description Provided... Yet...
	12	IconButtonProps \| ({ row, table }) => IconButtonProps		Material UI IconButton Props
No Description Provided... Yet...
	13	OnChangeFn<ExpandedState>		TanStack Table Expanding Docs
This function is called when the expanded table state changes. If a function is provided, you will be responsible for managing this state on your own. To pass the managed state back to the table, use the tableOptions.state.expanded option.
	14	boolean		TanStack Table Expanding Docs
If true expanded rows will be paginated along with the rest of the table (which means expanded rows may span multiple pages). If false expanded rows will not be considered for pagination (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size)
	15	'first' \| 'last'
No Description Provided... Yet...

Relevant State Options

	#	State Option	Type	Default Value	More Info Links
	1		Record<string, boolean> \| boolean	{}	TanStack Table Expanding Docs
No Description Provided... Yet...

Enable Expanding Sub-Rows

To enable expanding sub-rows, you must first set the enableExpanding prop to true.

However, your data must also be formatted in a way to allow for expanding rows that are in some way related to each other. By default, Material React Table will look for a special subRows property on each row of your data, and treat any array of rows that it finds as the sub-rows for that row. You can customize and override this behavior by passing a custom getSubRows prop.

const data = [
  {
    id: 1,
    name: 'John Doe',
    subRows: [
      {
        id: 2,
        name: 'Jane Doe',
      },
    ],
  },
];

return (
  <MaterialReactTable
    columns={columns}
    data={data}
    enableExpanding
    getSubRows={(originalRow) => originalRow.subRows} //default, can customize
  />
);

Demo

Open Code Sandbox Open on GitHub

	First Name	Last Name	Address	City	State
	Dylan	Murray	261 Erdman Ford	East Daphne	Kentucky
	Raquel	Kohler	769 Dominic Grove	Columbus	Ohio

Source Code

1import React, { FC, useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3
4export type Person = {
5  firstName: string;
6  lastName: string;
7  address: string;
8  city: string;
9  state: string;
10  subRows?: Person[]; //Each person can have sub rows of more people
11};
12
13export const data = [
14  {
15    firstName: 'Dylan',
16    lastName: 'Murray',
17    address: '261 Erdman Ford',
18    city: 'East Daphne',
19    state: 'Kentucky',
20    subRows: [
21      {
22        firstName: 'Ervin',
23        lastName: 'Reinger',
24        address: '566 Brakus Inlet',
25        city: 'South Linda',
26        state: 'West Virginia',
27        subRows: [
28          {
29            firstName: 'Jordane',
30            lastName: 'Homenick',
31            address: '1234 Brakus Inlet',
32            city: 'South Linda',
33            state: 'West Virginia',
34          },
35        ],
36      },
37      {
38        firstName: 'Brittany',
39        lastName: 'McCullough',
40        address: '722 Emie Stream',
41        city: 'Lincoln',
42        state: 'Nebraska',
43      },
44    ],
45  },
46  {
47    firstName: 'Raquel',
48    lastName: 'Kohler',
49    address: '769 Dominic Grove',
50    city: 'Columbus',
51    state: 'Ohio',
52    subRows: [
53      {
54        firstName: 'Branson',
55        lastName: 'Frami',
56        address: '32188 Larkin Turnpike',
57        city: 'Charleston',
58        state: 'South Carolina',
59      },
60    ],
61  },
62];
63
64const Example: FC = () => {
65  const columns = useMemo<MRT_ColumnDef<Person>[]>(
66    //column definitions...
67    () => [
68      {
69        accessorKey: 'firstName',
70        header: 'First Name',
71      },
72      {
73        accessorKey: 'lastName',
74        header: 'Last Name',
75      },
76
77      {
78        accessorKey: 'address',
79        header: 'Address',
80      },
81      {
82        accessorKey: 'city',
83        header: 'City',
84      },
85
86      {
87        accessorKey: 'state',
88        enableColumnOrdering: false,
89        header: 'State',
90      },
91    ],
92    [],
93    
94  );
95
96  return (
97    <MaterialReactTable
98      columns={columns}
99      data={data}
100      enableExpanding
101      enableExpandAll //default
102    />
103  );
104};
105
106export default Example;
107

Expand All Rows Button

By default, Material React Table will show the expand all button in the expand column header. You can disable this by setting the enableExpandAll prop to false.

<MaterialReactTable
  columns={columns}
  data={data}
  enableExpanding
  enableExpandAll={false} //hide expand all button in header
/>

Expanded Rows Pagination Behavior

By default, Material React Table will treat expanded sub-rows the same as any other row when it comes to pagination. This means that some expanded rows may be on the next page. You can change this behavior by setting the paginateExpandedRows prop to false.

<MaterialReactTable
  columns={columns}
  data={data}
  enableExpanding
  paginateExpandedRows={false} //expanded rows will be on the same page as their parent row
/>

Expand All Rows By Default

You can manage the initial state of the expanded rows with the expanded state option in either the initialState or state props.

For example, you may want all rows to be expanded by default. You can simply set the expanded state option to true to do this.

<MaterialReactTable
  columns={columns}
  data={data}
  enableExpanding
  initialState={{ expanded: true }} //all rows expanded by default
/>

Demo

Open Code Sandbox Open on GitHub

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
Brittany	McCullough	722 Emie Stream	Lincoln	Nebraska
Raquel	Kohler	769 Dominic Grove	Columbus	Ohio
Branson	Frami	32188 Larkin Turnpike	Charleston	South Carolina

Source Code

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