Material React Table

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