MRT logoMaterial React Table

Detail Panel Example

Material React Table has multiple types of "expanding" row features. In its simplest form, you can use the detailPanel prop to render a component when a row is clicked. This is useful for showing additional information about a row, such as a list of nested data. Learn more in the Detail Panel Feature Guide.

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
ID
First Name
Middle Name
Last Name
1DylanSprouseMurray
2RaquelHakeemKohler
3ErvinKrisReinger
4BrittanyKathrynMcCullough
5BransonJohnFrami

1-5 of 5

Source Code 

1import { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { Box, Typography } from '@mui/material';
4import { data, type Person } from './makeData';
5

6const 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    <MaterialReactTable
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          <Typography>Address: {row.original.address}</Typography>
45          <Typography>City: {row.original.city}</Typography>
46          <Typography>State: {row.original.state}</Typography>
47          <Typography>Country: {row.original.country}</Typography>
48        </Box>
49      )}
50    />
51  );
52};
53

54export default Example;
55

View Extra Storybook Examples