복사·붙여넣기·우클릭

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

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  // Paste only writes to columns marked editable.
  const editable = new Set(['name', 'q1', 'q2', 'q3', 'q4', 'joined', 'active', 'status']);
  const columns = demoColumns(lang).map(function mark(c): typeof c {
    if (c.children) return { ...c, children: c.children.map(mark) };
    // email cannot be copied: it pastes as an empty cell
    if (c.field === 'email') return { ...c, copyable: false, cellClass: 'demo-secret' };
    return editable.has(c.field ?? '') ? { ...c, editable: true } : c;
  });
  const data = makeRows(500);
  let grid: GridApi;

  const create = (rangeSelection: boolean) => {
    grid?.destroy();
    grid = createGrid(ctx.host, {
      columns,
      data,
      rowSelection: 'multiple',
      locale: lang,
      rangeSelection, // drag, Shift+click, Shift+arrows and Ctrl+A select cell ranges (Excel-style)
      summary: { rows: [{ label: tr(lang, { en: 'Total', ko: '합계' }), columns: { q1: 'sum', q2: 'sum', q3: 'sum', q4: 'sum' } }] },
      contextMenu: p => [
        ...p.defaultItems,
        'separator',
        { label: tr(lang, { en: `Say hello to ${p.row?.name ?? ''}`, ko: `${p.row?.name ?? ''}에게 인사하기` }), action: () => ctx.log(`👋 ${p.row?.name}`) },
      ],
    });
    grid.on('rangeChange', e => e.range && ctx.log(`rangeChange → ${e.range.start.colId} ${e.range.start.rowIndex + 1} : ${e.range.end.colId} ${e.range.end.rowIndex + 1}`));
    grid.on('cellValueChanged', e => ctx.log(`cellValueChanged → row ${e.rowIndex + 1} ${e.colId}: ${String(e.oldValue)} → ${String(e.newValue)}`));
    grid.on('paste', e => ctx.log(`paste → changed ${e.changed}, skipped ${e.skipped}`));
  };
  create(true);

  text(ctx, tr(lang, {
    en: 'Drag across cells, press Ctrl+C and paste into Excel. Copy cells in Excel, click a Name or Q1–Q4 cell and press Ctrl+V. Right-click for the menu. Hold Ctrl to add more ranges. The Email column cannot be copied.',
    ko: '셀을 드래그하고 Ctrl+C를 누른 뒤 엑셀에 붙여넣어 보세요. 엑셀에서 복사한 셀은 이름이나 1~4분기 셀을 클릭하고 Ctrl+V로 붙여넣습니다. 우클릭하면 메뉴가 열립니다. Ctrl을 누른 채 드래그하면 범위를 더 추가합니다. 이메일 컬럼은 복사되지 않습니다.',
  }));
  separator(ctx);
  toggle(ctx, tr(lang, { en: 'Drag selects cell ranges', ko: '드래그로 셀 범위 선택' }), true, on => {
    create(on);
    ctx.log(`rangeSelection: ${on}`);
  });
  button(ctx, tr(lang, { en: 'Copy with headers', ko: '헤더 포함 복사' }), () => {
    const tsv = grid.copySelection({ headers: true });
    ctx.log(tr(lang, { en: `copied ${tsv.split('\r\n').length} lines`, ko: `${tsv.split('\r\n').length}줄 복사됨` }));
  });
  button(ctx, tr(lang, { en: 'Paste sample into Name, Q1', ko: '이름·1분기에 예시 붙여넣기' }), () => {
    grid.setRange({ start: { rowIndex: 0, colId: 'name' }, end: { rowIndex: 0, colId: 'name' } });
    grid.pasteText('Kim Minsu\t1,234,000\r\nLee Jiwoo\t(50)');
  });
}