Material React Table

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { MenuItem } from '@mui/material';
8import { data, type Person } from './makeData';
9
10const Example = () => {
11  const columns = useMemo<MRT_ColumnDef<Person>[]>(
12    () => [
13      {
14        accessorKey: 'id',
15        enableColumnFilterModes: false, //disable changing filter mode for this column
16        filterFn: 'equals', //set filter mode to equals
17        header: 'ID',
18      },
19      {
20        accessorKey: 'firstName', //normal, all filter modes are enabled
21        header: 'First Name',
22      },
23      {
24        accessorKey: 'middleName',
25        enableColumnFilterModes: false, //disable changing filter mode for this column
26        filterFn: 'startsWith', //even though changing the mode is disabled, you can still set the default filter mode
27        header: 'Middle Name',
28      },
29      {
30        accessorKey: 'lastName',
31        header: 'Last Name',
32        //if you do not want to use the default filter modes, you can provide your own and render your own menu
33        renderColumnFilterModeMenuItems: ({ onSelectFilterMode }) => [
34          <MenuItem key="0" onClick={() => onSelectFilterMode('contains')}>
35            <div>Contains</div>
36          </MenuItem>,
37          <MenuItem
38            key="1"
39            onClick={() => onSelectFilterMode('customFilterFn')}
40          >
41            <div>Custom Filter Fn</div>
42          </MenuItem>,
43        ],
44      },
45      {
46        accessorKey: 'age',
47        columnFilterModeOptions: ['between', 'greaterThan', 'lessThan'], //only allow these filter modes
48        filterFn: 'between',
49        header: 'Age',
50      },
51    ],
52    [],
53  );
54
55  const table = useMaterialReactTable({
56    columns,
57    data,
58    enableColumnFilterModes: true, //enable changing filter mode for all columns unless explicitly disabled in a column def
59    initialState: { showColumnFilters: true }, //show filters by default
60    filterFns: {
61      customFilterFn: (row, id, filterValue) => {
62        return row.getValue(id) === filterValue;
63      },
64    },
65    localization: {
66      filterCustomFilterFn: 'Custom Filter Fn',
67    } as any,
68  });
69
70  return <MaterialReactTable table={table} />;
71};
72
73export default Example;
74