컬럼 커스터마이징

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

const KEY = 'freegrid-demo-columns';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const columns = demoColumns(lang).map(c => (c.field === 'id' ? { ...c, lockVisible: true } : c));
  const grid = createGrid(ctx.host, {
    columns,
    data: makeRows(3000),
    locale: lang,
    sideBar: { open: true }, // docked Columns panel
  });

  grid.on('columnVisible', e => ctx.log(`columnVisible → ${e.colId}: ${e.visible}`));
  grid.on('columnMove', e => ctx.log(`columnMove → ${e.colId} to ${e.toIndex}`));
  grid.on('columnResize', e => ctx.log(`columnResize → ${e.colId}: ${e.width}px`));

  button(ctx, tr(lang, { en: 'Choose columns…', ko: '컬럼 선택…' }), () => grid.openColumnChooser());
  button(ctx, tr(lang, { en: 'Toggle side bar', ko: '사이드바 열기/닫기' }), () => grid.toggleSideBar());
  button(ctx, tr(lang, { en: 'Autosize all', ko: '모두 자동 맞춤' }), () => grid.autoSizeColumns());
  separator(ctx);
  button(ctx, tr(lang, { en: 'Save layout', ko: '레이아웃 저장' }), () => {
    localStorage.setItem(KEY, JSON.stringify(grid.getColumnState()));
    ctx.log(tr(lang, { en: 'saved to localStorage', ko: 'localStorage에 저장됨' }));
  });
  button(ctx, tr(lang, { en: 'Restore layout', ko: '레이아웃 복원' }), () => {
    const saved = localStorage.getItem(KEY);
    if (saved) grid.applyColumnState(JSON.parse(saved));
    ctx.log(saved ? tr(lang, { en: 'restored', ko: '복원됨' }) : tr(lang, { en: 'nothing saved yet', ko: '저장된 레이아웃 없음' }));
  });
  button(ctx, tr(lang, { en: 'Reset columns', ko: '컬럼 초기화' }), () => grid.resetColumnState());
  return grid;
}