필터

Q: 어떤 필터가 있나요?

컬럼 메뉴의 텍스트·숫자·날짜·값 목록 필터, 헤더 아래 필터 행, 빠른 검색, 여러 컬럼 조건을 그리고/또는으로 묶는 고급 필터가 있습니다.

컬럼의 ⋮ 메뉴에 타입별 필터가 있습니다. 텍스트(포함, 같음, 시작/끝 문자, 빈 값…), 숫자(=, ≠, <, ≤, >, ≥, 범위, 빈 값), 날짜(같음, 이전, 이후, 범위), 값 목록(컬럼 값을 검색해 체크) 필터입니다. 텍스트는 대소문자를 구분하지 않습니다. 필터가…

실행 예제필터

텍스트·숫자·날짜·값 목록 필터와 빠른 검색으로 원하는 행만 골라냅니다.

이 데모의 코드

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

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const grid = createGrid(ctx.host, { columns: demoColumns(lang), data: makeRows(20_000), locale: lang });

  const count = text(ctx, '');
  const update = () => (count.textContent = tr(lang, {
    en: `${grid.getDisplayedRowCount().toLocaleString()} of 20,000 rows`,
    ko: `20,000행 중 ${grid.getDisplayedRowCount().toLocaleString()}행`,
  }));
  grid.on('filterChange', e => {
    ctx.log(`filterChange → ${JSON.stringify(e.filters)}`);
    update();
  });

  search(ctx, tr(lang, { en: 'Quick search, e.g. "kim seoul"', ko: '빠른 검색 예: "kim japan"' }), q => {
    grid.setQuickFilter(q);
    update();
  });
  separator(ctx);
  button(ctx, tr(lang, { en: 'Q1 ≥ 80,000', ko: '1분기 ≥ 80,000' }), () => grid.setFilter('q1', { type: 'number', op: 'gte', value: 80000 }));
  button(ctx, tr(lang, { en: 'Joined in 2024', ko: '2024년 가입' }), () =>
    grid.setFilter('joined', { type: 'date', op: 'between', value: '2024-01-01', valueTo: '2024-12-31' }));
  button(ctx, tr(lang, { en: 'Japan or Korea', ko: '일본 또는 한국' }), () =>
    grid.setFilter('country', { type: 'set', values: ['Japan', 'South Korea'] }));
  button(ctx, tr(lang, { en: 'Clear filters', ko: '필터 모두 해제' }), () => {
    for (const id of Object.keys(grid.getFilterModel())) grid.setFilter(id, null);
  });
  update();
  return grid;
}

컬럼마다 조건 두 개를 그리고/또는으로, 여러 컬럼 조건은 작성 창으로 만듭니다.

이 데모의 코드

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

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const grid = createGrid(ctx.host, { columns: demoColumns(lang), data: makeRows(2000), locale: lang, statusBar: true });
  grid.on('advancedFilterChange', e => ctx.log(`advancedFilterChange → ${JSON.stringify(e.advancedFilter)}`));
  grid.on('filterChange', e => ctx.log(`filterChange → ${JSON.stringify(e.filters)}`));

  text(ctx, h('Open a column menu: it takes two conditions joined with And / Or. Conditions across columns: right-click → Advanced filter…',
    '컬럼 메뉴에서 조건 두 개를 그리고/또는으로 묶을 수 있습니다. 여러 컬럼에 걸친 조건은 우클릭 → 고급 필터…'));
  separator(ctx);
  button(ctx, h('Q1 between 20,000 and 40,000', '1분기 2만~4만'), () =>
    grid.setFilter('q1', { type: 'combined', operator: 'and', conditions: [{ type: 'number', op: 'gte', value: 20000 }, { type: 'number', op: 'lte', value: 40000 }] }));
  button(ctx, h('(Japan and Q4 > 80,000) or name starts with "Kim"', '(일본 그리고 4분기 > 8만) 또는 이름이 Kim으로 시작'), () =>
    grid.setAdvancedFilter({ operator: 'or', conditions: [
      { operator: 'and', conditions: [
        { colId: 'country', model: { type: 'text', op: 'equals', value: 'Japan' } },
        { colId: 'q4', model: { type: 'number', op: 'gt', value: 80000 } },
      ] },
      { colId: 'name', model: { type: 'text', op: 'startsWith', value: 'kim' } },
    ] }));
  button(ctx, h('Open the builder', '조건 작성 창 열기'), () => grid.openFilterBuilder());
  button(ctx, h('Clear', '모두 해제'), () => {
    grid.setAdvancedFilter(null);
    grid.setFilter('q1', null);
  });
  return grid;
}

컬럼의 ⋮ 메뉴에 타입별 필터가 있습니다. 텍스트(포함, 같음, 시작/끝 문자, 빈 값…), 숫자(=, ≠, <, ≤, >, ≥, 범위, 빈 값), 날짜(같음, 이전, 이후, 범위), 값 목록(컬럼 값을 검색해 체크) 필터입니다. 텍스트는 대소문자를 구분하지 않습니다. 필터가 걸린 컬럼에는 채워진 필터 아이콘이 표시됩니다.

grid.setFilter('name', { type: 'text', op: 'contains', value: 'kim' });
grid.setFilter('total', { type: 'number', op: 'between', value: 1000, valueTo: 5000 });
grid.setFilter('joined', { type: 'date', op: 'after', value: '2025-01-01' });
grid.setFilter('country', { type: 'set', values: ['Japan', 'South Korea'] });
grid.setFilter('name', null);   // clear one
grid.setQuickFilter('kim seoul'); // every word must match some visible column
grid.on('filterChange', e => console.log(e.filters));

컬럼 메뉴에서는 조건을 두 개까지 걸 수 있고 "그리고/또는"으로 묶입니다. 여러 컬럼을 묶은 조건은 setAdvancedFilter나 우클릭 메뉴의 "고급 필터…"로 만듭니다. AND/OR를 중첩할 수 있고 컬럼 필터와 함께 적용됩니다.

// two conditions on one column
grid.setFilter('qty', { type: 'combined', operator: 'and',
  conditions: [{ type: 'number', op: 'gte', value: 10 }, { type: 'number', op: 'lte', value: 100 }] });

// (status = done AND amount > 100) OR customer starts with "Kim"
grid.setAdvancedFilter({ operator: 'or', conditions: [
  { operator: 'and', conditions: [
    { colId: 'status', model: { type: 'text', op: 'equals', value: 'done' } },
    { colId: 'amount', model: { type: 'number', op: 'gt', value: 100 } },
  ] },
  { colId: 'customer', model: { type: 'text', op: 'startsWith', value: 'kim' } },
] });
grid.openFilterBuilder();   // or right-click → Advanced filter…

필터 행

filterRow: true를 켜면 헤더 바로 아래에 컬럼마다 입력칸이 생기고, 입력하는 대로 걸러집니다(0.2초 뒤 적용, Enter는 즉시 적용, Esc는 지우기). 컬럼 타입에 맞춰 아래처럼 씁니다. 알아볼 수 없는 값은 칸이 빨갛게 표시되고 필터는 그대로 둡니다.

컬럼	입력 예	뜻
텍스트	`kim`	"kim"이 들어간 값 (대소문자 무시)
숫자	`15` · `>10` · `>=10` · `<5` · `<=5` · `<>3`	같음, 초과, 이상, 미만, 이하, 같지 않음 (`1,000`·`₩`도 읽음)
숫자 범위	`10~20` · `10..20`	10 이상 20 이하
날짜	`2026-03-05` · `>2026-01-01` · `<2026-12-31`	그날, 이후, 이전 (`2026.3.5`처럼 점이나 빗금도 됨)
날짜 범위	`2026-01-01~2026-03-31`	두 날짜 사이 (양 끝 포함)
값 목록·참/거짓	선택 상자	`filter: 'set'`이거나 boolean 컬럼은 값 중 하나를 고름

필터 행과 컬럼 메뉴, setFilter()는 같은 필터를 씁니다. 한쪽에서 바꾸면 다른 쪽에도 그대로 보입니다. 입력칸이 필요 없는 컬럼은 filter: false로 빼세요. 실시간 업데이트로 행이 바뀌어도 입력 중인 내용은 유지됩니다.

const grid = createGrid(el, {
  columns: [
    { field: 'name', header: 'Name' },                   // text: contains
    { field: 'qty', header: 'Qty', type: 'number' },     // >10, <=5, 10~20
    { field: 'joined', header: 'Joined', type: 'date' }, // >2026-01-01, 2026-01-01~2026-03-31
    { field: 'status', header: 'Status', filter: 'set' }, // a list of the column's values
    { field: 'memo', header: 'Memo', filter: false },    // no box
  ],
  data,
  filterRow: true,
});

// the boxes and the column menu share one filter: setting one updates the other
grid.setFilter('qty', { type: 'number', op: 'between', value: 10, valueTo: 20 }); // the box shows 10~20

이 페이지에 대한 질문

어떤 필터가 있나요?

컬럼 메뉴의 텍스트·숫자·날짜·값 목록 필터, 헤더 아래 필터 행, 빠른 검색, 여러 컬럼 조건을 그리고/또는으로 묶는 고급 필터가 있습니다.