Global Filtering (Search) Feature Guide
Mantine React Table has a powerful built-in global filtering (search) feature that uses a fuzzy matching algorithm and ranks/sorts the results based on how closely rows match the search query. In this guide we'll cover how to use, customize, or disable the global filter and search features to fit your needs.
Relevant Table Options
Relevant Column Options
Relevant State Options
More Info Links
|1||TanStack Table Filtering Docs|
Disable Global Filtering
You can either disable the global filter feature entirely, or disable it for specific columns.
Disable Global Filtering per Column
If you simply want to not include a column as one of the columns that the global filter scans through during filtering, you can set the
falsefor that column.
Disable Global Filter Feature
You can disable the global filtering feature and hide the search icon by setting 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 search query with a shade of the
If you are using a custom
Cellrender override for a column, you will need to use the
renderedCellValueprop instead of
cell.getValue()in order to preserve the filter match highlighting.
Disable Filter Match Highlighting
Filter Match Highlighting can be disabled by setting the
Client-Side Global Filtering
Client-side filtering (and global filtering) is enabled by default. This means that the search box will scan through all columns and try to find matches for the search term.
Global Filter Function
You can use any of the built-in
filterFnsor any of the custom filter functions that you have defined in the
filterFnsprop, just like you would with the column filters.
or a custom filter function:
The default global filter function is set to
fuzzy, which is a filtering algorithm based on the popular
match-sorterlibrary from Kent C. Dodds, though you can change the global filter function by setting the
If you keep the default
fuzzyfilterFn option as the global filter function, you get an extra ranked results feature enabled by default. This means that when a user searches with the searchbox, the results will be sorted by the closest match first instead of the order the data was defined in.
The ranked results feature will disable itself automatically if a sort direction is applied to a column, if any sub-rows are expanded, or if any of the
manualprops are set to
If you do not want ranked results to be enabled, but you still want fuzzy matching, you can set the
Global Filter Modes
Similar to the column filter modes, you can enable the user to be able to choose between multiple different filter modes for the global filter with the
enableGlobalFilterModesprop. You can then customize which filter modes are available in the dropdown by setting the
globalFilterModeOptionsprop, or by rendering your own custom menu items with the
Show Search Field by Default
Also, if you want to show the search text box by default and not hide it behind the search icon, you can set the
Customize Global Filter Position
You can customize the position of the global filter (search box) in the top toolbar by setting the
right. It is shown on the right by default.
Customize the Search Text Field
You can customize the search text field by passing in props to the
mantineSearchTextInputPropsprop. This is useful if you want to customize the placeholder text, add styles, or any other text field props.
1-4 of 4
Manual Server-Side Global 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
trueand manage the
globalFilterstate yourself like so. (Can work in conjuntion with manual column filtering)
manualFilteringturns off all client-side filtering, and assumes that the
datayou pass to
<MantineReactTable />is already filtered.
See the full Remote Data example showing off server-side filtering, pagination, and sorting.
View Extra Storybook Examples