Quick search

One box that searches every shown column: all words must match, "a phrase" matches as written, -word excludes rows, Korean initials work, and option labels are found.

Live demoQuick search

Words, "phrases" and -exclusions across all columns.

Code for this demo

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 170 }, { field: 'company', header: h('Company', '회사'), width: 160 },
      { field: 'country', header: h('Country', '국가'), width: 140 }, { field: 'status', header: h('Status', '상태'), width: 110 },
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 110 },
    ],
    data: makeRows(5000), locale: ctx.lang,
  });
  const box = document.createElement('input');
  box.type = 'search';
  box.placeholder = h('kim japan · "emma smith" · japan -active', 'kim japan · "emma smith" · japan -active');
  box.addEventListener('input', () => { grid.setQuickFilter(box.value); ctx.log(`"${box.value}" → ${grid.getDisplayedRowCount()} rows`); });
  ctx.controls.append(box);
  separator(ctx);
  for (const s of ['kim japan', '"emma smith"', 'japan -active', 'pending -japan']) button(ctx, s, () => { box.value = s; box.dispatchEvent(new Event('input')); });
  return grid;
}

setQuickFilter(text) filters the rows by every shown column at once — the usual search box above a grid. It works together with column filters and the advanced filter.

const box = document.querySelector('#search');
box.addEventListener('input', () => grid.setQuickFilter(box.value));

What you can type

Type	Means
kim seoul	Rows containing kim and seoul, in any columns
"seoul office"	The phrase as written, words together
seoul -closed	Rows with seoul and without closed
-"on hold"	Rows without the phrase
ㄱㅎ	Korean initials (김하늘)

What it searches

The text of every shown column, as it appears: formatted numbers and dates, option labels instead of codes, multi-select labels, periods.
Phone numbers and other masked values also by their digits (01012).
Hidden columns are not searched; system columns (row numbers, checkboxes) neither.
Case is ignored.

State and servers

getState() includes it (quickFilter), and stateParts can keep it with stateKey.
With a datasource the text is sent to getRows as quickFilter, unchanged; the server examples search their text columns with it.
To highlight matches instead of hiding rows, use the find bar.