Context menu

The right-click menu of a cell with copy, paste, pin, hide, export and print, and contextMenu to add, reorder or replace its items.

Paid feature · Context menu. Free for 30 days on a new domain; after that it needs a free personal key or a company key. See pricing

The right-click menu with its built-in commands and your own items.

Code for this demo

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!;
}

Right-click a cell, or press Shift+F10 or the menu key on the focused cell, and the grid opens its own menu instead of the browser's: copy, copy with headers, cut and paste, copy the checked rows, undo and redo, delete the checked rows, autosize, hide and pin the column, select all rows, choose columns, charts of the selected range, export to CSV, Excel, JSON and PDF, the advanced filter and print. Items that do not apply, such as undo with nothing to undo, are left out or greyed out.

Pass a function as contextMenu to change it. It receives the cell (row, rowIndex, colId, value) and defaultItems, the menu the grid would show; return the items to show, keeping, reordering or extending the defaults. An item has a label and an action, and may be disabled or show a shortcut; 'separator' draws a line. contextMenu: false keeps the browser's menu.

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
});

Right-clicking a column header opens the column menu (sort, filter, pin, hide), which is free and not affected by this option, unless you set headerContextMenu (below).

Building your own menu

contextMenu and headerContextMenu build your own menus with built-in keys, submenus, icons, check marks and headings. See:

Building your own context menu

Options

Name	Type	Description
`contextMenu`	`false \| ContextMenuItem[] \| (params) => ContextMenuItem[]`	false keeps the browser's menu; a list or a function gives the items to show.
`headerContextMenu`	`false \| true \| ContextMenuItem[] \| (params) => ContextMenuItem[]`	A right-click menu on column headers (sort, pin, group, size, hide…). true: the built-in one. Left out: headers open the column menu.
`params`	`{ area, row, rowIndex, colId, column, value, defaultItems }`	Where the menu opened: area 'cell' or 'header' (rowIndex -1, row null), and the built-in items to keep, reorder or extend. Actions get the same params.
`ContextMenuItem`	`'separator' \| ContextMenuKey \| { heading } \| { label, action?, items?, icon?, checked?, disabled?, hidden?, danger?, shortcut?, title? }`	A line, a built-in entry by name, a small title, or an entry. items makes a submenu; icon takes text, an emoji, an element or an SVG string.
`ContextMenuKey`	`string`	copy, 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