Material React Table

1import { useMemo } from 'react';
2import { Box, Stack } from '@mui/material';
3import {
4  MaterialReactTable,
5  useMaterialReactTable,
6  type MRT_ColumnDef,
7} from 'material-react-table';
8import { data, type Person } from './makeData';
9
10const Example = () => {
11  const averageSalary = useMemo(
12    () => data.reduce((acc, curr) => acc + curr.salary, 0) / data.length,
13    [],
14  );
15
16  const maxAge = useMemo(
17    () => data.reduce((acc, curr) => Math.max(acc, curr.age), 0),
18    [],
19  );
20
21  const columns = useMemo<MRT_ColumnDef<Person>[]>(
22    () => [
23      {
24        header: 'First Name',
25        accessorKey: 'firstName',
26        enableGrouping: false, //do not let this column be grouped
27      },
28      {
29        header: 'Last Name',
30        accessorKey: 'lastName',
31      },
32      {
33        header: 'Age',
34        accessorKey: 'age',
35        aggregationFn: 'max', //show the max age in the group (lots of pre-built aggregationFns to choose from)
36        //required to render an aggregated cell
37        AggregatedCell: ({ cell, table }) => (
38          <>
39            Oldest by{' '}
40            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
41            <Box
42              sx={{ color: 'info.main', display: 'inline', fontWeight: 'bold' }}
43            >
44              {cell.getValue<number>()}
45            </Box>
46          </>
47        ),
48        Footer: () => (
49          <Stack>
50            Max Age:
51            <Box color="warning.main">{Math.round(maxAge)}</Box>
52          </Stack>
53        ),
54      },
55      {
56        header: 'Gender',
57        accessorKey: 'gender',
58        //optionally, customize the cell render when this column is grouped. Make the text blue and pluralize the word
59        GroupedCell: ({ cell, row }) => (
60          <Box sx={{ color: 'primary.main' }}>
61            <strong>{cell.getValue<string>()}s </strong> ({row.subRows?.length})
62          </Box>
63        ),
64      },
65      {
66        header: 'State',
67        accessorKey: 'state',
68      },
69      {
70        header: 'Salary',
71        accessorKey: 'salary',
72        aggregationFn: 'mean',
73        //required to render an aggregated cell, show the average salary in the group
74        AggregatedCell: ({ cell, table }) => (
75          <>
76            Average by{' '}
77            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
78            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
79              {cell.getValue<number>()?.toLocaleString?.('en-US', {
80                style: 'currency',
81                currency: 'USD',
82                minimumFractionDigits: 0,
83                maximumFractionDigits: 0,
84              })}
85            </Box>
86          </>
87        ),
88        //customize normal cell render on normal non-aggregated rows
89        Cell: ({ cell }) => (
90          <>
91            {cell.getValue<number>()?.toLocaleString?.('en-US', {
92              style: 'currency',
93              currency: 'USD',
94              minimumFractionDigits: 0,
95              maximumFractionDigits: 0,
96            })}
97          </>
98        ),
99        Footer: () => (
100          <Stack>
101            Average Salary:
102            <Box color="warning.main">
103              {averageSalary?.toLocaleString?.('en-US', {
104                style: 'currency',
105                currency: 'USD',
106                minimumFractionDigits: 0,
107                maximumFractionDigits: 0,
108              })}
109            </Box>
110          </Stack>
111        ),
112      },
113    ],
114    [averageSalary, maxAge],
115  );
116
117  const table = useMaterialReactTable({
118    columns,
119    data,
120    displayColumnDefOptions: {
121      'mrt-row-expand': {
122        enableResizing: true,
123      },
124    },
125    enableColumnResizing: true,
126    enableGrouping: true,
127    enableStickyHeader: true,
128    enableStickyFooter: true,
129    initialState: {
130      density: 'compact',
131      expanded: true, //expand all groups by default
132      grouping: ['state'], //an array of columns to group by by default (can be multiple)
133      pagination: { pageIndex: 0, pageSize: 20 },
134      sorting: [{ id: 'state', desc: false }], //sort by state by default
135    },
136    muiToolbarAlertBannerChipProps: { color: 'primary' },
137    muiTableContainerProps: { sx: { maxHeight: 700 } },
138  });
139
140  return <MaterialReactTable table={table} />;
141};
142
143export default Example;
144