Filtering

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