ContextMenuPlugin

Context Menu Plugin for tbw-grid

Adds a customizable right-click menu to grid cells. Build anything from simple copy/paste actions to complex nested menus with conditional visibility, icons, and keyboard shortcuts.

Installation

import { ContextMenuPlugin } from '@toolbox-web/grid/plugins/context-menu';

Menu Item Structure

Property	Type	Description
id	string	Unique item identifier
name	string	Display label
icon	string	Icon class or HTML
shortcut	string	Keyboard shortcut hint
action	(params) => void	Click handler
disabled	boolean | (params) => boolean	Disable condition
visible	boolean | (params) => boolean	Visibility condition
items	MenuItem[]	Submenu items
separator	boolean	Create a divider line

Menu Context (params)

Property	Type	Description
rowIndex	number	Clicked row index
colIndex	number	Clicked column index
field	string	Column field name
value	any	Cell value
row	any	Full row data
column	ColumnConfig	Column configuration

CSS Custom Properties

Property	Default	Description
--tbw-context-menu-bg	var(--tbw-color-panel-bg)	Menu background
--tbw-context-menu-fg	var(--tbw-color-fg)	Menu text color
--tbw-context-menu-hover	var(--tbw-color-row-hover)	Item hover background

Examples

Basic Context Menu

import '@toolbox-web/grid';
import { ContextMenuPlugin } from '@toolbox-web/grid/plugins/context-menu';

grid.gridConfig = {
  plugins: [
    new ContextMenuPlugin({
      items: [
        { id: 'copy', name: 'Copy', shortcut: 'Ctrl+C', action: (ctx) => navigator.clipboard.writeText(ctx.value) },
        { separator: true, id: 'sep1', name: '' },
        { id: 'delete', name: 'Delete', action: (ctx) => removeRow(ctx.rowIndex) },
      ],
    }),
  ],
};

Conditional Menu Items

new ContextMenuPlugin({
  items: [
    { id: 'edit', name: 'Edit', visible: (ctx) => ctx.column.editable === true },
    { id: 'delete', name: 'Delete', disabled: (ctx) => ctx.row.locked === true },
  ],
})

See Also

• ContextMenuConfig for configuration options
• ContextMenuItem for menu item structure
• ContextMenuParams for action callback parameters

Extends BaseGridPlugin

Inherited methods like attach(), detach(), afterRender(), etc. are documented in the base class.

Methods

showMenu()

Programmatically show the context menu at the specified position.

showMenu(x: number, y: number, params: Partial<ContextMenuParams>): void

Parameters

Name	Type	Description
x	number	X coordinate
y	number	Y coordinate
params	Partial<ContextMenuParams>	Partial context menu parameters

---

hideMenu()

Hide the context menu.

hideMenu(): void

---

isMenuOpen()

Check if the context menu is currently open.

isMenuOpen(): boolean

Returns

boolean - Whether the menu is open

---