Detail Panel Expanding Feature Guide - Mantine React Table Docs

Detail Panel (Expanding) Feature Guide

Mantine React Table has multiple kinds of expanding features. This guide will show you how to use the detail panel feature to expand a single row to show more information for that row.

If you are looking for how to expand multiple rows from a tree data structure, see the Expanding Sub-Rows guide.

Relevant Table Options

#	Type	More Info Links
1	{ [key: string]: MRT_ColumnDef<TData> }	MRT Display Columns Docs

2	'first' \| 'last'

3	({ row, table }) => ReactNode

Relevant State

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

Render Detail Panel

To add a detail panel to a row, all you need to do is add a renderDetailPanel table option.

The recommended way to access the row data for the detail panel is to pull from the original object on a row. This gives you the original data for the row, not transformed or filtered by TanStack Table.

Using row.getValue('columnId') will not work for data that does not have its own column. Using row.original.columnId is recommended for detail panels since the data in the detail panel usually does not have its own column.

Demo

ID	First Name	Middle Name	Last Name
1	Dylan	Sprouse	Murray

2	Raquel	Hakeem	Kohler

3	Ervin	Kris	Reinger

4	Brittany	Kathryn	McCullough

5	Branson	John	Frami

Rows per page

1-5 of 5

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { Box, Text } from '@mantine/core';
4
import { data, type Person } from './makeData';
5

6
const Example = () => {
7
  const columns = useMemo(
8
    () =>
9
      [
10
        {
11
          accessorKey: 'id',
12
          header: 'ID',
13
          size: 50,
14
        },
15
        {
16
          accessorKey: 'firstName',
17
          header: 'First Name',
18
        },
19
        {
20
          accessorKey: 'middleName',
21
          header: 'Middle Name',
22
        },
23
        {
24
          accessorKey: 'lastName',
25
          header: 'Last Name',
26
        },
27
      ] as MRT_ColumnDef<Person>[],
28
    [],
29
  );
30

31
  return (
32
    <MantineReactTable
33
      columns={columns}
34
      data={data}
35
      renderDetailPanel={({ row }) => (
36
        <Box
37
          sx={{
38
            display: 'grid',
39
            margin: 'auto',
40
            gridTemplateColumns: '1fr 1fr',
41
            width: '100%',
42
          }}
43
        >
44
          <Text>Address: {row.original.address}</Text>
45
          <Text>City: {row.original.city}</Text>
46
          <Text>State: {row.original.state}</Text>
47
          <Text>Country: {row.original.country}</Text>
48
        </Box>
49
      )}
50
    />
51
  );
52
};
53

54
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { Box, Text } from '@mantine/core';
4
import { data } from './makeData';
5

6
const Example = () => {
7
  const columns = useMemo(
8
    () => [
9
      {
10
        accessorKey: 'id',
11
        header: 'ID',
12
        size: 50,
13
      },
14
      {
15
        accessorKey: 'firstName',
16
        header: 'First Name',
17
      },
18
      {
19
        accessorKey: 'middleName',
20
        header: 'Middle Name',
21
      },
22
      {
23
        accessorKey: 'lastName',
24
        header: 'Last Name',
25
      },
26
    ],
27
    [],
28
  );
29

30
  return (
31
    <MantineReactTable
32
      columns={columns}
33
      data={data}
34
      renderDetailPanel={({ row }) => (
35
        <Box
36
          sx={{
37
            display: 'grid',
38
            margin: 'auto',
39
            gridTemplateColumns: '1fr 1fr',
40
            width: '100%',
41
          }}
42
        >
43
          <Text>Address: {row.original.address}</Text>
44
          <Text>City: {row.original.city}</Text>
45
          <Text>State: {row.original.state}</Text>
46
          <Text>Country: {row.original.country}</Text>
47
        </Box>
48
      )}
49
    />
50
  );
51
};
52

53
export default Example;

Expand Detail Panel By Default

If you want some or all rows to be expanded by default, you can specify that in the initialState.expanded table option. Pass true to expand all rows, or specify which rowIds should be expanded.

//expand first 2 rows by default
const table = useMantineReactTable({
  data,
  columns,
  initialState: {
    expanded: {
      1: true,
      2: true,
    },
  },
});

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

Position Expand Column Last

If you want to position the expand column last, you can set the positionExpandColumn table option to 'last'.

Demo

ID	First Name	Middle Name	Last Name
1	Dylan	Sprouse	Murray
Address: 261 Erdman Ford City: East Daphne State: Kentucky Country: United States
2	Raquel	Hakeem	Kohler
Address: 769 Dominic Grove City: Vancouver State: British Columbia Country: Canada
3	Ervin	Kris	Reinger
Address: 566 Brakus Inlet City: South Linda State: West Virginia Country: United States

Rows per page

1-3 of 3

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { Box, Text } from '@mantine/core';
4
import { data, type Person } from './makeData';
5

6
const Example = () => {
7
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8
    () => [
9
      {
10
        accessorKey: 'id',
11
        header: 'ID',
12
        size: 50,
13
      },
14
      {
15
        accessorKey: 'firstName',
16
        header: 'First Name',
17
      },
18
      {
19
        accessorKey: 'middleName',
20
        header: 'Middle Name',
21
      },
22
      {
23
        accessorKey: 'lastName',
24
        header: 'Last Name',
25
      },
26
    ],
27
    [],
28
  );
29

30
  return (
31
    <MantineReactTable
32
      columns={columns}
33
      data={data}
34
      displayColumnDefOptions={{
35
        'mrt-row-expand': {
36
          mantineTableHeadCellProps: {
37
            align: 'right',
38
          },
39
          mantineTableBodyCellProps: {
40
            align: 'right',
41
          },
42
        },
43
      }}
44
      initialState={{ expanded: true }}
45
      renderDetailPanel={({ row }) => (
46
        <Box
47
          sx={{
48
            display: 'grid',
49
            margin: 'auto',
50
            gridTemplateColumns: '1fr 1fr',
51
            width: '100%',
52
          }}
53
        >
54
          <Text>Address: {row.original.address}</Text>
55
          <Text>City: {row.original.city}</Text>
56
          <Text>State: {row.original.state}</Text>
57
          <Text>Country: {row.original.country}</Text>
58
        </Box>
59
      )}
60
      positionExpandColumn="last"
61
    />
62
  );
63
};
64

65
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { Box, Text } from '@mantine/core';
4
import { data } from './makeData';
5

6
const Example = () => {
7
  const columns = useMemo(
8
    () => [
9
      {
10
        accessorKey: 'id',
11
        header: 'ID',
12
        size: 50,
13
      },
14
      {
15
        accessorKey: 'firstName',
16
        header: 'First Name',
17
      },
18
      {
19
        accessorKey: 'middleName',
20
        header: 'Middle Name',
21
      },
22
      {
23
        accessorKey: 'lastName',
24
        header: 'Last Name',
25
      },
26
    ],
27
    [],
28
  );
29

30
  return (
31
    <MantineReactTable
32
      columns={columns}
33
      data={data}
34
      displayColumnDefOptions={{
35
        'mrt-row-expand': {
36
          mantineTableHeadCellProps: {
37
            align: 'right',
38
          },
39
          mantineTableBodyCellProps: {
40
            align: 'right',
41
          },
42
        },
43
      }}
44
      initialState={{ expanded: true }}
45
      renderDetailPanel={({ row }) => (
46
        <Box
47
          sx={{
48
            display: 'grid',
49
            margin: 'auto',
50
            gridTemplateColumns: '1fr 1fr',
51
            width: '100%',
52
          }}
53
        >
54
          <Text>Address: {row.original.address}</Text>
55
          <Text>City: {row.original.city}</Text>
56
          <Text>State: {row.original.state}</Text>
57
          <Text>Country: {row.original.country}</Text>
58
        </Box>
59
      )}
60
      positionExpandColumn="last"
61
    />
62
  );
63
};
64

65
export default Example;

View Extra Storybook Examples