Material React Table

1import { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { citiesList, data, type Person, usStateList } from './makeData';
4
5const Example = () => {
6  const columns = useMemo<MRT_ColumnDef<Person>[]>(
7    () => [
8      {
9        header: 'Status',
10        accessorFn: (originalRow) => (originalRow.isActive ? 'true' : 'false'), //must be strings
11        id: 'isActive',
12        filterVariant: 'checkbox',
13        Cell: ({ cell }) =>
14          cell.getValue() === 'true' ? 'Active' : 'Inactive',
15        size: 170,
16      },
17      {
18        accessorKey: 'name',
19        header: 'Name',
20        filterVariant: 'text', // default
21        size: 200,
22      },
23      {
24        accessorKey: 'salary',
25        header: 'Salary',
26        Cell: ({ cell }) =>
27          cell.getValue<number>().toLocaleString('en-US', {
28            style: 'currency',
29            currency: 'USD',
30          }),
31        filterVariant: 'range-slider',
32        filterFn: 'betweenInclusive', // default (or between)
33        muiFilterSliderProps: {
34          marks: true,
35          max: 200_000, //custom max (as opposed to faceted max)
36          min: 30_000, //custom min (as opposed to faceted min)
37          step: 10_000,
38          valueLabelFormat: (value) =>
39            value.toLocaleString('en-US', {
40              style: 'currency',
41              currency: 'USD',
42            }),
43        },
44      },
45      {
46        accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
47        id: 'hireDate',
48        header: 'Hire Date',
49        filterVariant: 'date-range',
50        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
51      },
52      {
53        accessorKey: 'age',
54        header: 'Age',
55        filterVariant: 'range',
56        filterFn: 'between',
57        size: 80,
58      },
59      {
60        accessorKey: 'city',
61        header: 'City',
62        filterVariant: 'select',
63        filterSelectOptions: citiesList, //custom options list (as opposed to faceted list)
64      },
65      {
66        accessorKey: 'state',
67        header: 'State',
68        filterVariant: 'multi-select',
69        filterSelectOptions: usStateList, //custom options list (as opposed to faceted list)
70      },
71    ],
72    [],
73  );
74
75  return (
76    <MaterialReactTable
77      columns={columns}
78      data={data}
79      initialState={{ showColumnFilters: true }}
80    />
81  );
82};
83
84//Date Picker Imports - these should just be in your Context Provider
85import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
86import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
87
88const ExampleWithLocalizationProvider = () => (
89  //App.tsx or AppProviders file
90  <LocalizationProvider dateAdapter={AdapterDayjs}>
91    <Example />
92  </LocalizationProvider>
93);
94
95export default ExampleWithLocalizationProvider;
96