MRT logoMantine React Table

Column Filtering Feature Guide

Filtering is one of the most powerful features of Mantine React Table and is enabled by default. There is a lot of flexibility and customization available here. Whether you want to customize the powerful client-side filtering already built in or implement your own server-side filtering, Mantine React Table has got you covered.

Relevant Table Options

1
'subheader' | 'popover' | 'custom'
'subheader'
MRT Column Filtering Docs
2
Array<MRT_FilterOption | string> | null
MRT Column Filtering Docs
3
boolean
false
MRT Column Filtering Docs
4
boolean
true
MRT Column Filtering Docs
5
boolean
MRT Column Filtering Docs
6
boolean
true
MRT Column Filtering Docs
7
boolean
true
TanStack Filters Docs
8
Record<string, FilterFn>
TanStack Table Filters Docs
9
boolean
false
TanStack Filtering Docs
10
() => Map<any, number>
TanStack Table Filters Docs
11
() => RowModel<TData>
TanStack Table Filters Docs
12
() => Map<any, number>
TanStack Table Filters Docs
13
() => RowModel<TData>
TanStack Table Filters Docs
14
AutocompleteProps | ({ column, table, rangeFilterIndex }) => AutocompleteProps
Mantine Autocomplete Docs
15
CheckboxProps | ({ column, table }) => CheckboxProps
Mantine Checkbox Docs
16
DateInputProps | ({ table, column, rangeFilterIndex }) => DateInputProps
Mantine DateInput Docs
17
MultiSelectProps | ({ column, table }) => MultiSelectProps
Mantine MultiSelect Docs
18
SelectProps | ({ column, table }) => SelectProps
Mantine Select Docs
19
TextInputProps | ({ table, column, rangeFilterIndex }) => TextInputProps
Mantine TextInput Docs
20
HighlightProps | ({ cell, column, row, table }) => HighlightProps
Mantine Highlight Docs
21
boolean
TanStack Table Filters Docs
22
number
100
TanStack Table Filtering Docs
23
OnChangeFn<{ [key: string]: MRT_FilterOption }>
24
OnChangeFn<ColumnFiltersState>
TanStack Table Filter Docs
25
OnChangeFn<boolean>
26
({ column, internalFilterOptions, onSelectFilterMode, table }) => ReactNode

Relevant Column Options

1
Array<string>
2
boolean
MRT Column Filtering Docs
3
boolean
MRT Column Filtering Docs
4
({ column, header, table }) => ReactNode
MRT Column Filtering Docs
5
MRT_FilterFn
'fuzzy'
6
'text' | 'autocomplete' | 'select' | 'multi-select' | 'range' | 'range-slider' | 'checkbox' | 'date' | 'date-range'
'text'
7
AutocompleteProps | ({ column, table, rangeFilterIndex}) => AutocompleteProps
Mantine Autocomplete Docs
8
CheckboxProps | ({ column, table }) => CheckboxProps
Mantine Checkbox Props
9
MultiSelectProps | ({ column, table }) => MultiSelectProps
Mantine MultiSelect Docs
10
SelectProps | ({ column, table }) => SelectProps
Mantine Select Docs
11
TextInputProps | ({ column, rangeFilterIndex, table }) => TextInputProps
Mantine TextInput Docs
12

Relevant State Options

1
{ [key: string]: MRT_FilterFn }
2
Array<{id: string, value: unknown}>
{}
TanStack Table Filters Docs
3
boolean
false

Disable Filtering Features

Various subsets of filtering features can be disabled. If you want to disable filtering completely, you can set the enableColumnFilters table option to false to remove all filters from each column. Alternatively, enableColumnFilter can be set to false for individual columns.
enableFilters can be set to false to disable both column filters and the global search filter.

Filter Variants

Mantine React Table has several built-in filter variants for advanced filtering. These can be specified on a per-column basis using the filterVariant option. The following variants are available:
  • 'text' - shows the default text field
  • 'autocomplete' - shows an autocomplete text field with the options from faceted values or specified in mantineFilterAutocompleteProps.data array.
  • 'select' - shows a select dropdown with the options from faceted values or specified in mantineFilterSelectProps.data array.
  • 'multi-select' - shows a select dropdown with the options from faceted values or specified in mantineFilterMultiSelectProps.data and allows multiple selections with checkboxes
  • 'range' - shows min and max text fields for filtering a range of values
  • 'range-slider' - shows a slider for filtering a range of values
  • 'date' - shows a date picker for filtering by date values
  • 'date-range' - shows a date range picker for filtering by date ranges
  • 'checkbox' - shows a checkbox for filtering by 'true' or 'false' values
ActiveTanner Linsley2/23/201642$100,000.00San FranciscoCalifornia
ActiveKevin Vandy2/23/201951$80,000.00RichmondVirginia
InactiveJohn Doe2/23/201427$120,000.00RiversideSouth Carolina
ActiveJane Doe2/25/201532$150,000.00San FranciscoCalifornia
InactiveJohn Smith6/11/202342$75,000.00Los AngelesCalifornia
ActiveJane Smith2/23/201951$56,000.00BlacksburgVirginia
InactiveSamuel Jackson2/23/201027$90,000.00New YorkNew York
1-7 of 7
1
import { useMemo } from 'react';
2
import {
3
MantineReactTable,
4
useMantineReactTable,
5
type MRT_ColumnDef,
6
} from 'mantine-react-table';
7
import { citiesList, data, usStateList, type Person } from './makeData';
8
9
const Example = () => {
10
const columns = useMemo<MRT_ColumnDef<Person>[]>(
11
() => [
12
{
13
accessorFn: (originalRow) => (originalRow.isActive ? 'true' : 'false'), //must be strings
14
id: 'isActive',
15
header: 'Account Status',
16
filterVariant: 'checkbox',
17
Cell: ({ cell }) =>
18
cell.getValue() === 'true' ? 'Active' : 'Inactive',
19
size: 220,
20
},
21
{
22
accessorKey: 'name',
23
header: 'Name',
24
filterVariant: 'text', // default
25
},
26
{
27
accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
28
id: 'hireDate',
29
header: 'Hire Date',
30
filterVariant: 'date-range',
31
Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
32
},
33
{
34
accessorKey: 'age',
35
header: 'Age',
36
filterVariant: 'range',
37
filterFn: 'between',
38
size: 80,
39
},
40
{
41
accessorKey: 'salary',
42
header: 'Salary',
43
Cell: ({ cell }) =>
44
cell.getValue<number>().toLocaleString('en-US', {
45
style: 'currency',
46
currency: 'USD',
47
}),
48
filterVariant: 'range-slider',
49
filterFn: 'betweenInclusive', // default (or between)
50
mantineFilterRangeSliderProps: {
51
max: 200_000, //custom max (as opposed to faceted max)
52
min: 30_000, //custom min (as opposed to faceted min)
53
step: 10_000,
54
label: (value) =>
55
value.toLocaleString('en-US', {
56
style: 'currency',
57
currency: 'USD',
58
}),
59
},
60
},
61
{
62
accessorKey: 'city',
63
header: 'City',
64
filterVariant: 'select',
65
mantineFilterSelectProps: {
66
data: citiesList as any,
67
},
68
},
69
{
70
accessorKey: 'state',
71
header: 'State',
72
filterVariant: 'multi-select',
73
mantineFilterMultiSelectProps: {
74
data: usStateList as any,
75
},
76
},
77
],
78
[],
79
);
80
81
const table = useMantineReactTable({
82
columns,
83
data,
84
initialState: { showColumnFilters: true },
85
});
86
87
return <MantineReactTable table={table} />;
88
};
89
90
export default Example;
1
import { useMemo } from 'react';
2
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
3
import { citiesList, data, usStateList } from './makeData';
4
5
const Example = () => {
6
const columns = useMemo(
7
() => [
8
{
9
accessorFn: (originalRow) => (originalRow.isActive ? 'true' : 'false'), //must be strings
10
id: 'isActive',
11
header: 'Account Status',
12
filterVariant: 'checkbox',
13
Cell: ({ cell }) =>
14
cell.getValue() === 'true' ? 'Active' : 'Inactive',
15
size: 220,
16
},
17
{
18
accessorKey: 'name',
19
header: 'Name',
20
filterVariant: 'text', // default
21
},
22
{
23
accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
24
id: 'hireDate',
25
header: 'Hire Date',
26
filterVariant: 'date-range',
27
Cell: ({ cell }) => cell.getValue().toLocaleDateString(), // convert back to string for display
28
},
29
{
30
accessorKey: 'age',
31
header: 'Age',
32
filterVariant: 'range',
33
filterFn: 'between',
34
size: 80,
35
},
36
{
37
accessorKey: 'salary',
38
header: 'Salary',
39
Cell: ({ cell }) =>
40
cell.getValue().toLocaleString('en-US', {
41
style: 'currency',
42
currency: 'USD',
43
}),
44
filterVariant: 'range-slider',
45
filterFn: 'betweenInclusive', // default (or between)
46
mantineFilterRangeSliderProps: {
47
max: 200_000, //custom max (as opposed to faceted max)
48
min: 30_000, //custom min (as opposed to faceted min)
49
step: 10_000,
50
label: (value) =>
51
value.toLocaleString('en-US', {
52
style: 'currency',
53
currency: 'USD',
54
}),
55
},
56
},
57
{
58
accessorKey: 'city',
59
header: 'City',
60
filterVariant: 'select',
61
mantineFilterSelectProps: {
62
data: citiesList,
63
},
64
},
65
{
66
accessorKey: 'state',
67
header: 'State',
68
filterVariant: 'multi-select',
69
mantineFilterMultiSelectProps: {
70
data: usStateList,
71
},
72
},
73
],
74
[],
75
);
76
77
const table = useMantineReactTable({
78
columns,
79
data,
80
initialState: { showColumnFilters: true },
81
});
82
83
return <MantineReactTable table={table} />;
84
};
85
86
export default Example;

Faceted Values for Filter Variants

Faceted values are a list of unique values for a column that gets generated under the hood from table data when the enableFacetedValues table option is set to true. These values can be used to populate the autocomplete suggestions, select dropdowns, or the min and max values for the 'range-slider' variant. This means that you no longer need to manually specify the filter select data props for these variants manually, especially if you are using client-side filtering.
Tanner Linsley$100,000.00San FranciscoCalifornia
Kevin Vandy$80,000.00RichmondVirginia
John Doe$120,000.00RiversideSouth Carolina
Jane Doe$150,000.00San FranciscoCalifornia
John Smith$75,000.00Los AngelesCalifornia
Jane Smith$56,000.00BlacksburgVirginia
Samuel Jackson$90,000.00New YorkNew York
1-7 of 7
1
import { useMemo } from 'react';
2
import {
3
MantineReactTable,
4
useMantineReactTable,
5
type MRT_ColumnDef,
6
} from 'mantine-react-table';
7
import { data, type Person } from './makeData';
8
9
const Example = () => {
10
const columns = useMemo<MRT_ColumnDef<Person>[]>(
11
() => [
12
{
13
accessorKey: 'name',
14
header: 'Name',
15
filterVariant: 'autocomplete',
16
//no need to specify autocomplete props data if using faceted values
17
size: 100,
18
},
19
{
20
accessorKey: 'salary',
21
header: 'Salary',
22
Cell: ({ cell }) =>
23
cell.getValue<number>().toLocaleString('en-US', {
24
style: 'currency',
25
currency: 'USD',
26
}),
27
filterVariant: 'range-slider',
28
filterFn: 'betweenInclusive', // default (or between)
29
mantineFilterRangeSliderProps: {
30
//no need to specify min/max/step if using faceted values
31
color: 'pink',
32
step: 5_000,
33
label: (value) =>
34
value.toLocaleString('en-US', {
35
style: 'currency',
36
currency: 'USD',
37
}),
38
},
39
},
40
{
41
accessorKey: 'city',
42
header: 'City',
43
filterVariant: 'select',
44
//no need to specify select props data if using faceted values
45
},
46
{
47
accessorKey: 'state',
48
header: 'State',
49
filterVariant: 'multi-select',
50
//no need to specify select props data if using faceted values
51
},
52
],
53
[],
54
);
55
56
const table = useMantineReactTable({
57
columns,
58
data,
59
enableFacetedValues: true,
60
initialState: { showColumnFilters: true },
61
});
62
63
return <MantineReactTable table={table} />;
64
};
65
66
export default Example;
1
import { useMemo } from 'react';
2
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
3
import { data } from './makeData';
4
5
const Example = () => {
6
const columns = useMemo(
7
() => [
8
{
9
accessorKey: 'name',
10
header: 'Name',
11
filterVariant: 'autocomplete',
12
//no need to specify autocomplete props data if using faceted values
13
size: 100,
14
},
15
{
16
accessorKey: 'salary',
17
header: 'Salary',
18
Cell: ({ cell }) =>
19
cell.getValue().toLocaleString('en-US', {
20
style: 'currency',
21
currency: 'USD',
22
}),
23
filterVariant: 'range-slider',
24
filterFn: 'betweenInclusive', // default (or between)
25
mantineFilterRangeSliderProps: {
26
//no need to specify min/max/step if using faceted values
27
color: 'pink',
28
step: 5_000,
29
label: (value) =>
30
value.toLocaleString('en-US', {
31
style: 'currency',
32
currency: 'USD',
33
}),
34
},
35
},
36
{
37
accessorKey: 'city',
38
header: 'City',
39
filterVariant: 'select',
40
//no need to specify select props data if using faceted values
41
},
42
{
43
accessorKey: 'state',
44
header: 'State',
45
filterVariant: 'multi-select',
46
//no need to specify select props data if using faceted values
47
},
48
],
49
[],
50
);
51
52
const table = useMantineReactTable({
53
columns,
54
data,
55
enableFacetedValues: true,
56
initialState: { showColumnFilters: true },
57
});
58
59
return <MantineReactTable table={table} />;
60
};
61
62
export default Example;

Custom Faceted Values

If you are using server-side pagination and filtering, you can still customize the faceted values output with the getFacetedUniqueValues and getFacetedMinMaxValues table options.
const table = useMantineReactTable({
columns,
data,
enableFacetedValues: true,
//if using server-side pagination and filtering
getFacetedMinMaxValues: (table) => {
//fetch min and max values from server
return [minValue, maxValue];
},
//if using server-side filtering
getFacetedUniqueValues: (table) => {
const uniqueValueMap = new Map<string, number>();
//fetch unique values from server, ideally including the count of each unique value
return uniqueValueMap;
},
});

Column Filter Display Modes

By default, column filters inputs show below the column header. You can switch to a more "excel-like" UI by setting the columnFilterDisplayMode table option to 'popover'. This will show a filter icon in the column header that can be clicked to open a popover with the filter input.
const table = useMantineReactTable({
columns,
data,
columnFilterDisplayMode: 'popover', //filter inputs will show in a popover (like excel)
});
Alternatively, if you want to render your own column filter UI in a separate sidebar, but still want to use the built-in filtering functionality, you can set the columnFilterDisplayMode table option to 'custom'.
const table = useMantineReactTable({
columns,
data,
columnFilterDisplayMode: 'custom', //render your own column filter UI (e.g. in a sidebar)
});
1HughMungusMale42
2LeroyJenkinsMale51
3CandiceNutellaFemale27
4MicahJohnsonOther32
1-4 of 4
1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { data, type Person } from './makeData';
4
5
const Example = () => {
6
const columns = useMemo<MRT_ColumnDef<Person>[]>(
7
() => [
8
{
9
accessorKey: 'id',
10
header: 'ID',
11
},
12
{
13
accessorKey: 'firstName',
14
header: 'First Name',
15
},
16
{
17
accessorKey: 'lastName',
18
header: 'Last Name',
19
},
20
{
21
accessorKey: 'gender',
22
header: 'Gender',
23
filterFn: 'equals',
24
mantineFilterSelectProps: {
25
data: ['Male', 'Female', 'Other'],
26
},
27
filterVariant: 'select',
28
},
29
{
30
accessorKey: 'age',
31
header: 'Age',
32
filterVariant: 'range',
33
},
34
],
35
[],
36
);
37
38
return (
39
<MantineReactTable
40
columns={columns}
41
data={data}
42
columnFilterDisplayMode="popover"
43
/>
44
);
45
};
46
47
export default Example;
1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { data } from './makeData';
4
5
const Example = () => {
6
const columns = useMemo(
7
() => [
8
{
9
accessorKey: 'id',
10
header: 'ID',
11
},
12
{
13
accessorKey: 'firstName',
14
header: 'First Name',
15
},
16
{
17
accessorKey: 'lastName',
18
header: 'Last Name',
19
},
20
{
21
accessorKey: 'gender',
22
header: 'Gender',
23
filterFn: 'equals',
24
mantineFilterSelectProps: {
25
data: ['Male', 'Female', 'Other'],
26
},
27
filterVariant: 'select',
28
},
29
{
30
accessorKey: 'age',
31
header: 'Age',
32
filterVariant: 'range',
33
},
34
],
35
[],
36
);
37
38
return (
39
<MantineReactTable
40
columns={columns}
41
data={data}
42
columnFilterDisplayMode="popover"
43
/>
44
);
45
};
46
47
export default Example;

Custom Filter Functions

You can specify either a pre-built filterFn that comes with Mantine React Table or pass in your own custom filter functions.

Custom Filter Functions Per Column

By default, Mantine React Table uses a fuzzy filtering algorithm based on the popular match-sorter library from Kent C. Dodds. However, Mantine React Table also comes with numerous other filter functions that you can specify per column in the filterFn column options.
Pre-built MRT Filter Functions
Pre-built filter functions from Mantine React Table include between, betweenInclusive, contains, empty, endsWith, equals, fuzzy, greaterThan, greaterThanOrEqualTo, lessThan, lessThanOrEqualTo, notEmpty, notEquals, and startsWith. View these algorithms here
Pre-built TanStack Table Filter Functions
Pre-built filter functions from TanStack Table include includesString, includesStringSensitive, equalsString, equalsStringSensitive, arrIncludes, arrIncludesAll, arrIncludesSome, weakEquals, and inNumberRange. View more information about these algorithms in the TanStack Table Filter docs.
You can specify either a pre-built filter function, from Mantine React Table or TanStack Table, or you can even specify your own custom filter function in the filterFn column option.
const columns = [
{
accessorKey: 'firstName',
header: 'First Name',
// using a prebuilt filter function from Mantine React Table
filterFn: 'startsWith',
},
{
accessorKey: 'middleName',
header: 'Middle Name',
// using a prebuilt filter function from TanStack Table
filterFn: 'includesStringSensitive',
},
{
accessorKey: 'lastName',
header: 'Last Name',
// custom filter function
filterFn: (row, id, filterValue) =>
row.getValue(id).startsWith(filterValue),
},
];
If you provide a custom filter function, it must have the following signature:
(row: Row<TData>, id: string, filterValue: string | number) => boolean;
This function will be used to filter 1 row at a time and should return a boolean indicating whether or not that row passes the filter.

Add Custom Filter Functions

You can add custom filter functions to the filterFns table option. These will be available to all columns to use. The filterFn column option on a column will override any filter function with the same name in the filterFns table option.
const columns = [
{
accessorKey: 'name',
header: 'Name',
filterFn: 'customFilterFn',
},
];
const table = useMantineReactTable({
data,
columns,
filterFns: {
customFilterFn: (row, id, filterValue) => {
return row.customField === value;
},
},
});

Filter Modes

Enable Column Filter Modes (Filter Switching)

If you want to let the user switch between multiple different filter modes from a drop-down menu on the Filter Textfield, you can enable that with the enableColumnFilterModes table or column option. This will enable the filter icon in the filter text field to open a drop-down menu with the available filter modes when clicked.
const table = useMantineReactTable({
columns,
data,
enableColumnFilterModes: true,
});

Customize Filter Modes

You can narrow down the available filter mode options by setting the columnFilterModeOptions table or a column specific columnFilterModeOptions option.
const columns = [
{
accessorKey: 'firstName',
header: 'First Name',
columnFilterModeOptions: ['fuzzy', 'contains', 'startsWith'],
},
{
accessorKey: 'age',
header: 'Age',
columnFilterModeOptions: ['between', 'lessThan', 'greaterThan'],
},
];

Render Custom Filter Mode Menu

You can also render custom menu items in the filter mode drop-down menu by setting the renderColumnFilterModeMenuItems table or column option. This option is a function that takes in the column and returns an array of MenuItem components. This is useful if you want to add custom filter modes that are not included in Mantine React Table, or if you just want to render the menu in your own custom way
const columns = [
{
accessorKey: 'firstName',
header: 'First Name',
renderColumnFilterModeMenuItems: ({ column, onSelectFilterMode }) => [
<MenuItem
key="startsWith"
onClick={() => onSelectFilterMode('startsWith')}
>
Start With
</MenuItem>,
<MenuItem
key="endsWith"
onClick={() => onSelectFilterMode('yourCustomFilterFn')}
>
Your Custom Filter Fn
</MenuItem>,
],
},
];
const table = useMantineReactTable({
columns,
data,
enableColumnFilterModes: true,
// renderColumnFilterModeMenuItems could go here if you want to apply to all columns
});
1HughJayMungus42
2LeroyLeroyJenkins51
3CandiceDeniseNutella27
4MicahHenryJohnson32
1-4 of 4
1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { Menu } from '@mantine/core';
4
import { data, type Person } from './makeData';
5
6
const Example = () => {
7
const columns = useMemo<MRT_ColumnDef<Person>[]>(
8
() => [
9
{
10
accessorKey: 'id',
11
enableColumnFilterModes: false, //disable changing filter mode for this column
12
filterFn: 'equals', //set filter mode to equals
13
header: 'ID',
14
},
15
{
16
accessorKey: 'firstName', //normal, all filter modes are enabled
17
header: 'First Name',
18
},
19
{
20
accessorKey: 'middleName',
21
enableColumnFilterModes: false, //disable changing filter mode for this column
22
filterFn: 'startsWith', //even though changing the mode is disabled, you can still set the default filter mode
23
header: 'Middle Name',
24
},
25
{
26
accessorKey: 'lastName',
27
header: 'Last Name',
28
//if you do not want to use the default filter modes, you can provide your own and render your own menu
29
renderColumnFilterModeMenuItems: ({ onSelectFilterMode }) => (
30
<>
31
<Menu.Item onClick={() => onSelectFilterMode('contains')}>
32
<div>Contains</div>
33
</Menu.Item>
34
<Menu.Item
35
key="1"
36
onClick={() => onSelectFilterMode('customFilterFn')}
37
>
38
<div>Custom Filter Fn</div>
39
</Menu.Item>
40
</>
41
),
42
},
43
{
44
accessorKey: 'age',
45
columnFilterModeOptions: ['between', 'greaterThan', 'lessThan'], //only allow these filter modes
46
filterFn: 'between',
47
header: 'Age',
48
},
49
],
50
[],
51
);
52
53
return (
54
<MantineReactTable
55
columns={columns}
56
data={data}
57
enableColumnFilterModes //enable changing filter mode for all columns unless explicitly disabled in a column def
58
initialState={{ showColumnFilters: true }} //show filters by default
59
filterFns={{
60
customFilterFn: (row, id, filterValue) => {
61
return row.getValue(id) === filterValue;
62
},
63
}}
64
localization={
65
{
66
filterCustomFilterFn: 'Custom Filter Fn',
67
} as any
68
}
69
/>
70
);
71
};
72
73
export default Example;
1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { Menu } from '@mantine/core';
4
import { data } from './makeData';
5
6
const Example = () => {
7
const columns = useMemo(
8
() => [
9
{
10
accessorKey: 'id',
11
enableColumnFilterModes: false, //disable changing filter mode for this column
12
filterFn: 'equals', //set filter mode to equals
13
header: 'ID',
14
},
15
{
16
accessorKey: 'firstName', //normal, all filter modes are enabled
17
header: 'First Name',
18
},
19
{
20
accessorKey: 'middleName',
21
enableColumnFilterModes: false, //disable changing filter mode for this column
22
filterFn: 'startsWith', //even though changing the mode is disabled, you can still set the default filter mode
23
header: 'Middle Name',
24
},
25
{
26
accessorKey: 'lastName',
27
header: 'Last Name',
28
//if you do not want to use the default filter modes, you can provide your own and render your own menu
29
renderColumnFilterModeMenuItems: ({ onSelectFilterMode }) => (
30
<>
31
<Menu.Item onClick={() => onSelectFilterMode('contains')}>
32
<div>Contains</div>
33
</Menu.Item>
34
<Menu.Item
35
key="1"
36
onClick={() => onSelectFilterMode('customFilterFn')}
37
>
38
<div>Custom Filter Fn</div>
39
</Menu.Item>
40
</>
41
),
42
},
43
{
44
accessorKey: 'age',
45
columnFilterModeOptions: ['between', 'greaterThan', 'lessThan'], //only allow these filter modes
46
filterFn: 'between',
47
header: 'Age',
48
},
49
],
50
[],
51
);
52
53
return (
54
<MantineReactTable
55
columns={columns}
56
data={data}
57
enableColumnFilterModes //enable changing filter mode for all columns unless explicitly disabled in a column def
58
initialState={{ showColumnFilters: true }} //show filters by default
59
filterFns={{
60
customFilterFn: (row, id, filterValue) => {
61
return row.getValue(id) === filterValue;
62
},
63
}}
64
localization={{
65
filterCustomFilterFn: 'Custom Filter Fn',
66
}}
67
/>
68
);
69
};
70
71
export default Example;

Expanded Leaf Row Filtering Options

If you are using the filtering features along-side either the grouping or expanding features, then there are a few behaviors and customizations you should be aware of.
Check out the Expanded Leaf Row Filtering Behavior docs to learn more about the filterFromLeafRows and maxLeafRowFilterDepth table options.

Manual Server-Side Column Filtering

A very common use case when you have a lot of data is to filter the data on the server, instead of client-side. In this case, you will want to set the manualFiltering table option to true and manage the columnFilters state yourself like so (can work in conjunction with manual global filtering).
// You can manage and have control over the columnFilters state yourself
const [columnFilters, setColumnFilters] = useState([]);
const [data, setData] = useState([]); //data will get updated after re-fetching
useEffect(() => {
const fetchData = async () => {
// send api requests when columnFilters state changes
const filteredData = await fetch();
setData([...filteredData]);
};
}, [columnFilters]);
const table = useMantineReactTable({
columns,
data, // this will already be filtered on the server
manualFiltering: true, //turn off client-side filtering
onColumnFiltersChange: setColumnFilters, //hoist internal columnFilters state to your state
state: { columnFilters }, //pass in your own managed columnFilters state
});
return <MantineReactTable table={table} />;
Specifying manualFiltering turns off all client-side filtering and assumes that the data you pass to <MantineReactTable /> is already filtered.
See the full Remote Data example featuring server-side filtering, pagination, and sorting.

Customize Mantine Filter Input Components

You can customize the Mantine filter components by setting the mantineFilterTextInputProps table or column option.
1HughMungusMale42
2LeroyJenkinsMale51
3CandiceNutellaFemale27
4MicahJohnsonOther32
1-4 of 4
1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { data } from './makeData';
4
5
export type Person = {
6
id: number;
7
firstName: string;
8
lastName: string;
9
gender: string;
10
age: number;
11
};
12
13
const Example = () => {
14
const columns = useMemo<MRT_ColumnDef<Person>[]>(
15
() => [
16
{
17
accessorKey: 'id',
18
header: 'ID',
19
mantineFilterTextInputProps: { placeholder: 'ID' },
20
},
21
{
22
accessorKey: 'firstName',
23
header: 'First Name',
24
},
25
{
26
accessorKey: 'lastName',
27
header: 'Last Name',
28
},
29
{
30
accessorKey: 'gender',
31
header: 'Gender',
32
filterFn: 'equals',
33
mantineFilterSelectProps: {
34
data: ['Male', 'Female', 'Other'] as any,
35
},
36
filterVariant: 'select',
37
},
38
{
39
accessorKey: 'age',
40
header: 'Age',
41
filterVariant: 'range',
42
},
43
],
44
[],
45
);
46
47
return (
48
<MantineReactTable
49
columns={columns}
50
data={data}
51
initialState={{ showColumnFilters: true }} //show filters by default
52
mantineFilterTextInputProps={{
53
sx: { borderBottom: 'unset', marginTop: '8px' },
54
variant: 'filled',
55
}}
56
mantineFilterSelectProps={{
57
sx: { borderBottom: 'unset', marginTop: '8px' },
58
variant: 'filled',
59
}}
60
/>
61
);
62
};
63
64
export default Example;
1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { data } from './makeData';
4
5
const Example = () => {
6
const columns = useMemo(
7
() => [
8
{
9
accessorKey: 'id',
10
header: 'ID',
11
mantineFilterTextInputProps: { placeholder: 'ID' },
12
},
13
{
14
accessorKey: 'firstName',
15
header: 'First Name',
16
},
17
{
18
accessorKey: 'lastName',
19
header: 'Last Name',
20
},
21
{
22
accessorKey: 'gender',
23
header: 'Gender',
24
filterFn: 'equals',
25
mantineFilterSelectProps: {
26
data: ['Male', 'Female', 'Other'],
27
},
28
filterVariant: 'select',
29
},
30
{
31
accessorKey: 'age',
32
header: 'Age',
33
filterVariant: 'range',
34
},
35
],
36
[],
37
);
38
39
return (
40
<MantineReactTable
41
columns={columns}
42
data={data}
43
initialState={{ showColumnFilters: true }} //show filters by default
44
mantineFilterTextInputProps={{
45
variant: 'filled',
46
}}
47
/>
48
);
49
};
50
51
export default Example;

Custom Filter Components

If you need custom filter components that are much more complex than text-boxes and dropdowns, you can create and pass in your own filter components using the Filter column option.

Filter Match Highlighting

Filter Match Highlighting is a new featured enabled by default that will highlight text in the table body cells that matches the current filter query with a shade of the theme.colors.yellow color.
Filter Match Highlighting will only work on columns with the default text filter variant. Also, if you are using a custom Cell render override for a column, you will need to use the renderedCellValue param instead of cell.getValue() in order to preserve the filter match highlighting.
const columns = [
{
accessorKey: 'name',
header: 'Name',
Cell: ({ renderedCellValue }) => <span>{renderedCellValue}</span>, // use renderedCellValue instead of cell.getValue()
},
];

Disable Filter Match Highlighting

This feature can be disabled by setting the enableFilterMatchHighlighting table option to false.
const table = useMantineReactTable({
columns,
data,
enableFilterMatchHighlighting: false,
});
View Extra Storybook Examples
You can help make these docs better! PRs are Welcome
Using Material-UI instead of Mantine?
Check out Material React Table