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

This page covers a non-latest version of Handsontable.

# DropdownMenu

# Description

This plugin creates the Handsontable Dropdown 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).

or array of any available strings:

  • ["row_above", "row_below", "col_left", "col_right", "remove_row", "remove_col", "---------", "undo", "redo"].

See the dropdown menu demo for examples.


const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: data,
  colHeaders: true,
  // enable dropdown menu
  dropdownMenu: true

// or
const hot = new Handsontable(container, {
  data: data,
  colHeaders: true,
  // enable and configure dropdown menu
  dropdownMenu: ['remove_col', '---------', 'make_read_only', 'alignment']

# Options

Source code (opens new window)

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

The dropdownMenu option configures the DropdownMenu plugin.

You can set the dropdownMenu option to one of the following:

Setting Description
false Disable the DropdownMenu plugin
true - Enable the DropdownMenu plugin
- Use the default context menu options
An array - Enable the DropdownMenu plugin
- Modify individual context menu options
An object - Enable the DropdownMenu plugin
- Apply a custom dropdown menu configuration

Read more:

Default: undefined Example

// enable the `DropdownMenu` plugin
// use the default context menu options
dropdownMenu: true,

// enable the `DropdownMenu` plugin
// and modify individual context menu options
dropdownMenu: ['row_above', 'row_below', '---------', 'undo', 'redo'],

// enable the `DropdownMenu` plugin
// and apply a custom dropdown menu configuration
dropdownMenu: {
  items: {
    'option1': {
      name: 'option1'
    'option2': {
      name: 'option2',
      submenu: {
        items: [
            key: 'option2:suboption1',
            name: 'option2:suboption1',
            callback(key, options) {

# Members


Source code (opens new window)

DropdownMenu.DEFAULT_ITEMS ⇒ Array

Default menu items order when dropdownMenu is enabled by setting the config item to true.

# Methods

# close

Source code (opens new window)


Closes dropdown 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.

Emits: Hooks#event:afterDropdownMenuDefaultOptions, Hooks#event:beforeDropdownMenuSetItems

# executeCommand

Source code (opens new window)

dropdownMenu.executeCommand(commandName, ...params)

Executes 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 Command name to execute.
...params * Additional parameters passed to the command executor.

# isEnabled

Source code (opens new window)

dropdownMenu.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 DropdownMenu#enablePlugin method is called.

# open

Source code (opens new window)

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

Emits: Hooks#event:beforeDropdownMenuShow, Hooks#event:afterDropdownMenuShow

Param Type Description
position object
An object with pageX and pageY properties which contains values relative to the top left of the fully rendered content area in the browser or with clientX and clientY properties which contains values relative to the upper left edge of the content area (the viewport) of the browser window. This object is structurally compatible with native mouse event so it can be used either.

# updatePlugin

Source code (opens new window)


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

Last Updated: Apr 19, 2024