고급 필터

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