MRT logoMaterial React Table

Popover Filters Example

Material React Table supports displaying column filters in other ways than in the default sub-header location. This example shows how to only show column filters when the user clicks on the filter icon in the header, and then display the filters in a popover. Learn more in the full Column Filtering Feature Guide.

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
ID
First Name
Last Name
Gender
Age
1HughMungusMale42
2LeroyJenkinsMale51
3CandiceNutellaFemale27
4MicahJohnsonOther32

1-4 of 4

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: 'id',
14        header: 'ID',
15      },
16      {
17        accessorKey: 'firstName',
18        header: 'First Name',
19      },
20      {
21        accessorKey: 'lastName',
22        header: 'Last Name',
23      },
24      {
25        accessorKey: 'gender',
26        header: 'Gender',
27        filterFn: 'equals',
28        filterSelectOptions: ['Male', 'Female', 'Other'],
29        filterVariant: 'select',
30      },
31      {
32        accessorKey: 'age',
33        header: 'Age',
34        filterVariant: 'range',
35      },
36    ],
37    [],
38  );
39

40  const table = useMaterialReactTable({
41    columns,
42    data,
43    columnFilterDisplayMode: 'popover',
44  });
45

46  return <MaterialReactTable table={table} />;
47};
48

49export default Example;
50

View Extra Storybook Examples