MRT logoMaterial React Table

Legacy V2 Docs

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 StackblitzOpen Code SandboxOpen on GitHub
1HughMungusMale42
2LeroyJenkinsMale51
3CandiceNutellaFemale27
4MicahJohnsonOther32

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