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 { useEffect, useMemo, useState } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6  type MRT_ColumnFiltersState,
7  type MRT_PaginationState,
8  type MRT_SortingState,
9} from 'material-react-table';
10
11type UserApiResponse = {
12  data: Array<User>;
13  meta: {
14    totalRowCount: number;
15  };
16};
17
18type User = {
19  firstName: string;
20  lastName: string;
21  address: string;
22  state: string;
23  phoneNumber: string;
24};
25
26const Example = () => {
27  //data and fetching state
28  const [data, setData] = useState<User[]>([]);
29  const [isError, setIsError] = useState(false);
30  const [isLoading, setIsLoading] = useState(false);
31  const [isRefetching, setIsRefetching] = useState(false);
32  const [rowCount, setRowCount] = useState(0);
33
34  //table state
35  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
36    [],
37  );
38  const [globalFilter, setGlobalFilter] = useState('');
39  const [sorting, setSorting] = useState<MRT_SortingState>([]);
40  const [pagination, setPagination] = useState<MRT_PaginationState>({
41    pageIndex: 0,
42    pageSize: 10,
43  });
44
45  //if you want to avoid useEffect, look at the React Query example instead
46  useEffect(() => {
47    const fetchData = async () => {
48      if (!data.length) {
49        setIsLoading(true);
50      } else {
51        setIsRefetching(true);
52      }
53
54      const url = new URL(
55        '/api/data',
56        process.env.NODE_ENV === 'production'
57          ? 'https://www.material-react-table.com'
58          : 'http://localhost:3000',
59      );
60      url.searchParams.set(
61        'start',
62        `${pagination.pageIndex * pagination.pageSize}`,
63      );
64      url.searchParams.set('size', `${pagination.pageSize}`);
65      url.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
66      url.searchParams.set('globalFilter', globalFilter ?? '');
67      url.searchParams.set('sorting', JSON.stringify(sorting ?? []));
68
69      try {
70        const response = await fetch(url.href);
71        const json = (await response.json()) as UserApiResponse;
72        setData(json.data);
73        setRowCount(json.meta.totalRowCount);
74      } catch (error) {
75        setIsError(true);
76        console.error(error);
77        return;
78      }
79      setIsError(false);
80      setIsLoading(false);
81      setIsRefetching(false);
82    };
83    fetchData();
84    // eslint-disable-next-line react-hooks/exhaustive-deps
85  }, [
86    columnFilters, //re-fetch when column filters change
87    globalFilter, //re-fetch when global filter changes
88    pagination.pageIndex, //re-fetch when page index changes
89    pagination.pageSize, //re-fetch when page size changes
90    sorting, //re-fetch when sorting changes
91  ]);
92
93  const columns = useMemo<MRT_ColumnDef<User>[]>(
94    () => [
95      {
96        accessorKey: 'firstName',
97        header: 'First Name',
98      },
99      //column definitions...
100      {
101        accessorKey: 'lastName',
102        header: 'Last Name',
103      },
104      {
105        accessorKey: 'address',
106        header: 'Address',
107      },
108      {
109        accessorKey: 'state',
110        header: 'State',
111      },
112      {
113        accessorKey: 'phoneNumber',
114        header: 'Phone Number',
115      },
116      
117    ],
118    [],
119  );
120
121  const table = useMaterialReactTable({
122    columns,
123    data,
124    enableRowSelection: true,
125    getRowId: (row) => row.phoneNumber,
126    initialState: { showColumnFilters: true },
127    manualFiltering: true,
128    manualPagination: true,
129    manualSorting: true,
130    muiToolbarAlertBannerProps: isError
131      ? {
132          color: 'error',
133          children: 'Error loading data',
134        }
135      : undefined,
136    onColumnFiltersChange: setColumnFilters,
137    onGlobalFilterChange: setGlobalFilter,
138    onPaginationChange: setPagination,
139    onSortingChange: setSorting,
140    rowCount,
141    state: {
142      columnFilters,
143      globalFilter,
144      isLoading,
145      pagination,
146      showAlertBanner: isError,
147      showProgressBars: isRefetching,
148      sorting,
149    },
150  });
151
152  return <MaterialReactTable table={table} />;
153};
154
155export default Example;
156