React Data Grid 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.
Example
<HotTable
data={data}
comments={true}
// enable and configure dropdown menu
dropdownMenu={['remove_col', '---------', 'make_read_only', 'alignment']}
/>
Options
dropdownMenu 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: 'Option 1'
},
'option2': {
name: 'Option 2',
submenu: {
items: [
{
key: 'option2:suboption1',
name: 'Suboption 1',
callback(key, options) {
...
}
},
...
]
}
}
}
},
Members
DEFAULT_ITEMS 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)
dropdownMenu.close()
Closes dropdown menu.
destroy Source code (opens new window)
dropdownMenu.destroy()
Destroys the plugin instance.
disablePlugin Source code (opens new window)
dropdownMenu.disablePlugin()
Disables the plugin functionality for this Handsontable instance.
enablePlugin Source code (opens new window)
dropdownMenu.enablePlugin()
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.
The executeCommand()
method works only for selected cells.
When no cells are selected, executeCommand()
doesn't do anything.
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
then the DropdownMenu#enablePlugin method is called.
open Source code (opens new window)
dropdownMenu.open(position, offset)
Opens menu and re-position it based on the passed coordinates.
Emits: Hooks#event:beforeDropdownMenuShow
, Hooks#event:afterDropdownMenuShow
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 (opens new window)
dropdownMenu.updatePlugin()
Updates the plugin's state.
This method is executed when updateSettings()
is invoked with any of the following configuration options: