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        accessorKey: 'age',
51        header: 'Age',
52        filterVariant: 'range',
53        filterFn: 'between',
54        size: 80,
55      },
56      {
57        accessorKey: 'city',
58        header: 'City',
59        filterVariant: 'select',
60        filterSelectOptions: citiesList, //custom options list (as opposed to faceted list)
61      },
62      {
63        accessorKey: 'state',
64        header: 'State',
65        filterVariant: 'multi-select',
66        filterSelectOptions: usStateList, //custom options list (as opposed to faceted list)
67      },
68      {
69        accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
70        id: 'hireDate',
71        header: 'Hire Date',
72        filterVariant: 'date-range',
73        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
74      },
75      {
76        accessorFn: (originalRow) => new Date(originalRow.arrivalTime), //convert to date for sorting and filtering
77        id: 'arrivalTime',
78        header: 'Arrival Time',
79        filterVariant: 'datetime-range',
80        Cell: ({ cell }) =>
81          `${cell.getValue<Date>().toLocaleDateString()} ${cell
82            .getValue<Date>()
83            .toLocaleTimeString()}`, // convert back to string for display
84      },
85      {
86        accessorFn: (originalRow) => new Date(originalRow.departureTime), //convert to date for sorting and filtering
87        id: 'departureTime',
88        header: 'Departure Time',
89        filterVariant: 'time-range',
90        Cell: ({ cell }) => cell.getValue<Date>().toLocaleTimeString(), // convert back to string for display
91      },
92    ],
93    [],
94  );
95
96  const table = useMaterialReactTable({
97    columns,
98    data,
99    initialState: { showColumnFilters: true },
100  });
101
102  return <MaterialReactTable table={table} />;
103};
104
105//Date Picker Imports - these should just be in your Context Provider
106import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
107import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
108
109const ExampleWithLocalizationProvider = () => (
110  //App.tsx or AppProviders file
111  <LocalizationProvider dateAdapter={AdapterDayjs}>
112    <Example />
113  </LocalizationProvider>
114);
115
116export default ExampleWithLocalizationProvider;
117