This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# ContextMenu

# Description

This plugin creates the Handsontable Context Menu. It allows to create a new row or column at any place in the grid among other features. Possible values:

  • true (to enable default options),
  • false (to disable completely)
  • { uiContainer: containerDomElement } (to declare a container for all of the Context Menu's dom elements to be placed in).

or array of any available strings:

  • 'row_above'
  • 'row_below'
  • 'col_left'
  • 'col_right'
  • 'remove_row'
  • 'remove_col'
  • 'undo'
  • 'redo'
  • 'make_read_only'
  • 'alignment'
  • '---------' (menu item separator)
  • 'borders' (with Options#customBorders turned on)
  • 'commentsAddEdit' (with Options#comments turned on)
  • 'commentsRemove' (with Options#comments turned on).

See the context menu demo for examples.


// as a boolean
contextMenu: true
// as a array
contextMenu: ['row_above', 'row_below', '---------', 'undo', 'redo']

# Options

# contextMenu

Source code (opens new window)

contextMenu.contextMenu : boolean | Array<string> | object

Defines if the right-click context menu should be enabled. Context menu allows to create new row or column at any place in the grid among other features. Possible values:

If the value is an object, you can also customize the options with:

  • disableSelection - a boolean, if set to true it prevents mouseover from highlighting the item for selection
  • isCommand - a boolean, if set to false it prevents clicks from executing the command and closing the menu.

See the context menu demo for examples.

Default: undefined Example

// as a boolean
contextMenu: true,

// as an array
contextMenu: ['row_above', 'row_below', '---------', 'undo', 'redo'],

// as an object (`name` attribute is required in the custom keys)
contextMenu: {
  items: {
    "option1": {
      name: "option1"
    "option2": {
      name: "option2",
      submenu: {
        items: [
            key: "option2:suboption1",
            name: "option2:suboption1",
            callback: function(key, options) {

# Members


Source code (opens new window)

ContextMenu.DEFAULT_ITEMS ⇒ Array<string>

Context menu default items order when contextMenu options is set as true.

# Methods

# close

Source code (opens new window)


Closes the menu.

# destroy

Source code (opens new window)


Destroys the plugin instance.

# disablePlugin

Source code (opens new window)


Disables the plugin functionality for this Handsontable instance.

# enablePlugin

Source code (opens new window)


Enables the plugin functionality for this Handsontable instance.

# executeCommand

Source code (opens new window)

contextMenu.executeCommand(commandName, ...params)

Execute context menu command.

You can execute all predefined commands:

  • 'row_above' - Insert row above
  • 'row_below' - Insert row below
  • 'col_left' - Insert column left
  • 'col_right' - Insert column right
  • 'clear_column' - Clear selected column
  • 'remove_row' - Remove row
  • 'remove_col' - Remove column
  • 'undo' - Undo last action
  • 'redo' - Redo last action
  • 'make_read_only' - Make cell read only
  • 'alignment:left' - Alignment to the left
  • 'alignment:top' - Alignment to the top
  • 'alignment:right' - Alignment to the right
  • 'alignment:bottom' - Alignment to the bottom
  • 'alignment:middle' - Alignment to the middle
  • 'alignment:center' - Alignment to the center (justify).

Or you can execute command registered in settings where key is your command name.

Param Type Description
commandName string The command name to be executed.
...params * Additional paramteres passed to command executor module.

# isEnabled

Source code (opens new window)

contextMenu.isEnabled() ⇒ boolean

Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInit hook and if it returns true than the ContextMenu#enablePlugin method is called.

# open

Source code (opens new window)

Opens menu and re-position it based on the passed coordinates.

Param Type Description
event Event The mouse event object.

# updatePlugin

Source code (opens new window)


Updates the plugin state. This method is executed when Core#updateSettings is invoked.

Last Updated: Apr 12, 2024