Custom Filter UI Material React Table Example

Material React Table

Custom Filter UI Example

Material React Table supports rendering your own custom filter UI. This can be useful if you want to render your filters in a custom top toolbar, sidebar, or drawer. Learn more in the full Column Filtering Feature Guide.

More Examples

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

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

Filter by ID

Filter by First Name

Filter by Last Name

Filter by Gender

Filter by Age

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  useMaterialReactTable,
4  type MRT_ColumnDef,
5  MRT_TableContainer,
6  MRT_TableHeadCellFilterContainer,
7} from 'material-react-table';
8import { data, type Person } from './makeData';
9import { Paper, Stack, useMediaQuery } from '@mui/material';
10
11const Example = () => {
12  const isMobile = useMediaQuery('(max-width: 1000px)');
13
14  const columns = useMemo<MRT_ColumnDef<Person>[]>(
15    () => [
16      {
17        accessorKey: 'id',
18        header: 'ID',
19      },
20      {
21        accessorKey: 'firstName',
22        header: 'First Name',
23        filterVariant: 'autocomplete',
24      },
25      {
26        accessorKey: 'lastName',
27        header: 'Last Name',
28      },
29      {
30        accessorKey: 'gender',
31        header: 'Gender',
32        filterFn: 'equals',
33        filterSelectOptions: ['Male', 'Female', 'Other'],
34        filterVariant: 'select',
35      },
36      {
37        accessorKey: 'age',
38        header: 'Age',
39        filterVariant: 'range',
40      },
41    ],
42    [],
43  );
44
45  const table = useMaterialReactTable({
46    columns,
47    data,
48    columnFilterDisplayMode: 'custom', //we will render our own filtering UI
49    enableFacetedValues: true,
50    muiFilterTextFieldProps: ({ column }) => ({
51      label: `Filter by ${column.columnDef.header}`,
52    }),
53  });
54
55  return (
56    <Stack direction={isMobile ? 'column-reverse' : 'row'} gap="8px">
57      <MRT_TableContainer table={table} />
58      <Paper>
59        <Stack p="8px" gap="8px">
60          {table.getLeafHeaders().map((header) => (
61            <MRT_TableHeadCellFilterContainer
62              key={header.id}
63              header={header}
64              table={table}
65              in
66            />
67          ))}
68        </Stack>
69      </Paper>
70    </Stack>
71  );
72};
73
74export default Example;
75

View Extra Storybook Examples