Material React Table

1import React, { useMemo } from 'react';
2import MaterialReactTable, { 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, { 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: 'Account 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: 220,
16      },
17      {
18        accessorKey: 'name',
19        header: 'Name',
20        filterVariant: 'text', // default
21      },
22      {
23        accessorKey: 'age',
24        header: 'Age',
25        filterVariant: 'range',
26        filterFn: 'betweenInclusive', // use betweenInclusive instead of between
27      },
28      {
29        accessorKey: 'city',
30        header: 'City',
31        filterVariant: 'select',
32        filterSelectOptions: citiesList,
33      },
34      {
35        accessorKey: 'state',
36        header: 'State',
37        filterVariant: 'multi-select',
38        filterSelectOptions: usStateList,
39      },
40    ],
41    [],
42  );
43
44  return (
45    <MaterialReactTable
46      columns={columns}
47      data={data}
48      initialState={{ showColumnFilters: true }}
49    />
50  );
51};
52
53export default Example;
54

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

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