Filter Variants Material React Table Example

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 Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

Status Filter by Status	Name	Salary	Hire Date	Age	City Filter by City	State Filter by State
Active	Tanner Linsley	$100,000.00	2/23/2016	42	San Francisco	California
Active	Kevin Vandy	$80,000.00	2/23/2019	51	Richmond	Virginia
Inactive	John Doe	$120,000.00	2/23/2014	27	Riverside	South Carolina
Active	Jane Doe	$150,000.00	2/25/2015	32	San Francisco	California
Inactive	John Smith	$75,000.00	6/11/2023	42	Los Angeles	California
Active	Jane Smith	$56,000.00	2/23/2019	51	Blacksburg	Virginia
Inactive	Samuel Jackson	$90,000.00	2/23/2010	27	New York	New York

Rows per page

1-7 of 7

This example is written for MRT V2.

If your app is still using MRT V1, either Upgrade to MRT V2 or use the V1 Docs instead. (useMaterialReactTable only exists in V2)

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