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

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
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