Expanding Sub-Rows/Tree Data Feature Guide

Expanding Sub-Rows (Tree Data) Feature Guide

Mantine 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 Table Options

#	Type	Default Value	More Info Links
1	boolean		TanStack Table Expanding Docs

2	Array<TData>		Usage Docs

3	boolean	true	MRT Expanding Sub Rows Docs

4	boolean		MRT Expanding Sub Rows Docs

5	(dataRow: TData) => TData[]

6	boolean	false	TanStack Filtering Docs

7	() => MRT_RowModel<TData>

8	(row: Row<TData>) => boolean		TanStack Table Expanding Docs

9	(row: Row<TData>) => boolean		TanStack Table Expanding Docs

10	(originalRow: TData, index: number) => undefined \| TData[]		TanStack Table Core Table Docs

11	ActionIconProps \| ({ table }) => ActionIconProps		Mantine ActionIcon Docs

12	ActionIconProps \| ({ row, table }) => ActionIconProps		Mantine ActionIcon Docs

13	boolean		TanStack Table Expanding Docs

14	number	100	TanStack Table Filtering Docs

15	OnChangeFn<ExpandedState>		TanStack Table Expanding Docs

16	boolean		TanStack Table Expanding Docs

17	'first' \| 'last'

Relevant State Options

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

Enable Expanding Sub-Rows

To enable expanding sub-rows, you must first set the enableExpanding table option 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, Mantine 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 or override this behavior by passing a custom getSubRows table option.

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

const table = useMantineReactTable({
  columns,
  data,
  enableExpanding: true,
  getSubRows: (originalRow) => originalRow.subRows, //default, can customize
});

return <MantineReactTable table={table} />;

Demo

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

Rows per page

1-2 of 2

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3

4
export 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

13
export 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

64
const Example = () => {
65
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
66
    () => [
67
      {
68
        accessorKey: 'firstName',
69
        header: 'First Name',
70
      },
71
      {
72
        accessorKey: 'lastName',
73
        header: 'Last Name',
74
      },
75

76
      {
77
        accessorKey: 'address',
78
        header: 'Address',
79
      },
80
      {
81
        accessorKey: 'city',
82
        header: 'City',
83
      },
84

85
      {
86
        accessorKey: 'state',
87
        enableColumnOrdering: false,
88
        header: 'State',
89
      },
90
    ],
91
    [],
92
  );
93

94
  return (
95
    <MantineReactTable
96
      columns={columns}
97
      data={data}
98
      enableExpanding
99
      enableExpandAll //default
100
    />
101
  );
102
};
103

104
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3

4
export const data = [
5
  {
6
    firstName: 'Dylan',
7
    lastName: 'Murray',
8
    address: '261 Erdman Ford',
9
    city: 'East Daphne',
10
    state: 'Kentucky',
11
    subRows: [
12
      {
13
        firstName: 'Ervin',
14
        lastName: 'Reinger',
15
        address: '566 Brakus Inlet',
16
        city: 'South Linda',
17
        state: 'West Virginia',
18
        subRows: [
19
          {
20
            firstName: 'Jordane',
21
            lastName: 'Homenick',
22
            address: '1234 Brakus Inlet',
23
            city: 'South Linda',
24
            state: 'West Virginia',
25
          },
26
        ],
27
      },
28
      {
29
        firstName: 'Brittany',
30
        lastName: 'McCullough',
31
        address: '722 Emie Stream',
32
        city: 'Lincoln',
33
        state: 'Nebraska',
34
      },
35
    ],
36
  },
37
  {
38
    firstName: 'Raquel',
39
    lastName: 'Kohler',
40
    address: '769 Dominic Grove',
41
    city: 'Columbus',
42
    state: 'Ohio',
43
    subRows: [
44
      {
45
        firstName: 'Branson',
46
        lastName: 'Frami',
47
        address: '32188 Larkin Turnpike',
48
        city: 'Charleston',
49
        state: 'South Carolina',
50
      },
51
    ],
52
  },
53
];
54

55
const Example = () => {
56
  const columns = useMemo(
57
    () => [
58
      {
59
        accessorKey: 'firstName',
60
        header: 'First Name',
61
      },
62
      {
63
        accessorKey: 'lastName',
64
        header: 'Last Name',
65
      },
66

67
      {
68
        accessorKey: 'address',
69
        header: 'Address',
70
      },
71
      {
72
        accessorKey: 'city',
73
        header: 'City',
74
      },
75

76
      {
77
        accessorKey: 'state',
78
        enableColumnOrdering: false,
79
        header: 'State',
80
      },
81
    ],
82
    [],
83
  );
84

85
  return (
86
    <MantineReactTable
87
      columns={columns}
88
      data={data}
89
      enableExpanding
90
      enableExpandAll //default
91
    />
92
  );
93
};
94

95
export default Example;

Expand All Rows Button

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

const table = useMantineReactTable({
  columns,
  data,
  enableExpanding: true,
  enableExpandAll: false, //hide expand all button in header
});

Expanded Rows Pagination Behavior

By default, Mantine 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 table option to false.

const table = useMantineReactTable({
  columns,
  data,
  enableExpanding: true,
  paginateExpandedRows: false, //expanded rows will be on the same page as their parent row
});

Expanded Leaf Row Filtering Behavior

If you are using the filtering features alongside sub-row features, then there are a few behaviors and customizations you should be aware of.

Filter From Leaf Rows

By default, filtering is done from parent rows down (so if a parent row is filtered out, all of its children will be filtered out as well). Setting the filterFromLeafRows table option to true will cause filtering to be done from leaf rows up (which means parent rows will be kept so long as one of their child, or grand-child, etc. rows pass the filtering).

const table = useMantineReactTable({
  columns,
  data,
  enableExpanding: true,
  filterFromLeafRows: true, //search for child rows and preserve parent rows
});

Max Leaf Row Filter Depth

By default, filtering is done for all rows (max depth of 100), no matter if they are root level parent rows or the child leaf rows of a parent row. Setting the maxLeafRowFilterDepth table option to 0 will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to 1 will cause filtering to only be applied to child leaf rows 1 level deep, and so on.

This is useful for situations where you want a row's entire child hierarchy to be visible, regardless of the applied filter.

const table = useMantineReactTable({
  columns,
  data,
  enableExpanding: true,
  maxLeafRowFilterDepth: 0, //When filtering root rows, keep all child rows of the passing parent rows
});

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 table options.

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

const table = useMantineReactTable({
  columns,
  data,
  enableExpanding: true,
  initialState: { expanded: true }, //all rows expanded by default
});

Demo

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

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3

4
export 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

13
export const data: Person[] = [
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
            firstName: 'Jordan',
37
            lastName: 'Clarkson',
38
            address: '4882 Palm Rd',
39
            city: 'San Francisco',
40
            state: 'California',
41
          },
42
        ],
43
      },
44
      {
45
        firstName: 'Brittany',
46
        lastName: 'McCullough',
47
        address: '722 Emie Stream',
48
        city: 'Lincoln',
49
        state: 'Nebraska',
50
      },
51
    ],
52
  },
53
  {
54
    firstName: 'Raquel',
55
    lastName: 'Kohler',
56
    address: '769 Dominic Grove',
57
    city: 'Columbus',
58
    state: 'Ohio',
59
    subRows: [
60
      {
61
        firstName: 'Branson',
62
        lastName: 'Frami',
63
        address: '32188 Larkin Turnpike',
64
        city: 'Charleston',
65
        state: 'South Carolina',
66
      },
67
    ],
68
  },
69
];
70

71
const Example = () => {
72
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
73
    () => [
74
      {
75
        accessorKey: 'firstName',
76
        header: 'First Name',
77
      },
78
      {
79
        accessorKey: 'lastName',
80
        header: 'Last Name',
81
      },
82

83
      {
84
        accessorKey: 'address',
85
        header: 'Address',
86
      },
87
      {
88
        accessorKey: 'city',
89
        header: 'City',
90
      },
91

92
      {
93
        accessorKey: 'state',
94
        enableColumnOrdering: false,
95
        header: 'State',
96
      },
97
    ],
98
    [],
99
  );
100

101
  return (
102
    <MantineReactTable
103
      columns={columns}
104
      data={data}
105
      enableExpandAll={false} //hide expand all double arrow in column header
106
      enableExpanding
107
      filterFromLeafRows //apply filtering to all rows instead of just parent rows
108
      initialState={{ expanded: true }} //expand all rows by default
109
      paginateExpandedRows={false} //When rows are expanded, do not count sub-rows as number of rows on the page towards pagination
110
    />
111
  );
112
};
113

114
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3

4
export const data = [
5
  {
6
    firstName: 'Dylan',
7
    lastName: 'Murray',
8
    address: '261 Erdman Ford',
9
    city: 'East Daphne',
10
    state: 'Kentucky',
11
    subRows: [
12
      {
13
        firstName: 'Ervin',
14
        lastName: 'Reinger',
15
        address: '566 Brakus Inlet',
16
        city: 'South Linda',
17
        state: 'West Virginia',
18
        subRows: [
19
          {
20
            firstName: 'Jordane',
21
            lastName: 'Homenick',
22
            address: '1234 Brakus Inlet',
23
            city: 'South Linda',
24
            state: 'West Virginia',
25
          },
26
          {
27
            firstName: 'Jordan',
28
            lastName: 'Clarkson',
29
            address: '4882 Palm Rd',
30
            city: 'San Francisco',
31
            state: 'California',
32
          },
33
        ],
34
      },
35
      {
36
        firstName: 'Brittany',
37
        lastName: 'McCullough',
38
        address: '722 Emie Stream',
39
        city: 'Lincoln',
40
        state: 'Nebraska',
41
      },
42
    ],
43
  },
44
  {
45
    firstName: 'Raquel',
46
    lastName: 'Kohler',
47
    address: '769 Dominic Grove',
48
    city: 'Columbus',
49
    state: 'Ohio',
50
    subRows: [
51
      {
52
        firstName: 'Branson',
53
        lastName: 'Frami',
54
        address: '32188 Larkin Turnpike',
55
        city: 'Charleston',
56
        state: 'South Carolina',
57
      },
58
    ],
59
  },
60
];
61

62
const Example = () => {
63
  const columns = useMemo(
64
    () => [
65
      {
66
        accessorKey: 'firstName',
67
        header: 'First Name',
68
      },
69
      {
70
        accessorKey: 'lastName',
71
        header: 'Last Name',
72
      },
73

74
      {
75
        accessorKey: 'address',
76
        header: 'Address',
77
      },
78
      {
79
        accessorKey: 'city',
80
        header: 'City',
81
      },
82

83
      {
84
        accessorKey: 'state',
85
        enableColumnOrdering: false,
86
        header: 'State',
87
      },
88
    ],
89
    [],
90
  );
91

92
  return (
93
    <MantineReactTable
94
      columns={columns}
95
      data={data}
96
      enableExpandAll={false} //hide expand all double arrow in column header
97
      enableExpanding
98
      filterFromLeafRows //apply filtering to all rows instead of just parent rows
99
      initialState={{ expanded: true }} //expand all rows by default
100
      paginateExpandedRows={false} //When rows are expanded, do not count sub-rows as number of rows on the page towards pagination
101
    />
102
  );
103
};
104

105
export default Example;

Expand Root Rows Only By Default

Here is a slightly more complex initial expanded state example where all the root rows are expanded by default, but none of the sub rows themselves are expanded by default. We just need to find all of the root row ids and set their key in the expanded initialState option to true.

Demo

First Name	Last Name	Address	City	State
Dylan	Murray	261 Erdman Ford	East Daphne	Kentucky
Ervin	Reinger	566 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

Rows per page

1-5 of 5

1
import { useMemo } from 'react';
2
import {
3
  MantineReactTable,
4
  type MRT_ExpandedState,
5
  type MRT_ColumnDef,
6
} from 'mantine-react-table';
7
import { Button } from '@mantine/core';
8

9
export type Person = {
10
  id: string;
11
  firstName: string;
12
  lastName: string;
13
  address: string;
14
  city: string;
15
  state: string;
16
  subRows?: Person[]; //Each person can have sub rows of more people
17
};
18

19
export const data: Person[] = [
20
  {
21
    id: '1',
22
    firstName: 'Dylan',
23
    lastName: 'Murray',
24
    address: '261 Erdman Ford',
25
    city: 'East Daphne',
26
    state: 'Kentucky',
27
    subRows: [
28
      {
29
        id: '2',
30
        firstName: 'Ervin',
31
        lastName: 'Reinger',
32
        address: '566 Brakus Inlet',
33
        city: 'South Linda',
34
        state: 'West Virginia',
35
        subRows: [
36
          {
37
            id: '3',
38
            firstName: 'Jordane',
39
            lastName: 'Homenick',
40
            address: '1234 Brakus Inlet',
41
            city: 'South Linda',
42
            state: 'West Virginia',
43
          },
44
          {
45
            id: '4',
46
            firstName: 'Jordan',
47
            lastName: 'Clarkson',
48
            address: '4882 Palm Rd',
49
            city: 'San Francisco',
50
            state: 'California',
51
          },
52
        ],
53
      },
54
      {
55
        id: '5',
56
        firstName: 'Brittany',
57
        lastName: 'McCullough',
58
        address: '722 Emie Stream',
59
        city: 'Lincoln',
60
        state: 'Nebraska',
61
      },
62
    ],
63
  },
64
  {
65
    id: '6',
66
    firstName: 'Raquel',
67
    lastName: 'Kohler',
68
    address: '769 Dominic Grove',
69
    city: 'Columbus',
70
    state: 'Ohio',
71
    subRows: [
72
      {
73
        id: '7',
74
        firstName: 'Branson',
75
        lastName: 'Frami',
76
        address: '32188 Larkin Turnpike',
77
        city: 'Charleston',
78
        state: 'South Carolina',
79
        subRows: [
80
          {
81
            id: '8',
82
            firstName: 'Henry',
83
            lastName: 'Ford',
84
            address: '1234 Brakus Inlet',
85
            city: 'Nashville',
86
            state: 'Tennessee',
87
          },
88
        ],
89
      },
90
    ],
91
  },
92
];
93

94
const Example = () => {
95
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
96
    () => [
97
      {
98
        accessorKey: 'firstName',
99
        header: 'First Name',
100
      },
101
      {
102
        accessorKey: 'lastName',
103
        header: 'Last Name',
104
      },
105

106
      {
107
        accessorKey: 'address',
108
        header: 'Address',
109
      },
110
      {
111
        accessorKey: 'city',
112
        header: 'City',
113
      },
114

115
      {
116
        accessorKey: 'state',
117
        enableColumnOrdering: false,
118
        header: 'State',
119
      },
120
    ],
121
    [],
122
  );
123

124
  const initialExpandedRootRows = useMemo<MRT_ExpandedState>(
125
    () =>
126
      data
127
        .map((originalRow) => originalRow.id) //get all the root row ids, use recursion for additional levels
128
        .reduce((a, v) => ({ ...a, [v]: true }), {}), //convert to an object with all the ids as keys and `true` as values
129
    [],
130
  );
131

132
  return (
133
    <MantineReactTable
134
      columns={columns}
135
      data={data}
136
      enableExpanding
137
      getRowId={(originalRow) => originalRow.id}
138
      initialState={{ expanded: initialExpandedRootRows }} //only expand the root rows by default
139
      renderTopToolbarCustomActions={({ table }) => (
140
        <Button onClick={() => table.resetExpanded()}>Reset Expanded</Button>
141
      )}
142
    />
143
  );
144
};
145

146
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { Button } from '@mantine/core';
4

5
export const data = [
6
  {
7
    id: '1',
8
    firstName: 'Dylan',
9
    lastName: 'Murray',
10
    address: '261 Erdman Ford',
11
    city: 'East Daphne',
12
    state: 'Kentucky',
13
    subRows: [
14
      {
15
        id: '2',
16
        firstName: 'Ervin',
17
        lastName: 'Reinger',
18
        address: '566 Brakus Inlet',
19
        city: 'South Linda',
20
        state: 'West Virginia',
21
        subRows: [
22
          {
23
            id: '3',
24
            firstName: 'Jordane',
25
            lastName: 'Homenick',
26
            address: '1234 Brakus Inlet',
27
            city: 'South Linda',
28
            state: 'West Virginia',
29
          },
30
          {
31
            id: '4',
32
            firstName: 'Jordan',
33
            lastName: 'Clarkson',
34
            address: '4882 Palm Rd',
35
            city: 'San Francisco',
36
            state: 'California',
37
          },
38
        ],
39
      },
40
      {
41
        id: '5',
42
        firstName: 'Brittany',
43
        lastName: 'McCullough',
44
        address: '722 Emie Stream',
45
        city: 'Lincoln',
46
        state: 'Nebraska',
47
      },
48
    ],
49
  },
50
  {
51
    id: '6',
52
    firstName: 'Raquel',
53
    lastName: 'Kohler',
54
    address: '769 Dominic Grove',
55
    city: 'Columbus',
56
    state: 'Ohio',
57
    subRows: [
58
      {
59
        id: '7',
60
        firstName: 'Branson',
61
        lastName: 'Frami',
62
        address: '32188 Larkin Turnpike',
63
        city: 'Charleston',
64
        state: 'South Carolina',
65
        subRows: [
66
          {
67
            id: '8',
68
            firstName: 'Henry',
69
            lastName: 'Ford',
70
            address: '1234 Brakus Inlet',
71
            city: 'Nashville',
72
            state: 'Tennessee',
73
          },
74
        ],
75
      },
76
    ],
77
  },
78
];
79

80
const Example = () => {
81
  const columns = useMemo(
82
    () => [
83
      {
84
        accessorKey: 'firstName',
85
        header: 'First Name',
86
      },
87
      {
88
        accessorKey: 'lastName',
89
        header: 'Last Name',
90
      },
91

92
      {
93
        accessorKey: 'address',
94
        header: 'Address',
95
      },
96
      {
97
        accessorKey: 'city',
98
        header: 'City',
99
      },
100

101
      {
102
        accessorKey: 'state',
103
        enableColumnOrdering: false,
104
        header: 'State',
105
      },
106
    ],
107
    [],
108
  );
109

110
  const initialExpandedRootRows = useMemo(
111
    () =>
112
      data
113
        .map((originalRow) => originalRow.id) //get all the root row ids, use recursion for additional levels
114
        .reduce((a, v) => ({ ...a, [v]: true }), {}), //convert to an object with all the ids as keys and `true` as values
115
    [],
116
  );
117

118
  return (
119
    <MantineReactTable
120
      columns={columns}
121
      data={data}
122
      enableExpanding
123
      getRowId={(originalRow) => originalRow.id}
124
      initialState={{ expanded: initialExpandedRootRows }} //only expand the root rows by default
125
      renderTopToolbarCustomActions={({ table }) => (
126
        <Button onClick={() => table.resetExpanded()}>Reset Expanded</Button>
127
      )}
128
    />
129
  );
130
};
131

132
export default Example;