Quick Filter (Global Search) in Apex Grid

The Apex grid ships a global-search input that filters rows across every visible column. Matching is debounced (200ms by default) and routed through the same data pipeline that powers sorting and column filters, so quick-filter results compose with any active sort and column-level filters.

Enabling the quick filter

The input renders inside the toolbar when show-quick-filter is on:

<apex-grid show-quick-filter></apex-grid>

Or programmatically:

grid.showQuickFilter = true;

Setting and reading the term

The current search term is exposed as a property and a reflected attribute:

grid.quickFilter = 'ada';
const current = grid.quickFilter;

<apex-grid show-quick-filter quick-filter="ada"></apex-grid>

Setting the term programmatically goes through the same quickFilterChanging → quickFilterChanged event lifecycle as user input.

Events

• quickFilterChanging — cancellable; fires before the term is applied. Use this to reject a term or to trigger a remote search.
• quickFilterChanged — fires after the term has been applied and the data pipeline has re-run.

Custom matcher

The default matcher case-insensitively checks whether the stringified cell value of any visible column contains the search term. Provide a custom matcher through dataPipelineConfiguration.quickFilter to override:

grid.dataPipelineConfiguration = {
  quickFilter: ({ data, grid }) => {
    const term = grid.quickFilter.trim().toLowerCase();
    if (!term) return data;
    return data.filter((row) => row.searchBlob?.toLowerCase().includes(term));
  },
};

The callback receives the same DataPipelineParams object used by the sort and filter hooks and may return either T[] or Promise<T[]> — async matchers are awaited before the rows render.