DropdownMenu

Plugin: DropdownMenu

Description

This plugin creates the Handsontable Dropdown Menu. It allows to create a new 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:

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

See the dropdown menu demo for examples.

Example

<HotTable
  data={data}
  comments={true}
  // enable and configure dropdown menu
  dropdownMenu={['remove_col', '---------', 'make_read_only', 'alignment']}
/>

Options

dropdownMenu

Source code

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

This option can only be set at the grid level. It is not possible to show or hide the dropdown menu icon for individual columns using this option.

Read more:

• Context menu
• Plugins: DropdownMenu

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: ['---------', 'undo', 'redo'],

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

Members

DEFAULT_ITEMS

Source code

DropdownMenu.DEFAULT_ITEMS ⇒ Array

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

Methods

close

Source code

dropdownMenu.close()

Closes dropdown menu.

destroy

Source code

dropdownMenu.destroy()

Destroys the plugin instance.

disablePlugin

Source code

dropdownMenu.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Source code

dropdownMenu.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

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

executeCommand

Source code

dropdownMenu.executeCommand(commandName, …params)

Executes context menu command.

The executeCommand() method works only for selected cells.

When no cells are selected, executeCommand() doesn’t do anything.

You can execute all predefined commands:

• 'col_left' - Insert column left
• 'col_right' - Insert column right
• 'clear_column' - Clear selected column
• '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

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

open

Source code

dropdownMenu.open(position, offset)

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

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

const menu = hot.getPlugin('dropdownMenu');

hot.selectCell(0, 0);
menu.open({ top: 50, left: 50 });

Param	Type	Description
position	Object Event	An object with top and left properties which contains coordinates relative to the browsers viewport (without included scroll offsets). Or if the native event is passed the menu will be positioned based on the pageX and pageY coordinates.
offset	Object	An object allows applying the offset to the menu position.

updatePlugin

Source code

dropdownMenu.updatePlugin()

Updates the plugin’s state.

This method is executed when updateSettings() is invoked with any of the following configuration options:

• dropdownMenu