MRT logoMaterial React Table

Filter Variants Example

Material React Table not only has filtering built in, but it also has a lot of different filter variants that take care of a lot of the heavy lifting for you. Text filters, date filters, range filters, range slider filters, and more are all built in and ready to use. There is much more you can do to customize the behavior of filtering, so be sure to check out the full Column Filtering Feature Guide for more information.

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
ActiveTanner Linsley$100,000.0042San FranciscoCalifornia2/23/20162/23/2016 6:25:43 PM5:28:21 PM
ActiveKevin Vandy$80,000.0051RichmondVirginia2/23/20192/23/2019 6:21:43 PM9:23:11 AM
InactiveJohn Doe$120,000.0027RiversideSouth Carolina2/23/20142/23/2014 6:25:43 PM4:39:51 PM
ActiveJane Doe$150,000.0032San FranciscoCalifornia2/25/20152/25/2015 6:25:43 PM11:12:38 PM
InactiveJohn Smith$75,000.0042Los AngelesCalifornia6/11/20236/11/2023 6:25:43 PM12:21:26 AM
ActiveJane Smith$56,000.0051BlacksburgVirginia2/23/20192/23/2019 6:21:43 PM6:19:43 PM
InactiveSamuel Jackson$90,000.0027New YorkNew York2/23/20102/23/2010 6:25:43 PM6:22:07 AM
1-7 of 7

Source Code

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

View Extra Storybook Examples