Global Filtering/Search Feature Guide - Mantine React Table Docs

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

#	Type	Default Value	More Info Links
1	boolean	true	MRT Column Filtering Docs

2	boolean	true	MRT Global Filtering Docs

3	boolean	true	MRT Global Filtering Docs

4	boolean	true	MRT Global Filtering Docs

5	(column: Column<TData, unknown>) => boolean

6	MRT_FilterOption

7	Array<MRT_FilterOption \| string> \| null

8	TextInputProps \| ({ table }) => TextInputProps		Mantine TextInput Docs

9	boolean		TanStack Table Filters Docs

10	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

11	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

12	OnChangeFn<boolean>

13	'left' \| 'right'

14	({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode

Relevant Column Options

	#	Column Option	Type	Default Value	More Info Links
	1		boolean

Relevant State Options

#	Type	Default Value	More Info Links
1	any		TanStack Table Filtering Docs

2	MRT_FilterFn

3	boolean	false

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 enableGlobalFilter option to false for that column.

const columns = [
  {
    accessorKey: 'id',
    header: 'Id',
    enableGlobalFilter: false, // do not scan this column during global filtering
  },
  {
    accessorKey: 'name',
    header: 'Name',
  },
];

Disable Global Filter Feature

You can disable the global filtering feature and hide the search icon by setting the enableGlobalFilter prop to false.

const table = useMantineReactTable({
  columns,
  data,
  enableGlobalFilter: false, //disable search feature
});

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 theme.colors.yellow color.

If you are using a custom Cell render override for a column, you will need to use the renderedCellValue prop 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

Filter Match Highlighting can be disabled by setting the enableFilterMatchHighlighting prop to false.

const table = useMantineReactTable({
  columns,
  data,
  enableFilterMatchHighlighting: false,
});

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 filterFns or any of the custom filter functions that you have defined in the filterFns prop, just like you would with the column filters.

const table = useMantineReactTable({
  columns,
  data,
  globalFilterFn: 'contains', //turn off fuzzy matching and use simple contains filter function
});

or a custom filter function:

const table = useMantineReactTable({
  columns,
  data,
  filterFns: {
    myCustomFilterFn: (row, id, filterValue) =>
      row.getValue(id).startsWith(filterValue),
  },
  globalFilterFn: 'myCustomFilterFn', //set the global filter function to myCustomFilterFn
});

The default global filter function is set to fuzzy, which is a filtering algorithm based on the popular match-sorter library from Kent C. Dodds, though you can change the global filter function by setting the globalFilterFn prop.

Ranked Results

If you keep the default fuzzy filterFn 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 manual props are set to true.

If you do not want ranked results to be enabled, but you still want fuzzy matching, you can set the enableGlobalFilterRankedResults prop to false.

const table = useMantineReactTable({
  columns,
  data,
  enableGlobalFilterRankedResults: false, //preserve the order of the data when fuzzy match searching
});

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 enableGlobalFilterModes prop. You can then customize which filter modes are available in the dropdown by setting the globalFilterModeOptions prop, or by rendering your own custom menu items with the renderGlobalFilterModeMenuItems prop.

const table = useMantineReactTable({
  columns,
  data,
  enableGlobalFilterModes: true, //enable the user to choose between multiple search filter modes
  globalFilterModeOptions: ['fuzzy', 'startsWith'], //only allow the user to choose between fuzzy and startsWith filter modes
});

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 showGlobalFilter state to true in the initialState.

Customize Global Filter Position

You can customize the position of the global filter (search box) in the top toolbar by setting the positionGlobalFilter prop to left or right. It is shown on the right by default.

const table = useMantineReactTable({
  columns,
  data,
  positionGlobalFilter: 'left', //show the global filter on the left side of the top toolbar
  initialState: {
    showGlobalFilter: true, //show the global filter by default
  },
});

Customize the Search Text Field

You can customize the search text field by passing in props to the mantineSearchTextInputProps prop. This is useful if you want to customize the placeholder text, add styles, or any other text field props.

const table = useMantineReactTable({
  columns,
  data,
  mantineSearchTextInputProps: {
    placeholder: 'Search all users',
    sx: { minWidth: '300px' },
    variant: 'outlined',
  },
});

Demo

ID	First Name	Middle Name	Last Name	Age
1	Hugh	Jay	Mungus	42
2	Leroy	Leroy	Jenkins	51
3	Candice	Denise	Nutella	27
4	Micah	Henry	Johnson	32

Rows per page

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: 'middleName',
18
        header: 'Middle Name',
19
      },
20
      {
21
        accessorKey: 'lastName',
22
        header: 'Last Name',
23
      },
24
      {
25
        accessorKey: 'age',
26
        header: 'Age',
27
      },
28
    ],
29
    [],
30
  );
31

32
  return (
33
    <MantineReactTable
34
      columns={columns}
35
      data={data}
36
      enableGlobalFilterModes
37
      initialState={{
38
        showGlobalFilter: true,
39
      }}
40
      positionGlobalFilter="left"
41
      mantineSearchTextInputProps={{
42
        placeholder: `Search ${data.length} rows`,
43
        sx: { minWidth: '300px' },
44
        variant: 'filled',
45
      }}
46
    />
47
  );
48
};
49

50
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: 'middleName',
18
        header: 'Middle Name',
19
      },
20
      {
21
        accessorKey: 'lastName',
22
        header: 'Last Name',
23
      },
24
      {
25
        accessorKey: 'age',
26
        header: 'Age',
27
      },
28
    ],
29
    [],
30
  );
31

32
  return (
33
    <MantineReactTable
34
      columns={columns}
35
      data={data}
36
      enableGlobalFilterModes
37
      initialState={{
38
        showGlobalFilter: true,
39
      }}
40
      positionGlobalFilter="left"
41
      mantineSearchTextInputProps={{
42
        placeholder: `Search ${data.length} rows`,
43
        sx: { minWidth: '300px' },
44
        variant: 'filled',
45
      }}
46
    />
47
  );
48
};
49

50
export default Example;

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 manualFiltering prop to true and manage the globalFilter state yourself like so. (Can work in conjuntion with manual column filtering)

// You can manage and have control over the columnFilters state yourself
const [globalFilter, setGlobalFilter] = 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]);
  };
}, [globalFilter]);

const table = useMantineReactTable({
  columns,
  data, // this will already be filtered on the server
  manualFiltering: true, //turn off client-side filtering
  onGlobalFilterChange: setGlobalFilter, //hoist internal global state to your state
  state: { globalFilter }, //pass in your own managed globalFilter 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 showing off server-side filtering, pagination, and sorting.

View Extra Storybook Examples