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