Context Menu Plugin

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

Installation

import '@toolbox-web/grid/features/context-menu';

Basic Usage

Define your menu items as an array—each item has an id, label, and action callback that receives context about the clicked cell (row data, column info, cell value, etc.). Add separators between groups of actions for visual clarity.

Vanilla JS

import { queryGrid } from '@toolbox-web/grid';

const grid = queryGrid('tbw-grid');
grid.gridConfig = {
  columns: [
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' },
    { field: 'status', header: 'Status' }
  ],
  features: {
    contextMenu: {
      items: [
        { id: 'copy', name: 'Copy Cell', action: (ctx) => navigator.clipboard.writeText(String(ctx.value)) },
        { id: 'sep1', name: '', separator: true },
        { id: 'delete', name: 'Delete Row', action: (ctx) => removeRow(ctx.rowIndex) },
      ],
    },
  },
};

React

import '@toolbox-web/grid-react/features/context-menu';
import { DataGrid, useGrid } from '@toolbox-web/grid-react';
import type { ContextMenuConfig } from '@toolbox-web/grid/plugins/context-menu';

function MyGrid({ data, onDelete }) {
  const { ref, element } = useGrid();

  const contextMenu: ContextMenuConfig = {
    items: [
      { id: 'copy', name: 'Copy Cell', action: (ctx) => navigator.clipboard.writeText(String(ctx.value)) },
      { id: 'sep1', name: '', separator: true },
      { id: 'delete', name: 'Delete Row', action: (ctx) => onDelete(ctx.rowIndex) },
    ],
  };

  return (
    <DataGrid
      ref={ref}
      rows={data}
      columns={[
        { field: 'name', header: 'Name' },
        { field: 'email', header: 'Email' },
        { field: 'status', header: 'Status' }
      ]}
      contextMenu={contextMenu}
    />
  );
}

Vue

<script setup>
import '@toolbox-web/grid-vue/features/context-menu';
import { TbwGrid, TbwGridColumn } from '@toolbox-web/grid-vue';
import { ref } from 'vue';

const data = [
  { name: 'Alice', email: 'alice@example.com', status: 'active' },
  { name: 'Bob', email: 'bob@example.com', status: 'inactive' },
];

const gridRef = ref(null);

const contextMenuConfig = {
  items: [
    { id: 'copy', name: 'Copy Cell', action: (ctx) => navigator.clipboard.writeText(String(ctx.value)) },
    { id: 'sep1', name: '', separator: true },
    { id: 'delete', name: 'Delete Row', action: (ctx) => console.log('Delete row:', ctx.rowIndex) },
  ],
};
</script>

<template>
  <TbwGrid ref="gridRef" :rows="data" :context-menu="contextMenuConfig">
    <TbwGridColumn field="name" header="Name" />
    <TbwGridColumn field="email" header="Email" />
    <TbwGridColumn field="status" header="Status" />
  </TbwGrid>
</template>

Angular

// Feature import - enables the [contextMenu] input
import '@toolbox-web/grid-angular/features/context-menu';

import { Component, output } from '@angular/core';
import { Grid } from '@toolbox-web/grid-angular';
import type { ColumnConfig } from '@toolbox-web/grid';
import type { ContextMenuItem } from '@toolbox-web/grid/plugins/context-menu';

@Component({
  selector: 'app-my-grid',
  imports: [Grid],
  template: `
    <tbw-grid
      #grid
      [rows]="rows"
      [columns]="columns"
      [contextMenu]="contextMenuConfig"
      style="height: 400px; display: block;">
    </tbw-grid>
  `,
})
export class MyGridComponent {
  deleteRow = output<number>();
  rows = [...];

  columns: ColumnConfig[] = [
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' },
    { field: 'status', header: 'Status' }
  ];

  contextMenuConfig = {
    items: [
      { id: 'copy', name: 'Copy Cell', action: (ctx: any) => navigator.clipboard.writeText(String(ctx.value)) },
      { id: 'sep1', name: '', separator: true },
      { id: 'delete', name: 'Delete Row', action: (ctx: any) => this.deleteRow.emit(ctx.rowIndex) },
    ] as ContextMenuItem[],
  };
}

Demos

Default Context Menu

Show source

Right-click any cell to see the context menu.

With Submenus

Show source

Nested menu items for complex actions.

Conditional Items

Show source

Show/hide items based on context.

Plugin-Contributed Items

Right-click any cell to see the context menu. Items from FilteringPlugin, VisibilityPlugin, and PinnedColumnsPlugin are automatically contributed alongside custom items.

Show source

Plugins like FilteringPlugin, VisibilityPlugin, and PinnedColumnsPlugin can contribute their own items to the context menu automatically.

Configuration Options

Option	Type	Default	Description
items	ContextMenuItem[]	Copy + Export CSV	Menu items to display

TypeScript Interfaces

• ContextMenuItem — Menu item definition (id, label, icon, action, submenus, etc.)
• ContextMenuParams — Context passed to action callbacks (row, column, value, selection, etc.)
• ContextMenuConfig — Plugin configuration options

Selection Sync

When used with the SelectionPlugin (row mode), the context menu automatically syncs the selection on right-click:

Scenario	Behavior
Right-click a selected row	Multi-selection preserved
Right-click an unselected row	Selects only that row
No SelectionPlugin loaded	selectedRows = [rowIndex]
Right-click on header	selectedRows = []

This uses the plugin query system for loose coupling — no hard dependency on SelectionPlugin.

Conditional Items

features: {
  contextMenu: {
    items: [
      {
        id: 'edit',
        name: 'Edit',
        hidden: (params) => params.column.editable !== true,
      },
      {
        id: 'delete',
        name: 'Delete',
        disabled: (params) => params.row.locked === true,
      },
    ],
  },
},

Events

Right-click on cells or headers to open the context menu.

Event Log: Clear

Event	Detail	Description
context-menu-open	{ params, items }	Menu opened

Styling

The context menu supports CSS custom properties for theming. Override these on tbw-grid or a parent container:

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-border	var(--tbw-color-border)	Menu border
--tbw-context-menu-hover	var(--tbw-color-row-hover)	Item hover background
--tbw-menu-min-width	10rem	Minimum menu width
--tbw-menu-item-padding	0.375rem 0.75rem	Menu item padding
--tbw-menu-item-gap	0.5rem	Gap between icon and label
--tbw-font-size-sm	0.9285em	Menu font size
--tbw-font-size-xs	0.7857em	Shortcut text size
--tbw-icon-size	1em	Icon width

Example

tbw-grid {
  /* Custom context menu styling */
  --tbw-context-menu-bg: #2d2d2d;
  --tbw-context-menu-fg: #ffffff;
  --tbw-context-menu-border: #444444;
  --tbw-context-menu-hover: #3d3d3d;
  --tbw-menu-item-padding: 0.5rem 1rem;
}

CSS Classes

The menu uses these class names for advanced customization:

Class	Element
.tbw-context-menu	Menu container
.tbw-context-menu-item	Menu item row
.tbw-context-menu-item.disabled	Disabled item
.tbw-context-menu-item.danger	Danger/delete action
.tbw-context-menu-icon	Item icon container
.tbw-context-menu-label	Item label text
.tbw-context-menu-shortcut	Keyboard shortcut
.tbw-context-menu-separator	Divider line

See Also

• Selection — Row and cell selection
• Editing — Inline cell editing
• Clipboard — Copy/paste cells