다단 헤더

import { createGrid, type ColumnDef } from '@freegridjs/core';
import { makeRows } from '../data';
import { 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 money = { type: 'number', format: '#,##0', width: 100 } as const;
  // Three header levels: Year → Half → Quarter.
  const columns: ColumnDef[] = [
    { field: 'id', header: 'ID', width: 70, type: 'number', format: '0', pinned: 'left' },
    { header: h('Customer', '고객'), children: [
      { field: 'name', header: h('Name', '이름'), width: 160 },
      { field: 'company', header: h('Company', '회사'), width: 130 },
      { field: 'country', header: h('Country', '국가'), width: 140 },
    ] },
    { header: h('Revenue 2026', '2026년 매출'), children: [
      { header: h('First half', '상반기'), children: [
        { field: 'q1', header: 'Q1', ...money },
        { field: 'q2', header: 'Q2', ...money },
      ] },
      { header: h('Second half', '하반기'), children: [
        { field: 'q3', header: 'Q3', ...money },
        { field: 'q4', header: 'Q4', ...money },
      ] },
    ] },
    { field: 'total', header: h('Total', '합계'), ...money, width: 120, pinned: 'right' },
  ];
  return createGrid(ctx.host, { columns, data: makeRows(2000), locale: lang });
}