빠른 검색

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

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 170 }, { field: 'company', header: h('Company', '회사'), width: 160 },
      { field: 'country', header: h('Country', '국가'), width: 140 }, { field: 'status', header: h('Status', '상태'), width: 110 },
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 110 },
    ],
    data: makeRows(5000), locale: ctx.lang,
  });
  const box = document.createElement('input');
  box.type = 'search';
  box.placeholder = h('kim japan · "emma smith" · japan -active', 'kim japan · "emma smith" · japan -active');
  box.addEventListener('input', () => { grid.setQuickFilter(box.value); ctx.log(`"${box.value}" → ${grid.getDisplayedRowCount()} rows`); });
  ctx.controls.append(box);
  separator(ctx);
  for (const s of ['kim japan', '"emma smith"', 'japan -active', 'pending -japan']) button(ctx, s, () => { box.value = s; box.dispatchEvent(new Event('input')); });
  return grid;
}