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
Relevant Column Options
Relevant State Options
More Info Links
|2||TanStack Table Filters Docs|
Disable Filtering Features
Various subsets of filtering features can be disabled. If you want to disable filtering completely, you can set the
enableColumnFilterstable option to
falseto remove all filters from each column. Alternatively,
enableColumnFiltercan be set to
falsefor individual columns.
enableFilterscan be set to
falseto disable both column filters and the global search filter.
Mantine React Table has several built-in filter variants for advanced filtering. These can be specified on a per-column basis using the
filterVariantoption. 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
'select'- shows a select dropdown with the options from faceted values or specified in
'multi-select'- shows a select dropdown with the options from faceted values or specified in
mantineFilterMultiSelectProps.dataand 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
|Active||Tanner Linsley||2/23/2016||42||$100,000.00||San Francisco||California|
|Inactive||John Doe||2/23/2014||27||$120,000.00||Riverside||South Carolina|
|Active||Jane Doe||2/25/2015||32||$150,000.00||San Francisco||California|
|Inactive||John Smith||6/11/2023||42||$75,000.00||Los Angeles||California|
|Inactive||Samuel Jackson||2/23/2010||27||$90,000.00||New York||New York|
1-7 of 7
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
enableFacetedValuestable 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
dataprops for these variants manually, especially if you are using client-side filtering.
|Tanner Linsley||$100,000.00||San Francisco||California|
|John Doe||$120,000.00||Riverside||South Carolina|
|Jane Doe||$150,000.00||San Francisco||California|
|John Smith||$75,000.00||Los Angeles||California|
|Samuel Jackson||$90,000.00||New York||New York|
1-7 of 7
Custom Faceted Values
If you are using server-side pagination and filtering, you can still customize the faceted values output with the
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
columnFilterDisplayModetable 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.
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
columnFilterDisplayModetable option to
1-4 of 4
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
fuzzyfiltering algorithm based on the popular
match-sorterlibrary from Kent C. Dodds. However, Mantine React Table also comes with numerous other filter functions that you can specify per column in the
Pre-built MRT Filter Functions
Pre-built filter functions from Mantine React Table include
startsWith. View these algorithms here
Pre-built TanStack Table Filter Functions
Pre-built filter functions from TanStack Table include
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
If you provide a custom filter function, it must have the following signature:
This function will be used to filter 1 row at a time and should return a
booleanindicating whether or not that row passes the filter.
Add Custom Filter Functions
You can add custom filter functions to the
filterFnstable option. These will be available to all columns to use. The
filterFncolumn option on a column will override any filter function with the same name in the
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
enableColumnFilterModestable 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.
Customize Filter Modes
You can narrow down the available filter mode options by setting the
columnFilterModeOptionstable or a column specific
Render Custom Filter Mode Menu
You can also render custom menu items in the filter mode drop-down menu by setting the
renderColumnFilterModeMenuItemstable or column option. This option is a function that takes in the column and returns an array of
MenuItemcomponents. 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
1-4 of 4
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
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
manualFilteringtable option to
trueand manage the
columnFiltersstate yourself like so (can work in conjunction with manual global filtering).
manualFilteringturns off all client-side filtering and assumes that the
datayou 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
mantineFilterTextInputPropstable or column option.
1-4 of 4
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 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
Filter Match Highlighting will only work on columns with the default
textfilter variant. Also, if you are using a custom
Cellrender override for a column, you will need to use the
renderedCellValueparam instead of
cell.getValue()in order to preserve the filter match highlighting.
Disable Filter Match Highlighting
This feature can be disabled by setting the
enableFilterMatchHighlightingtable option to
View Extra Storybook Examples