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

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8
9const Example = () => {
10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
11    () => [
12      {
13        accessorKey: 'name',
14        header: 'Name',
15        filterVariant: 'autocomplete', // default
16        size: 100,
17      },
18      {
19        accessorKey: 'salary',
20        header: 'Salary',
21        Cell: ({ cell }) =>
22          cell.getValue<number>().toLocaleString('en-US', {
23            style: 'currency',
24            currency: 'USD',
25          }),
26        filterVariant: 'range-slider',
27        filterFn: 'betweenInclusive', // default (or between)
28        muiFilterSliderProps: {
29          //no need to specify min/max/step if using faceted values
30          marks: true,
31          step: 5_000,
32          valueLabelFormat: (value) =>
33            value.toLocaleString('en-US', {
34              style: 'currency',
35              currency: 'USD',
36            }),
37        },
38      },
39      {
40        accessorKey: 'city',
41        header: 'City',
42        filterVariant: 'select',
43        //no need to specify filterSelectOptions if using faceted values
44      },
45      {
46        accessorKey: 'state',
47        header: 'State',
48        filterVariant: 'multi-select',
49        //no need to specify filterSelectOptions if using faceted values
50      },
51    ],
52    [],
53  );
54
55  const table = useMaterialReactTable({
56    columns,
57    data,
58    enableFacetedValues: true,
59    initialState: { showColumnFilters: true },
60  });
61
62  return <MaterialReactTable table={table} />;
63};
64
65export default Example;
66

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8
9const Example = () => {
10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
11    () => [
12      {
13        accessorKey: 'id',
14        header: 'ID',
15      },
16      {
17        accessorKey: 'firstName',
18        header: 'First Name',
19      },
20      {
21        accessorKey: 'lastName',
22        header: 'Last Name',
23      },
24      {
25        accessorKey: 'gender',
26        header: 'Gender',
27        filterFn: 'equals',
28        filterSelectOptions: ['Male', 'Female', 'Other'],
29        filterVariant: 'select',
30      },
31      {
32        accessorKey: 'age',
33        header: 'Age',
34        filterVariant: 'range',
35      },
36    ],
37    [],
38  );
39
40  const table = useMaterialReactTable({
41    columns,
42    data,
43    columnFilterDisplayMode: 'popover',
44  });
45
46  return <MaterialReactTable table={table} />;
47};
48
49export default Example;
50

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

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7
8export type Person = {
9  id: number;
10  firstName: string;
11  lastName: string;
12  gender: string;
13  age: number;
14};
15
16const Example = () => {
17  const columns = useMemo<MRT_ColumnDef<Person>[]>(
18    () => [
19      {
20        accessorKey: 'id',
21        header: 'ID',
22        muiFilterTextFieldProps: { placeholder: 'ID' },
23      },
24      {
25        accessorKey: 'firstName',
26        header: 'First Name',
27      },
28      {
29        accessorKey: 'lastName',
30        header: 'Last Name',
31      },
32      {
33        accessorKey: 'gender',
34        header: 'Gender',
35        filterFn: 'equals',
36        filterSelectOptions: [
37          { label: 'Male', value: 'Male' },
38          { label: 'Female', value: 'Female' },
39          { label: 'Other', value: 'Other' },
40        ],
41        filterVariant: 'select',
42      },
43      {
44        accessorKey: 'age',
45        header: 'Age',
46        filterVariant: 'range',
47      },
48    ],
49    [],
50  );
51
52  const data = useMemo<Person[]>(
53    //data definitions...
54    () => [
55      {
56        id: 1,
57        firstName: 'Hugh',
58        lastName: 'Mungus',
59        gender: 'Male',
60        age: 42,
61      },
62      {
63        id: 2,
64        firstName: 'Leroy',
65        lastName: 'Jenkins',
66        gender: 'Male',
67        age: 51,
68      },
69      {
70        id: 3,
71        firstName: 'Candice',
72        lastName: 'Nutella',
73        gender: 'Female',
74        age: 27,
75      },
76      {
77        id: 4,
78        firstName: 'Micah',
79        lastName: 'Johnson',
80        gender: 'Other',
81        age: 32,
82      },
83    ],
84    [],
85    
86  );
87
88  const table = useMaterialReactTable({
89    columns,
90    data,
91    initialState: { showColumnFilters: true },
92    muiFilterTextFieldProps: {
93      sx: { m: '0.5rem 0', width: '100%' },
94      variant: 'outlined',
95    },
96  });
97
98  return <MaterialReactTable table={table} />;
99};
100
101export default Example;
102