행 번호·필터 행·화면 저장

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

const KEY = 'freegrid-demo-view';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const grid: GridApi = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 150, headerTooltip: h('Customer name', '고객 이름'), tooltip: true },
      { field: 'email', header: h('Email', '이메일'), width: 150 }, // cut off: hover to read it all
      { field: 'country', header: h('Country', '국가'), width: 120 },
      {
        header: h('Sales', '매출'), children: [
          { field: 'total', header: h('Year', '연간'), type: 'number', format: '#,##0', width: 110, columnGroupShow: 'closed' },
          { field: 'q1', header: 'Q1', type: 'number', format: '#,##0', width: 90, columnGroupShow: 'open' },
          { field: 'q2', header: 'Q2', type: 'number', format: '#,##0', width: 90, columnGroupShow: 'open' },
          { field: 'q3', header: 'Q3', type: 'number', format: '#,##0', width: 90, columnGroupShow: 'open' },
          { field: 'q4', header: 'Q4', type: 'number', format: '#,##0', width: 90, columnGroupShow: 'open' },
        ],
      },
      // four quarters as a small line chart
      { id: 'trend', header: h('Trend', '추이'), width: 110, valueGetter: r => [r.q1, r.q2, r.q3, r.q4], sparkline: true, sortable: false, filter: false },
      { field: 'joined', header: h('Joined', '가입일'), type: 'date', width: 120 },
    ],
    data: makeRows(500),
    locale: lang,
    rowNumbers: true,
    filterRow: true,
    rowSelection: 'multiple',
    getRowId: r => String(r.id),
  });

  text(ctx, h('Type in the boxes under the header: Kim, >50000, 10000~20000, >2025-01-01. Press + on Sales to see the quarters. Hover a cut-off email.',
    '헤더 아래 칸에 입력해 보세요: Kim, >50000, 10000~20000, >2025-01-01. 매출 옆 + 버튼으로 분기를 펼치고, 잘린 이메일 위에 마우스도 올려 보세요.'));
  separator(ctx);
  select(ctx, h('Spacing', '행 간격'), [['compact', h('Compact', '좁게')], ['normal', h('Normal', '보통')], ['comfortable', h('Comfortable', '넓게')]], 'normal',
    d => grid.setDensity(d));
  button(ctx, h('Save view', '화면 저장'), () => {
    localStorage.setItem(KEY, JSON.stringify(grid.getState()));
    ctx.log(h('saved: columns, sort, filters, groups, selection', '저장: 컬럼, 정렬, 필터, 그룹, 선택'));
  });
  button(ctx, h('Restore view', '화면 복원'), () => {
    const saved = localStorage.getItem(KEY);
    if (!saved) return ctx.log(h('nothing saved yet', '저장한 화면이 없습니다'));
    grid.setState(JSON.parse(saved));
    ctx.log(h('restored', '복원했습니다'));
  });
  button(ctx, h('Reset', '초기화'), () => {
    grid.setState({ sort: [], filters: {}, quickFilter: '', columnGroups: {}, selected: [] });
    grid.resetColumnState();
  });
  return grid;
}