FreeGridv1.15.1English

편집기 컬럼의 필터

컬럼은 편집하는 방식대로 거릅니다: 옵션 편집기는 이름 목록, 여러 값 셀은 하나라도 고르면, 기간은 겹치면, 전화번호는 하이픈 없이도 찾습니다.

실행 예제편집기 컬럼 필터

태그, 요금제, 스위치, 기간, 전화번호 필터.

이 데모의 코드
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;
}

컬럼에 편집기가 있으면 필터가 편집기를 따르므로, 저장된 코드가 아니라 눈에 보이는 값으로 거릅니다. 컬럼에 filter를 주면 필터 종류를 직접 정할 수도 있습니다.

편집기별 필터

편집기필터설명
select, 라디오값 목록옵션 이름을 옵션 순서로, 아직 쓰이지 않은 옵션도 나옴
여러 값 선택값 목록값마다 한 줄, 셀의 값 중 하나라도 체크되면 통과
스위치값 목록켜짐·꺼짐 값
콤보 free: false, 고정 목록값 목록select와 같음
자유 입력 콤보텍스트이름과 값 모두로 찾음
날짜, 기간날짜기간은 겹치면 통과 — 날짜 필터 참고
숫자숫자=, <, >, 범위 …
서식 입력텍스트고정 문자 없이도 찾음: 01012로 010-1234-5678

예

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

검색도 같은 규칙

빠른 검색과 찾기 창(Ctrl+F)도 셀에 보이는 값을 봅니다: 옵션 이름, 여러 값 이름, 기간, 전화번호(하이픈 없이도).