Class: DropdownMenu

DropdownMenu

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.

Example
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']
});

Members

staticDropdownMenu.DEFAULT_ITEMS

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

Methods

close()

Closes dropdown menu.

destroy()

Destroys the plugin instance.

disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin()

Enables the plugin functionality for this Handsontable instance.

Fires:

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.

Parameters:
Name Type Description
commandName String

Command name to execute.

params * repeatable

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.

Returns: {Boolean}

open(position)

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

Parameters:
Name Type Description
position Object | Event

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.

Fires:

updatePlugin()

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