Quick Filter

Turn it on with one line

Set config.quickFilter: true to add a search box to the grid toolbar. Type in it and the grid keeps only the rows that match your text — across every column at once. No per-column setup, no options array.

readonly config: GridConfig<Person> = {
  quickFilter: true,
};

It searches what you see

The search matches the formatted, on-screen text — the same value shown in the cell. So searching $120,000 matches the Salary column even though the raw data is a number, and Jan 2021 matches the Hired column even though the raw value is an ISO date. Type several words and every word must appear somewhere in the row.

Works together with everything

Quick filter composes with the rest of the grid. This demo lets you sort any column and filter Department with its own column filter — the search box narrows the rows first, and sorting plus the column filter apply on top of what's left. Use all three together and they all stack.

Let the grid filter for you

By default the grid sends the search text (and any column filters) to your data source, which does the filtering. If your rows are already in memory, set filterApplyMode: 'client' and the grid filters them for you — return the full list from your source and drop the filtering code entirely. It mirrors sortMode: 'client'.

readonly config: GridConfig<Person> = {
  quickFilter: true,
  filterApplyMode: 'client',   // grid filters the loaded rows in memory
};

In this mode a row edited live so it no longer matches the search disappears on its own, and one edited to start matching appears — no refetch. Available with infinite scroll; paging, tree data, and lazily-loaded groups keep filtering on your data source instead.

Fine-tuning

Pass an object instead of true to adjust the box:

• placeholder — the hint text inside the box. Default 'Search…'.
• debounceMs — how long to wait after you stop typing before filtering. Default 250.

readonly config: GridConfig<Person> = {
  quickFilter: {
    placeholder: 'Search people…',
    debounceMs:  300,
  },
};