우클릭 메뉴 직접 만들기

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

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const starred = new Set<unknown>();
  const grid = createGrid(ctx.host, {
    columns: [{ field: 'id', header: 'ID', type: 'number', width: 70 }, { field: 'name', header: h('Name', '이름'), width: 170 }, { field: 'country', header: h('Country', '국가'), width: 140 }, { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 120 }],
    data: makeRows(300), locale: ctx.lang, rowSelection: 'multiple', getRowId: r => String(r.id), cellNotes: true,
    contextMenu: p => [
      { heading: p.row ? h(`Customer #${p.row.id}`, `고객 #${p.row.id}`) : h('Customers', '고객') },
      'copy', 'copyWithHeaders', 'paste', 'undo',
      'separator',
      { label: h('Starred', '즐겨찾기'), icon: '★', checked: starred.has(p.row?.id), disabled: !p.row, action: () => { starred.has(p.row!.id) ? starred.delete(p.row!.id) : starred.add(p.row!.id); ctx.log(`starred: ${[...starred].join(', ')}`); } },
      { label: h('Export', '내보내기'), icon: '⇩', items: ['exportCsv', 'exportExcel', { label: h('More', '기타'), items: ['exportJson', 'exportPdf', 'print'] }] },
      { label: h('Column', '컬럼'), items: ['autosize', 'hideColumn', 'separator', 'pinLeft', 'pinRight', 'unpin'] },
      'note',
      'separator',
      { label: h('Delete row', '행 삭제'), icon: '🗑', danger: true, hidden: !p.row, action: () => grid.removeRows([p.row!]) },
    ],
    headerContextMenu: p => [{ heading: p.column?.header ?? p.colId }, ...p.defaultItems],
  });
  text(ctx, h('Right-click a cell (hover Export for a submenu) or a header. Shift+F10 opens it from the keyboard: ↓ ↑, → opens, ← goes back.',
    '셀(내보내기에 마우스를 올리면 하위 메뉴)이나 헤더를 우클릭하세요. Shift+F10으로 키보드로 열고 ↓ ↑, →로 열고 ←로 돌아갑니다.'));
  return grid;
}