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