Filter row syntax

What you can type in the filter row under the header: =exact, !not, a | b, wildcards and /regex/ for text, >10 and 10~20 for numbers, ranges and relative names for dates.

Live demoFilter row

Type the syntax in the boxes under the headers.

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: 'email', header: h('Email', '이메일'), width: 240 },
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 120 },
      { field: 'joined', header: h('Joined', '가입일'), type: 'date', width: 150 },
      { field: 'status', header: h('Status', '상태'), width: 120, filter: 'set' },
    ],
    data: makeRows(5000), locale: ctx.lang, filterRow: true,
  });
  grid.on('filterChange', e => ctx.log(JSON.stringify(e.filters)));
  text(ctx, h('Try: name =Emma Smith · !an · kim | park · *son  ·  Q1 >80000 · 1000~5000  ·  joined >2024-01-01 · This month (calendar button).',
    '해 보세요: 이름 =Emma Smith · !an · kim | park · *son  ·  1분기 >80000 · 1000~5000  ·  가입일 >2024-01-01 · 이번 달(달력 버튼).'));
  return grid;
}

filterRow: true puts a box under every header. It filters as you type (0.2 s after the last key); Enter applies at once and Escape clears. Text the grid cannot read turns the box red and leaves the filter as it was.

createGrid(el, { columns, data, filterRow: true });

Text columns

Type	Means
kim	Contains "kim" (any case)
ㄱㅎ	Korean initials: finds 김하늘
=Seoul	Exactly Seoul
!test	Does not contain test
seoul \| busan	Contains seoul or busan (any number of parts)
kim* · *@gmail.com · a?c	Wildcards over the whole value: * any text, ? one character
/^A[0-9]+$/	A regular expression; a broken one turns the box red

Number columns

Type	Means
15	Equals 15 (1,000 and ₩ $ € ¥ are read too)
>10 · >=10 · <5 · <=5 · <>3	Greater, at least, less, at most, not equal
10~20 · 10..20	From 10 to 20, both included

Date columns

Type	Means
2026-03-05 · 2026.3.5 · 2026/3/5	That day
>2026-01-01 · <2026-12-31	After / before the day
2026-01-01~2026-03-31	Between the two days
This month · Last 7 days · In the last 14 days	A relative date, by its name in the grid language (what the calendar button writes)
The calendar button	Relative choices, or one click for a day and two for a range

List columns

Columns with filter: 'set', booleans and option editors (select, radio, multi-select, switch, combo with free: false) show a drop-down instead of a box. It lists the option labels in option order; picking one filters by it, and a filter with several values (from the column menu) shows as *(2 selected)*.

One filter, three places

The filter row, the column menu and setFilter() share one filter: a change in one shows in the others.
A filter the box cannot write (two conditions with and) leaves the box empty but stays on.
What you are typing is kept when live updates change the rows.
filter: false leaves a column without a box.
With a datasource, !, * and /…/ are read as plain text (servers do not run those operators).