Material React Table

1import React, { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3
4const Example = () => {
5  const columns = useMemo(
6    () =>
7      [
8        {
9          accessorKey: 'id',
10          enableColumnFilter: false, // could disable just this column's filter
11          header: 'ID',
12        },
13        //column definitions...
14        {
15          accessorKey: 'firstName',
16          header: 'First Name',
17        },
18        {
19          accessorKey: 'middleName',
20          header: 'Middle Name',
21        },
22        {
23          accessorKey: 'lastName',
24          header: 'Last Name',
25        },
26        
27      ] as MRT_ColumnDef<(typeof data)[0]>[],
28    [],
29  );
30
31  const data = useMemo(
32    //data definitions...
33    () => [
34      {
35        id: 1,
36        firstName: 'Hugh',
37        middleName: 'Jay',
38        lastName: 'Mungus',
39      },
40      {
41        id: 2,
42        firstName: 'Leroy',
43        middleName: 'Leroy',
44        lastName: 'Jenkins',
45      },
46    ],
47    [],
48    
49  );
50
51  return (
52    <MaterialReactTable
53      columns={columns}
54      data={data}
55      enableColumnFilters={false} //disable all column filters
56    />
57  );
58};
59
60export default Example;
61

1import React, { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { citiesList, data, 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: 100,
22      },
23      {
24        accessorKey: 'age',
25        header: 'Age',
26        filterVariant: 'range',
27        filterFn: 'between',
28        size: 80,
29      },
30      {
31        accessorKey: 'salary',
32        header: 'Salary',
33        Cell: ({ cell }) =>
34          cell.getValue<number>().toLocaleString('en-US', {
35            style: 'currency',
36            currency: 'USD',
37          }),
38        filterVariant: 'range-slider',
39        filterFn: 'betweenInclusive', // default (or between)
40        muiTableHeadCellFilterSliderProps: {
41          marks: true,
42          max: 200_000, //custom max (as opposed to faceted max)
43          min: 30_000, //custom min (as opposed to faceted min)
44          step: 10_000,
45          valueLabelFormat: (value) =>
46            value.toLocaleString('en-US', {
47              style: 'currency',
48              currency: 'USD',
49            }),
50        },
51      },
52      {
53        accessorKey: 'city',
54        header: 'City',
55        filterVariant: 'select',
56        filterSelectOptions: citiesList, //custom options list (as opposed to faceted list)
57      },
58      {
59        accessorKey: 'state',
60        header: 'State',
61        filterVariant: 'multi-select',
62        filterSelectOptions: usStateList, //custom options list (as opposed to faceted list)
63      },
64    ],
65    [],
66  );
67
68  return (
69    <MaterialReactTable
70      columns={columns}
71      data={data}
72      initialState={{ showColumnFilters: true }}
73    />
74  );
75};
76
77export default Example;
78

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

1import React, { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { MenuItem } from '@mui/material';
4import { data, type Person } from './makeData';
5
6const Example = () => {
7  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8    () => [
9      {
10        accessorKey: 'id',
11        enableColumnFilterModes: false, //disable changing filter mode for this column
12        filterFn: 'equals', //set filter mode to equals
13        header: 'ID',
14      },
15      {
16        accessorKey: 'firstName', //normal, all filter modes are enabled
17        header: 'First Name',
18      },
19      {
20        accessorKey: 'middleName',
21        enableColumnFilterModes: false, //disable changing filter mode for this column
22        filterFn: 'startsWith', //even though changing the mode is disabled, you can still set the default filter mode
23        header: 'Middle Name',
24      },
25      {
26        accessorKey: 'lastName',
27        header: 'Last Name',
28        //if you do not want to use the default filter modes, you can provide your own and render your own menu
29        renderColumnFilterModeMenuItems: ({ onSelectFilterMode }) => [
30          <MenuItem key="0" onClick={() => onSelectFilterMode('contains')}>
31            <div>Contains</div>
32          </MenuItem>,
33          <MenuItem
34            key="1"
35            onClick={() => onSelectFilterMode('customFilterFn')}
36          >
37            <div>Custom Filter Fn</div>
38          </MenuItem>,
39        ],
40      },
41      {
42        accessorKey: 'age',
43        columnFilterModeOptions: ['between', 'greaterThan', 'lessThan'], //only allow these filter modes
44        filterFn: 'between',
45        header: 'Age',
46      },
47    ],
48    [],
49  );
50
51  return (
52    <MaterialReactTable
53      columns={columns}
54      data={data}
55      enableColumnFilterModes //enable changing filter mode for all columns unless explicitly disabled in a column def
56      initialState={{ showColumnFilters: true }} //show filters by default
57      filterFns={{
58        customFilterFn: (row, id, filterValue) => {
59          return row.getValue(id) === filterValue;
60        },
61      }}
62      localization={
63        {
64          filterCustomFilterFn: 'Custom Filter Fn',
65        } as any
66      }
67    />
68  );
69};
70
71export default Example;
72

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