Detail Panel Material React Table Example

Material 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.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

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

This example is written for MRT V2.

If your app is still using MRT V1, either Upgrade to MRT V2 or use the V1 Docs instead. (useMaterialReactTable only exists in V2)

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<MRT_ColumnDef<Person>[]>(
12    //column definitions...
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    ],
32    [],
33    
34  );
35
36  const table = useMaterialReactTable({
37    columns,
38    data,
39    enableExpandAll: false, //disable expand all button
40    muiDetailPanelProps: () => ({
41      sx: (theme) => ({
42        backgroundColor:
43          theme.palette.mode === 'dark'
44            ? 'rgba(255,210,244,0.1)'
45            : 'rgba(0,0,0,0.1)',
46      }),
47    }),
48    //custom expand button rotation
49    muiExpandButtonProps: ({ row, table }) => ({
50      onClick: () => table.setExpanded({ [row.id]: !row.getIsExpanded() }), //only 1 detail panel open at a time
51      sx: {
52        transform: row.getIsExpanded() ? 'rotate(180deg)' : 'rotate(-90deg)',
53        transition: 'transform 0.2s',
54      },
55    }),
56    //conditionally render detail panel
57    renderDetailPanel: ({ row }) =>
58      row.original.address ? (
59        <Box
60          sx={{
61            display: 'grid',
62            margin: 'auto',
63            gridTemplateColumns: '1fr 1fr',
64            width: '100%',
65          }}
66        >
67          <Typography>Address: {row.original.address}</Typography>
68          <Typography>City: {row.original.city}</Typography>
69          <Typography>State: {row.original.state}</Typography>
70          <Typography>Country: {row.original.country}</Typography>
71        </Box>
72      ) : null,
73  });
74
75  return <MaterialReactTable table={table} />;
76};
77
78export default Example;
79

View Extra Storybook Examples