Material React Table

1import { useMemo, useState } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6  type MRT_Row,
7  MRT_ExpandAllButton,
8} from 'material-react-table';
9import { data, type Person } from './makeData';
10import { Box, Stack } from '@mui/material';
11
12const Example = () => {
13  const columns = useMemo<MRT_ColumnDef<Person>[]>(
14    //column definitions...
15    () => [
16      {
17        header: 'First Name',
18        accessorKey: 'firstName',
19      },
20      {
21        header: 'Last Name',
22        accessorKey: 'lastName',
23      },
24      {
25        header: 'Age',
26        accessorKey: 'age',
27      },
28      {
29        header: 'Gender',
30        accessorKey: 'gender',
31      },
32      {
33        header: 'State',
34        accessorKey: 'state',
35      },
36      {
37        header: 'Salary',
38        accessorKey: 'salary',
39      },
40    ],
41    [],
42    
43  );
44
45  const table = useMaterialReactTable({
46    columns,
47    data,
48    displayColumnDefOptions: {
49      'mrt-row-expand': {
50        Header: () => (
51          <Stack direction="row" alignItems="center">
52            <MRT_ExpandAllButton table={table} />
53            <Box>Groups</Box>
54          </Stack>
55        ),
56        GroupedCell: ({ row, table }) => {
57          const { grouping } = table.getState();
58          return row.getValue(grouping[grouping.length - 1]);
59        },
60        enableResizing: true,
61        muiTableBodyCellProps: ({ row }) => ({
62          sx: (theme) => ({
63            color:
64              row.depth === 0
65                ? theme.palette.primary.main
66                : row.depth === 1
67                  ? theme.palette.secondary.main
68                  : undefined,
69          }),
70        }),
71        size: 200,
72      },
73    },
74    enableGrouping: true,
75    enableColumnResizing: true,
76    groupedColumnMode: 'remove',
77    initialState: {
78      density: 'compact',
79      expanded: true, //expand all groups by default
80      grouping: ['state', 'gender'], //an array of columns to group by by default (can be multiple)
81      pagination: { pageIndex: 0, pageSize: 20 },
82      sorting: [{ id: 'state', desc: false }],
83    },
84  });
85
86  return <MaterialReactTable table={table} />;
87};
88
89export default Example;
90