Pinned columns

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

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  // demoColumns pins ID and Name to the left and Total to the right.
  const grid = createGrid(ctx.host, { columns: demoColumns(lang, 12), data: makeRows(3000, 12), locale: lang });

  const pin = (colId: string, pinned: 'left' | 'right' | null) => {
    const state = grid.getColumnState().map(s => (s.colId === colId ? { ...s, pinned } : s));
    grid.applyColumnState(state);
    ctx.log(`${colId} → ${pinned ?? 'unpinned'}`);
  };
  button(ctx, tr(lang, { en: 'Pin Email left', ko: '이메일 왼쪽 고정' }), () => pin('email', 'left'));
  button(ctx, tr(lang, { en: 'Pin Status right', ko: '상태 오른쪽 고정' }), () => pin('status', 'right'));
  button(ctx, tr(lang, { en: 'Unpin Name', ko: '이름 고정 해제' }), () => pin('name', null));
  button(ctx, tr(lang, { en: 'Reset', ko: '초기화' }), () => grid.resetColumnState());
  return grid;
}