MRT logoMaterial React Table

Filter Variants Example

Material React Table has not only has filtering built-in, but it 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 a ton 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.002/23/201642San FranciscoCalifornia
ActiveKevin Vandy$80,000.002/23/201951RichmondVirginia
InactiveJohn Doe$120,000.002/23/201427RiversideSouth Carolina
ActiveJane Doe$150,000.002/25/201532San FranciscoCalifornia
InactiveJohn Smith$75,000.006/11/202342Los AngelesCalifornia
ActiveJane Smith$56,000.002/23/201951BlacksburgVirginia
InactiveSamuel Jackson$90,000.002/23/201027New YorkNew York

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 accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
51 id: 'hireDate',
52 header: 'Hire Date',
53 filterVariant: 'date-range',
54 Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
55 },
56 {
57 accessorKey: 'age',
58 header: 'Age',
59 filterVariant: 'range',
60 filterFn: 'between',
61 size: 80,
62 },
63 {
64 accessorKey: 'city',
65 header: 'City',
66 filterVariant: 'select',
67 filterSelectOptions: citiesList, //custom options list (as opposed to faceted list)
68 },
69 {
70 accessorKey: 'state',
71 header: 'State',
72 filterVariant: 'multi-select',
73 filterSelectOptions: usStateList, //custom options list (as opposed to faceted list)
74 },
75 ],
76 [],
77 );
78
79 const table = useMaterialReactTable({
80 columns,
81 data,
82 initialState: { showColumnFilters: true },
83 });
84
85 return <MaterialReactTable table={table} />;
86};
87
88//Date Picker Imports - these should just be in your Context Provider
89import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
90import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
91
92const ExampleWithLocalizationProvider = () => (
93 //App.tsx or AppProviders file
94 <LocalizationProvider dateAdapter={AdapterDayjs}>
95 <Example />
96 </LocalizationProvider>
97);
98
99export default ExampleWithLocalizationProvider;
100

View Extra Storybook Examples