Popover Filters Material React Table Example

Material React Table supports displaying column filters in other ways than in the default sub-header location. This example shows how to only display 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.

Primary

Secondary

Drop to group by

ID	First Name	Last Name	Gender	Age
1	Hugh	Mungus	Male	42
2	Leroy	Jenkins	Male	51
3	Candice	Nutella	Female	27
4	Micah	Johnson	Other	32

Rows per page

1-4 of 4

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 { 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

Material React Table

Popover Filters Example

Demo

Source Code