Filters on editor columns

Columns filter the way they edit: option editors get a list of labels, multi-value cells pass when any value is chosen, periods when they overlap, phone numbers without dashes.

Live demoFilters on editor columns

Tags, plans, switches, periods and phone numbers, filtered.

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';

const pad = (n: number) => String(n).padStart(2, '0');
export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const TAGS = [{ value: 'vip', label: 'VIP' }, { value: 'new', label: h('New', '신규') }, { value: 'b2b', label: h('Wholesale', '도매') }];
  const data = makeRows(500).map((r, i) => ({
    ...r, tags: TAGS.filter((_, k) => (i >> k) & 1).map(t => t.value), plan: ['free', 'pro', 'team'][i % 3],
    useYn: i % 3 ? 'Y' : 'N', period: `2026-${pad(1 + (i % 12))}-01 ~ 2026-${pad(1 + (i % 12))}-${pad(5 + (i % 20))}`,
    tel: `010-${1000 + (i * 37) % 9000}-${1000 + (i * 91) % 9000}`,
  }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 140 },
      { field: 'tags', header: h('Tags', '태그'), width: 160, editor: { type: 'multiSelect', options: TAGS } },
      { field: 'plan', header: h('Plan', '요금제'), width: 110, editor: { type: 'radio', options: [{ value: 'free', label: 'Free' }, { value: 'pro', label: 'Pro' }, { value: 'team', label: 'Team' }] } },
      { field: 'useYn', header: h('In use', '사용'), width: 100, editor: { type: 'toggle', on: 'Y', off: 'N' } },
      { field: 'period', header: h('Period', '기간'), width: 210, editor: { type: 'dateRange' } },
      { field: 'tel', header: h('Phone', '전화'), width: 140, editor: { type: 'mask', mask: 'phone' } },
    ],
    data, locale: ctx.lang, filterRow: true,
  });
  grid.on('filterChange', e => ctx.log(JSON.stringify(e.filters)));
  text(ctx, h('Pick New in the tags list (rows with New among others pass), a plan by its label, a period with the calendar, or type 01012 for phones.',
    '태그 목록에서 신규를 고르거나(다른 태그와 같이 있어도 통과), 요금제를 이름으로, 기간을 달력으로, 전화번호에 01012를 입력해 보세요.'));
  return grid;
}

When a column has an editor, its filter follows the editor, so people filter by what they see rather than by stored codes. You can still set filter on the column to choose the filter type yourself.

Which filter each editor gets

Editor	Filter	Notes
select, radio	List (set)	Option labels, in option order; options not used yet are listed too
multiSelect	List (set)	Each value once; a row passes when any of its values is checked
toggle	List (set)	The on and off values
combo, free: false, fixed list	List (set)	Like select
combo with free text	Text	Matched by label and by value
date, dateRange	Date	Ranges pass when they overlap — see Date filters
number	Number	=, <, >, between …
mask	Text	Found with or without the written parts: 01012 finds 010-1234-5678

Example

const TAGS = [{ value: 'vip', label: 'VIP' }, { value: 'new', label: 'New' }];
const columns = [
  { field: 'tags', editor: { type: 'multiSelect', options: TAGS } },          // set filter: VIP, New
  { field: 'plan', editor: { type: 'radio', options: ['Free', 'Pro', 'Team'] } },
  { field: 'useYn', editor: { type: 'toggle', on: 'Y', off: 'N' } },
  { field: 'period', editor: { type: 'dateRange' } },                         // date filter, overlap
  { field: 'tel', editor: { type: 'mask', mask: 'phone' } },                  // text filter, digits work
  { field: 'memo', editor: { type: 'select', options: ['A', 'B'] }, filter: 'text' },   // your own choice
];

// rows tagged New (alone or with others)
grid.setFilter('tags', { type: 'set', values: ['new'] });
// rows whose period touches March 2026
grid.setFilter('period', { type: 'date', op: 'between', value: '2026-03-01', valueTo: '2026-03-31' });

Search follows too

The quick search and the find bar (Ctrl+F) look at what the cell shows: option labels, joined multi-select labels, formatted periods and phone numbers (also without dashes).