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.
Status | Name | Salary | Age | City Filter by City | State Filter by State | Hire Date | Arrival Time | Departure Time |
---|---|---|---|---|---|---|---|---|
Active | Tanner Linsley | $100,000.00 | 42 | San Francisco | California | 2/23/2016 | 2/23/2016 6:25:43 PM | 2:51:02 AM |
Active | Kevin Vandy | $80,000.00 | 51 | Richmond | Virginia | 2/23/2019 | 2/23/2019 6:21:43 PM | 8:36:02 PM |
Inactive | John Doe | $120,000.00 | 27 | Riverside | South Carolina | 2/23/2014 | 2/23/2014 6:25:43 PM | 4:26:28 AM |
Active | Jane Doe | $150,000.00 | 32 | San Francisco | California | 2/25/2015 | 2/25/2015 6:25:43 PM | 6:36:27 PM |
Inactive | John Smith | $75,000.00 | 42 | Los Angeles | California | 6/11/2023 | 6/11/2023 6:25:43 PM | 2:28:33 AM |
Active | Jane Smith | $56,000.00 | 51 | Blacksburg | Virginia | 2/23/2019 | 2/23/2019 6:21:43 PM | 11:07:12 AM |
Inactive | Samuel Jackson | $90,000.00 | 27 | New York | New York | 2/23/2010 | 2/23/2010 6:25:43 PM | 9:44:03 PM |
10
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';89const Example = () => {10 const columns = useMemo<MRT_ColumnDef<Person>[]>(11 () => [12 {13 header: 'Status',14 accessorFn: (originalRow) => (originalRow.isActive ? 'true' : 'false'), //must be strings15 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', // default25 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 filtering70 id: 'hireDate',71 header: 'Hire Date',72 filterVariant: 'date-range',73 Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display74 },75 {76 accessorFn: (originalRow) => new Date(originalRow.arrivalTime), //convert to date for sorting and filtering77 id: 'arrivalTime',78 header: 'Arrival Time',79 filterVariant: 'datetime-range',80 Cell: ({ cell }) =>81 `${cell.getValue<Date>().toLocaleDateString()} ${cell82 .getValue<Date>()83 .toLocaleTimeString()}`, // convert back to string for display84 },85 {86 accessorFn: (originalRow) => new Date(originalRow.departureTime), //convert to date for sorting and filtering87 id: 'departureTime',88 header: 'Departure Time',89 filterVariant: 'time-range',90 Cell: ({ cell }) => cell.getValue<Date>().toLocaleTimeString(), // convert back to string for display91 },92 ],93 [],94 );9596 const table = useMaterialReactTable({97 columns,98 data,99 initialState: { showColumnFilters: true },100 });101102 return <MaterialReactTable table={table} />;103};104105//Date Picker Imports - these should just be in your Context Provider106import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';107import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';108109const ExampleWithLocalizationProvider = () => (110 //App.tsx or AppProviders file111 <LocalizationProvider dateAdapter={AdapterDayjs}>112 <Example />113 </LocalizationProvider>114);115116export default ExampleWithLocalizationProvider;117
View Extra Storybook Examples