MRT logoMaterial React Table

Legacy V2 Docs

Chart Detail Panel Example

The detail panel features can be used for a variety of purposes. In this example, we are integrating the new MUI X Charts library to display an expandable line chart for each row.

You could, of course, use any charting library that you prefer, but using MUI X Charts will give you a consistent look and feel with Material React Table and any other Material UI components you may be using.

Lazy Sub-Rows
Lazy Detail Panel
Editing Sub-Rows
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 { useTheme } from '@mui/material';
8import { LineChart } from '@mui/x-charts/LineChart';
9import { data, type Person } from './makeData';
10
11const Example = () => {
12 const theme = useTheme();
13
14 const columns = useMemo<MRT_ColumnDef<Person>[]>(
15 //column definitions...
37 );
38
39 const table = useMaterialReactTable({
40 columns,
41 data,
42 initialState: { expanded: { 0: true } },
43 muiTableBodyRowProps: {
44 sx: {
45 '.Mui-TableBodyCell-DetailPanel': {
46 backgroundColor:
47 theme.palette.mode === 'dark'
48 ? theme.palette.grey[900]
49 : theme.palette.grey[100],
50 },
51 },
52 },
53 renderDetailPanel: ({ row }) => (
54 <LineChart
55 xAxis={[
56 {
57 data: row.original.gamesPlayed,
58 label: 'Games Played',
59 valueFormatter: (value) => `#${value}`,
60 tickLabelInterval: (value) => value % 1 === 0,
61 },
62 ]}
63 yAxis={[{ min: 0, max: 60 }]}
64 series={[
65 {
66 color: theme.palette.primary.dark,
67 data: row.original.points,
68 label: 'Points',
69 },
70 {
71 color: theme.palette.secondary.main,
72 data: row.original.assists,
73 label: 'Assists',
74 },
75 {
76 color: theme.palette.error.main,
77 data: row.original.turnovers,
78 label: 'Turnovers',
79 },
80 ]}
81 height={250}
82 />
83 ),
84 });
85
86 return <MaterialReactTable table={table} />;
87};
88
89export default Example;
90

View Extra Storybook Examples