Chart Detail Panel Material React Table Example

Material React Table

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.

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 { 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...
16    () => [
17      {
18        accessorKey: 'id',
19        header: 'ID',
20        size: 50,
21      },
22      {
23        accessorKey: 'firstName',
24        header: 'First Name',
25      },
26      {
27        accessorKey: 'middleName',
28        header: 'Middle Name',
29      },
30      {
31        accessorKey: 'lastName',
32        header: 'Last Name',
33      },
34    ],
35    [],
36    
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