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 renderDetailPanel option 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 {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { Box, Typography } from '@mui/material';
8import { data, type Person } from './makeData';
9

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

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

55  return <MaterialReactTable table={table} />;
56};
57

58export default Example;
59

View Extra Storybook Examples