Text filter operators

Every text filter operator: contains, does not contain, equals, starts and ends with, one of a list, wildcards with * and ?, regular expressions and blanks, in the menu, the builder and code.

Live demoText filter operators

Buttons for each operator on 2,000 rows.

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: 260 }, { field: 'country', header: h('Country', '국가'), width: 150 }, { field: 'status', header: h('Status', '상태'), width: 110 }],
    data: makeRows(2000), locale: ctx.lang,
  });
  const count = text(ctx, '');
  const show = () => (count.textContent = h(`${grid.getDisplayedRowCount()} of 2,000 rows`, `2,000행 중 ${grid.getDisplayedRowCount()}행`));
  grid.on('filterChange', e => { ctx.log(JSON.stringify(e.filters)); show(); });
  const f = (label: string, colId: string, model: object | null) => button(ctx, label, () => grid.setFilter(colId, model as never));
  f(h('Name contains "an"', '이름에 "an" 포함'), 'name', { type: 'text', op: 'contains', value: 'an' });
  f(h('Name does not contain "an"', '이름에 "an" 없음'), 'name', { type: 'text', op: 'notContains', value: 'an' });
  f(h('Country is one of Japan, France', '국가가 Japan, France 중 하나'), 'country', { type: 'text', op: 'in', value: 'Japan, France' });
  f(h('Email matches *1@*', '이메일 패턴 *1@*'), 'email', { type: 'text', op: 'like', value: '*1@*' });
  f(h('Email regex ^m', '이메일 정규식 ^m'), 'email', { type: 'text', op: 'regex', value: '^m' });
  separator(ctx);
  button(ctx, h('Clear', '모두 해제'), () => { for (const id of Object.keys(grid.getFilterModel())) grid.setFilter(id, null); });
  show();
  return grid;
}

Text columns (and option columns in the advanced filter) filter with the operators below. Matching ignores case. Option columns are matched by their labels, and masked values (phone numbers) with or without their dashes.

Operators

Operator	Model	Passes when
Contains	{ op: 'contains', value: 'kim' }	The text contains the value (Korean initials work: ㄱㅎ)
Does not contain	{ op: 'notContains', value: 'test' }	The text does not contain it (blank cells pass)
Equals	{ op: 'equals', value: 'Seoul' }	The whole text is the value
Does not equal	{ op: 'notEquals', value: 'Seoul' }	Anything else, blanks included
Starts with / Ends with	{ op: 'startsWith', value: 'A-' }	The text begins / ends with it
Is one of	{ op: 'in', value: 'Seoul, Busan, Incheon' }	The text equals one of the comma- or line-separated values
Matches (* ?)	{ op: 'like', value: '*@gmail.com' }	The whole text fits the pattern: * any text, ? one character
Regular expression	{ op: 'regex', value: '^A[0-9]{3}$' }	The regular expression finds a match (case ignored; a broken pattern keeps every row)
Blank / Not blank	{ op: 'blank' }	Empty (null, undefined, spaces) / anything else

From code

grid.setFilter('name', { type: 'text', op: 'notContains', value: 'test' });
grid.setFilter('city', { type: 'text', op: 'in', value: 'Seoul, Busan\nIncheon' });   // commas or lines
grid.setFilter('email', { type: 'text', op: 'like', value: '*@gmail.com' });
grid.setFilter('code', { type: 'text', op: 'regex', value: '^A[0-9]{3}$' });
grid.setFilter('name', { type: 'text', op: 'startsWith', value: 'ㄱ' });              // names starting with ㄱ
grid.setFilter('name', null);                                                          // clear

Two conditions on one column

The column menu takes two conditions joined with and / or. In code that is a combined model, which can also hold more than two:

grid.setFilter('email', {
  type: 'combined',
  operator: 'and',
  conditions: [
    { type: 'text', op: 'like', value: '*@*.kr' },
    { type: 'text', op: 'notContains', value: 'test' },
  ],
});

Pick the operator; the value box changes its hint: a, b, c for Is one of, a*b? for Matches.
Blank and Not blank need no value, so the box hides.
Enter in a box applies; Reset clears the column filter.

With a datasource

The server examples run contains, equals, starts / ends with and blanks. Is one of is sent as a set filter ({ type: 'set', values }), so it works there as well. Does not contain, Matches and Regular expression are not offered in the menus with a datasource, and the filter row treats !, * and /…/ as plain text.

Questions about this page

How do I filter rows whose text does not contain a word?

Use the operator Does not contain in the column menu, or setFilter('name', { type: 'text', op: 'notContains', value: 'test' }). In the filter row, type !test.

Can a grid filter use wildcards or regular expressions?

Yes: op 'like' takes * (any text) and ? (one character) over the whole value, op 'regex' a regular expression (case ignored). In the filter row type kim* or /^A\d+$/.

Operators

From code

Two conditions on one column

In the column menu

With a datasource

Questions about this page