FreeGridv1.15.1English

우클릭 메뉴

복사·붙여넣기·고정·숨기기·내보내기·인쇄가 든 셀 우클릭 메뉴와, 항목을 더하거나 바꾸는 contextMenu 옵션.

실행 예제우클릭 메뉴

기본 명령과 직접 만든 항목이 든 우클릭 메뉴.

이 데모의 코드
import { createGrid, type GridApi } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { separator, text, toggle, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const data = makeRows(500);
  let grid: GridApi;
  const starred = new Set<unknown>();

  const create = (custom: boolean) => {
    grid?.destroy();
    grid = createGrid(ctx.host, {
      columns: demoColumns(lang).map(c => (c.field === 'name' ? { ...c, editable: true } : c)),
      data,
      locale: lang,
      rowSelection: 'multiple',
      // built-in entries by name, a submenu, icons, a check mark, a heading
      contextMenu: custom ? p => [
        { heading: p.row ? String(p.row.name) : h('Menu', '메뉴') },
        'copy', 'copyWithHeaders', 'paste', 'undo', 'redo',
        '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(`Send a mail to ${p.row?.name ?? ''}`, `${p.row?.name ?? ''}에게 메일 보내기`), icon: '✉', hidden: !p.row, action: () => ctx.log(`mailto: ${p.row?.email}`) },
        { label: h('Export', '내보내기'), icon: '⇩', items: ['exportCsv', 'exportExcel', { label: h('More', '기타'), items: ['exportJson', 'exportPdf', 'print'] }] },
        { label: h('Column', '컬럼'), items: ['autosize', 'hideColumn', 'separator', 'pinLeft', 'pinRight', 'unpin'] },
        'separator',
        { label: h('Show the cell value', '셀 값 보기'), action: () => ctx.log(`${p.colId} = ${String(p.value)}`), shortcut: 'Alt+V' },
        'deleteRows',
      ] : undefined,
      // headers get a menu of their own: sort, pin, size, hide …
      headerContextMenu: custom ? true : undefined,
    });
  };
  create(true);

  text(ctx, h('Right-click a cell or a column header, or focus a cell and press Shift+F10. Hover Export for a submenu.',
    '셀이나 컬럼 헤더를 우클릭하거나, 셀을 고르고 Shift+F10을 눌러 보세요. 내보내기에 마우스를 올리면 하위 메뉴가 열립니다.'));
  separator(ctx);
  toggle(ctx, h('My own menus', '직접 꾸민 메뉴'), true, on => { create(on); ctx.log(`custom items: ${on}`); });
  return grid!;
}

셀을 우클릭하거나 포커스 셀에서 Shift+F10이나 메뉴 키를 누르면 브라우저 메뉴 대신 그리드 메뉴가 열립니다. 복사, 헤더 포함 복사, 잘라내기, 붙여넣기, 체크한 행 복사, 실행 취소와 다시 실행, 체크한 행 삭제, 너비 자동 맞춤, 컬럼 숨기기와 고정, 모든 행 선택, 컬럼 선택, 선택 범위 차트, CSV·엑셀·JSON·PDF 내보내기, 고급 필터, 인쇄가 들어 있습니다. 되돌릴 것이 없을 때의 실행 취소처럼 쓸 수 없는 항목은 빠지거나 흐리게 보입니다.

메뉴를 바꾸려면 contextMenu에 함수를 주세요. 함수는 우클릭한 셀(row, rowIndex, colId, value)과 그리드가 보여 줄 기본 메뉴인 defaultItems를 받습니다. 기본 항목을 그대로 두거나, 순서를 바꾸거나, 덧붙여서 보여 줄 항목을 돌려주면 됩니다. 항목에는 label과 action이 있고, disabled로 흐리게 하거나 shortcut으로 단축키 안내를 붙일 수 있습니다. 'separator'는 구분선입니다. contextMenu: false를 주면 브라우저 기본 메뉴가 열립니다.

const grid = createGrid(el, {
  columns,
  data,
  contextMenu: p => [
    ...p.defaultItems,                                    // Copy, Paste, Pin, Hide, Export …
    'separator',
    { label: 'Open order', action: () => open(p.row) },
    { label: 'Delete', action: () => grid.removeRows([p.row]), disabled: !p.row?.draft, shortcut: 'Del' },
  ],
  // contextMenu: false,   // keep the browser's own menu
});

컬럼 헤더를 우클릭하면 정렬·필터·고정·숨기기가 있는 컬럼 메뉴가 열립니다. 컬럼 메뉴는 무료이고 이 옵션과 상관없이 동작합니다. 아래 headerContextMenu를 주면 헤더에도 전용 메뉴가 열립니다.

메뉴 직접 꾸미기

contextMenu와 headerContextMenu로 기본 항목, 하위 메뉴, 아이콘, 체크 표시, 제목을 섞어 메뉴를 직접 만듭니다. 자세한 내용:

옵션

이름타입설명
contextMenufalse | ContextMenuItem[] | (params) => ContextMenuItem[]false면 브라우저 기본 메뉴. 배열이나 함수로 보여 줄 항목을 정합니다.
headerContextMenufalse | true | ContextMenuItem[] | (params) => ContextMenuItem[]컬럼 헤더 우클릭 메뉴(정렬, 고정, 묶기, 너비, 숨기기…). true면 기본 메뉴. 주지 않으면 헤더는 컬럼 메뉴를 엽니다.
params{ area, row, rowIndex, colId, column, value, defaultItems }메뉴가 열린 곳: area는 'cell' 또는 'header'(헤더면 rowIndex -1, row null), 그리고 그대로 두거나 순서를 바꾸거나 덧붙일 기본 항목. action도 같은 정보를 받습니다.
ContextMenuItem'separator' | ContextMenuKey | { heading } | { label, action?, items?, icon?, checked?, disabled?, hidden?, danger?, shortcut?, title? }구분선, 이름으로 고른 기본 항목, 작은 제목, 또는 항목. items는 하위 메뉴, icon에는 글자·이모지·요소·SVG 문자열을 넣습니다.
ContextMenuKeystringcopy, copyWithHeaders, cut, copyRows, paste, undo, redo, deleteRows, autosize, autosizeAll, hideColumn, pinLeft, pinRight, unpin, selectAll, chooseColumns, resetColumns, chartBar, chartLine, chartPie, exportCsv, exportExcel, exportJson, exportPdf, advancedFilter, print, sortAsc, sortDesc, clearSort, groupBy, ungroup, conditionalFormat, columnMenu