Material React Table

1import { useMemo, useState } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8import {
9  FormControl,
10  FormControlLabel,
11  FormLabel,
12  Radio,
13  RadioGroup,
14  Stack,
15} from '@mui/material';
16
17const Example = () => {
18  const columns = useMemo<MRT_ColumnDef<Person>[]>(
19    //column definitions...
20    () => [
21      {
22        header: 'First Name',
23        accessorKey: 'firstName',
24      },
25      {
26        header: 'Last Name',
27        accessorKey: 'lastName',
28      },
29      {
30        header: 'Age',
31        accessorKey: 'age',
32      },
33      {
34        header: 'Gender',
35        accessorKey: 'gender',
36      },
37      {
38        header: 'State',
39        accessorKey: 'state',
40      },
41      {
42        header: 'Salary',
43        accessorKey: 'salary',
44      },
45    ],
46    [],
47    
48  );
49
50  //demo state
51  const [groupedColumnMode, setGroupedColumnMode] = useState<
52    false | 'remove' | 'reorder'
53  >('reorder'); //default is 'reorder
54
55  const table = useMaterialReactTable({
56    columns,
57    data,
58    enableGrouping: true,
59    groupedColumnMode,
60    initialState: {
61      expanded: true, //expand all groups by default
62      grouping: ['state', 'gender'], //an array of columns to group by by default (can be multiple)
63      pagination: { pageIndex: 0, pageSize: 20 },
64    },
65    muiTableContainerProps: { sx: { maxHeight: '800px' } },
66  });
67
68  return (
69    <Stack gap="1rem">
70      <DemoRadioGroup
71        groupedColumnMode={groupedColumnMode}
72        setGroupedColumnMode={setGroupedColumnMode}
73      />
74      <MaterialReactTable table={table} />
75    </Stack>
76  );
77};
78
79export default Example;
80
81//demo...
82const DemoRadioGroup = ({
83  groupedColumnMode,
84  setGroupedColumnMode,
85}: {
86  groupedColumnMode: false | 'remove' | 'reorder';
87  setGroupedColumnMode: (
88    groupedColumnMode: false | 'remove' | 'reorder',
89  ) => void;
90}) => {
91  return (
92    <FormControl sx={{ margin: 'auto', textAlign: 'center' }}>
93      <FormLabel>Grouped Column Mode</FormLabel>
94      <RadioGroup
95        row
96        value={groupedColumnMode}
97        onChange={(event) =>
98          setGroupedColumnMode(
99            event.target.value === 'false'
100              ? false
101              : (event.target.value as any),
102          )
103        }
104      >
105        <FormControlLabel
106          control={<Radio />}
107          label='"reorder" (default)'
108          value="reorder"
109        />
110        <FormControlLabel control={<Radio />} label='"remove"' value="remove" />
111        <FormControlLabel value={false} control={<Radio />} label="false" />
112      </RadioGroup>
113    </FormControl>
114  );
115};
116
117

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