Building your own context menu

Q: How do I add a submenu to the grid context menu?

Give an entry items: { label: 'Export', items: ['exportCsv', 'exportExcel'] }. It opens on hover, click, → or Enter, and submenus can nest.

Build the right-click menu from built-in entries by name and your own entries: submenus, icons, check marks, headings, hidden and danger entries, and a separate menu for headers.

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

Keys, submenus, icons and a header menu.

Code for this demo

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

contextMenu (cells) and headerContextMenu (column headers) take a list of entries, or a function that returns one for the cell that was right-clicked. A list mixes built-in entries by name with your own.

A full example

createGrid(el, {
  columns, data, cellNotes: true,
  contextMenu: p => [
    { heading: p.row ? `Order #${p.row.id}` : 'Order' },
    'copy', 'paste',
    'separator',
    { label: 'Starred', icon: '★', checked: !!p.row?.starred, action: () => toggleStar(p.row) },
    { label: 'Export', icon: '<svg viewBox="0 0 16 16"><path d="M8 1v9m-4-4 4 4 4-4M2 14h12" stroke="currentColor" fill="none"/></svg>',
      items: ['exportCsv', 'exportExcel', { label: 'More', items: ['exportJson', 'exportPdf', 'print'] }] },
    { label: 'Refund…', hidden: !p.row?.paid, action: () => refund(p.row) },
    'note',
    'separator',
    { label: 'Delete', icon: '🗑', danger: true, shortcut: 'Del', action: () => grid.removeRows([p.row]) },
  ],
  headerContextMenu: p => [{ heading: p.column?.header ?? p.colId }, ...p.defaultItems],
});

Entries

Name	Type	Description
`'separator'`	`string`	A line. Lines at the start, the end or next to each other are dropped.
`'copy', 'exportExcel' …`	`ContextMenuKey`	A built-in entry by name (table below). Entries that do not apply right now are left out.
`{ heading }`	`object`	A small title over the entries that follow.
`{ label, action }`	`object`	Your entry; action gets the menu params.
`items`	`ContextMenuItem[]`	A submenu (opens on hover, click, → or Enter; ← and Esc go back). A submenu with nothing left in it is dropped.
`icon`	`string \| HTMLElement`	Text or an emoji, an element, or an SVG string ('<svg…'). Escape untrusted data.
`checked`	`boolean`	A check mark in the icon place; screen readers hear a checkbox.
`disabled / hidden`	`boolean`	Greyed out / left out.
`danger`	`boolean`	Red text for entries that remove things.
`shortcut / title`	`string`	A key hint on the right / hover text.

Built-in entries by name

Key	Entry	Default menu
copy	Copy	cells
copyWithHeaders	Copy with headers	cells
cut	Cut	cells
copyRows	Copy checked rows (when rows are checked)	cells
paste	Paste	cells
undo / redo	Undo / redo (when there is history)	cells
deleteRows	Delete checked rows (danger style)	cells
autosize / autosizeAll	Size this column / all columns to fit	both
hideColumn	Hide the column (not for lockVisible)	both
pinLeft / pinRight / unpin	Pin the column	both
sortAsc / sortDesc / clearSort	Sort by the column (the current direction checked)	headers
groupBy / ungroup	Group by the column / stop	headers
selectAll	Select all rows (rowSelection multiple)	cells
chooseColumns / resetColumns	Column chooser (both) / reset columns (headers)	both
chartBar / chartLine / chartPie	Chart of the selected range (a range of more than one cell)	cells
exportCsv / exportExcel / exportJson / exportPdf	Export the rows	cells
advancedFilter	Open the advanced filter	cells
print	Print	cells
conditionalFormat	Conditional formats of the column	headers
columnMenu	Open the column menu (filters)	headers
note / deleteNote	Add or edit / delete the note of the cell (cellNotes)	cells
addCalculated / editCalculated / removeCalculated	Calculated columns	headers
showValuesAs	A submenu: values, % of total, % of group, running total	headers
expandDetails / collapseDetails	Open / close every detail row (detailRenderer)	cells

Any key works in either menu: sortAsc in the cell menu sorts by the right-clicked column.

What the function and actions get

Name	Type	Description
`area`	`'cell' \| 'header'`	Which menu.
`row / rowIndex`	`Row \| null / number`	The right-clicked row (null and -1 for a header or an empty area).
`colId / column`	`string / ColumnDef \| null`	The column.
`value`	`unknown`	The cell value.
`defaultItems`	`ContextMenuItem[]`	The built-in menu, entries with their key: keep, filter, reorder or extend.

Without headerContextMenu, a header right-click opens the column menu (as before). false keeps the browser menu.
true shows the built-in header menu: sort (current direction checked), pin, group, size, hide, choose and reset columns, show values as, calculated columns, conditional formats and the column menu.
A list or a function builds it like the cell menu.

Keyboard

Key	Does
Shift + F10, ContextMenu	Open the cell menu at the focused cell
↓ / ↑	Move between entries
→ / Enter	Open a submenu
← / Esc	Back to the parent menu; Esc on the first menu closes it

Questions about this page

How do I add a submenu to the grid context menu?

Give an entry items: { label: 'Export', items: ['exportCsv', 'exportExcel'] }. It opens on hover, click, → or Enter, and submenus can nest.

Building your own context menu

Live demoYour own context menu

A full example

Entries

Built-in entries by name

What the function and actions get

The header menu

Keyboard

Questions about this page