Getting started

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;
  // 100,000 rows × 50 columns (12 base + 38 extra metric columns)
  const rows = makeRows(100_000, 38);
  const t0 = performance.now();
  const grid = createGrid(ctx.host, {
    columns: demoColumns(lang, 38),
    data: rows,
    rowSelection: 'multiple',
    locale: lang,
  });
  const ms = performance.now() - t0;

  text(ctx, tr(lang, {
    en: `${rows.length.toLocaleString()} rows × 50 columns rendered in ${ms.toFixed(0)} ms`,
    ko: `${rows.length.toLocaleString()}행 × 50열을 ${ms.toFixed(0)}ms에 렌더링`,
  }));
  separator(ctx);
  button(ctx, tr(lang, { en: 'Jump to row 50,000', ko: '50,000번째 행으로' }), () => grid.scrollToRow(49_999));
  button(ctx, tr(lang, { en: 'Jump to the end', ko: '맨 끝으로' }), () => grid.scrollToRow(rows.length - 1));
  button(ctx, tr(lang, { en: 'Sort by total', ko: '합계로 정렬' }), () => {
    const s = performance.now();
    grid.setSort([{ colId: 'total', dir: 'desc' }]);
    ctx.log(tr(lang, { en: 'sorted 100,000 rows in', ko: '10만 행 정렬 시간' }) + ` ${(performance.now() - s).toFixed(0)} ms`);
  });
  return grid;
}