Angular Spreadsheet Context Menu
The Spreadsheet context menu provides extensive capabilities identical to what Microsoft Excel has to offer. For example, you can copy and paste content from the clipboard directly into cells, or you can fine-tune the visibility of rows and columns.
The available options in the context menu vary depending on your current selection.
The following example demonstrates the Spreadsheet context menu in action. Right-click a cell, a column header, or row header to see the available options.
Context Menu Items in Cell
The following table lists the context menu items that are available, regardless of your current cell, row, or column selection.
| Option | Description |
|---|---|
| Copy | Copies the selected cells or content to the clipboard. |
| Cut | Cuts the selected cells or content to the clipboard. |
| Paste | Pastes the clipboard contents into the selected cells. |
| Merge all | Merges the selected cells into a single cell. |
| Merge vertically | Merges the selected cells vertically. |
| Merge horizontally | Merges the selected cells horizontally. |
| Insert link | Inserts a hyperlink into selected cells. |
Context Menu Items in Column Header
The following context menu items are available when you right-click a column header (in addition to the cell items):
| Column-only option | Description |
|---|---|
| Add column left | Adds a column to the left of the selected columns. |
| Add column right | Adds a column to the right of the selected columns. |
| Delete column | Deletes the selected columns. |
| Hide column | Hides the selected columns from view. |
| Unhide column | Shows the previously hidden column. |
Context Menu Items in Row Header
The following context menu items are available when you right-click a row header (in addition to the cell items):
| Row-only option | Description |
|---|---|
| Add row above | Adds a row above the selected rows. |
| Add row below | Adds a row below the selected rows. |
| Delete row | Deletes the selected rows. |
| Hide row | Hides the selected rows from view. |
| Unhide row | Shows the previously hidden rows. |
Customizing the Context Menu
The contextMenu event gives you full control over the Spreadsheet context menu. It fires before the menu opens, so you can inspect and modify the items array before it renders. The SpreadsheetContextMenuEvent also exposes the current selection and the targetType, which identifies what the user right-clicked.
These capabilities allow you to customize the context menu in various ways:
Adding Custom Items
Adding custom items lets you extend the context menu with actions specific to your application's data or workflow. To achieve this, add a new SpreadsheetContextMenuItem to the items array in the contextMenu event handler, set type to 'custom', and provide an action callback. The callback receives a ContextMenuArgs object when the user selects the item.
The targetType property identifies what the user right-clicked—a cell, a row header, or a column header. Use it to show items only in the context where they make sense.
The example below adds context-aware items to the cell menu—Highlight, Insert Date, Clear Formatting, and a conditional Format as Currency or Convert to Uppercase based on the cell value. The column header menu includes the Bold Column and Clear Column items.
Reordering and Modifying Default Items
To reorder the default menu items, rearrange the items array in the contextMenu event handler. Use the type property to find an existing item and use it as an insertion anchor for custom items. You can also add separators by including an item with { type: 'separator' } set to visually group related actions.
In the example below, Cut appears before Copy, a separator groups the clipboard actions, and a custom Clear Cells item follows.
Replacing All Context Menu Items
Assign a new array to the items property in the contextMenu event handler to replace the default context menu entirely. This approach works well when the default items are not relevant for a particular context and you want a focused, task-specific menu.
The example below replaces the default cell context menu with only the clipboard actions and a custom Clear Formatting item. Right-click any cell to see the result.
Preventing the Context Menu from Opening
Call preventDefault() on the contextMenuevent to stop the context menu from opening. Check targetType, the selected range, or any custom condition to apply this selectively.
The example below blocks the context menu for cells that contain a number. Right-click a numeric cell to confirm, then right-click a text cell to see the default menu.