MRT logoMaterial React Table

Faceted Values Example

Material React Table can scan your data and automatically generate filter autocomplete suggestions, filter select options, or min and max values for your column filters. This is made possible by the faceted values feature from TanStack Table. Learn more in the full Column Filtering Feature Guide.

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
Name
Salary
City
State
Tanner Linsley$100,000.00San FranciscoCalifornia
Kevin Vandy$80,000.00RichmondVirginia
John Doe$120,000.00RiversideSouth Carolina
Jane Doe$150,000.00San FranciscoCalifornia
John Smith$75,000.00Los AngelesCalifornia
Jane Smith$56,000.00BlacksburgVirginia
Samuel Jackson$90,000.00New YorkNew York

1-7 of 7

Source Code 

1import { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { data, type Person } from './makeData';
4

5const Example = () => {
6  const columns = useMemo<MRT_ColumnDef<Person>[]>(
7    () => [
8      {
9        accessorKey: 'name',
10        header: 'Name',
11        filterVariant: 'autocomplete', // default
12        size: 100,
13      },
14      {
15        accessorKey: 'salary',
16        header: 'Salary',
17        Cell: ({ cell }) =>
18          cell.getValue<number>().toLocaleString('en-US', {
19            style: 'currency',
20            currency: 'USD',
21          }),
22        filterVariant: 'range-slider',
23        filterFn: 'betweenInclusive', // default (or between)
24        muiFilterSliderProps: {
25          //no need to specify min/max/step if using faceted values
26          marks: true,
27          step: 5_000,
28          valueLabelFormat: (value) =>
29            value.toLocaleString('en-US', {
30              style: 'currency',
31              currency: 'USD',
32            }),
33        },
34      },
35      {
36        accessorKey: 'city',
37        header: 'City',
38        filterVariant: 'select',
39        //no need to specify filterSelectOptions if using faceted values
40      },
41      {
42        accessorKey: 'state',
43        header: 'State',
44        filterVariant: 'multi-select',
45        //no need to specify filterSelectOptions if using faceted values
46      },
47    ],
48    [],
49  );
50

51  return (
52    <MaterialReactTable
53      columns={columns}
54      data={data}
55      enableFacetedValues
56      initialState={{ showColumnFilters: true }}
57    />
58  );
59};
60

61export default Example;
62

View Extra Storybook Examples