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 {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8

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

55  const table = useMaterialReactTable({
56    columns,
57    data,
58    enableFacetedValues: true,
59    initialState: { showColumnFilters: true },
60  });
61

62  return <MaterialReactTable table={table} />;
63};
64

65export default Example;
66

View Extra Storybook Examples