MRT logoMaterial React Table

Filter Switching Example

Material React Table supports letting users switch between multiple filter modes. Learn more in the full Column Filtering Feature Guide.

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub

1HughJayMungus42
2LeroyLeroyJenkins51
3CandiceDeniseNutella27
4MicahHenryJohnson32

1-4 of 4

Source Code

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

View Extra Storybook Examples