Context menu

Quickly access contextual actions such as removing rows, inserting columns or copying data, by opening the context menu.

Enable the context menu with the default configuration:

1
contextMenu: true,

To see the context menu, right-click on a cell:

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1');
8

9
new Handsontable(container, {
10
  data: [
11
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
12
    ['2017', 10, 11, 12, 13, 15, 16],
13
    ['2018', 10, 11, 12, 13, 15, 16],
14
    ['2019', 10, 11, 12, 13, 15, 16],
15
    ['2020', 10, 11, 12, 13, 15, 16],
16
    ['2021', 10, 11, 12, 13, 15, 16],
17
  ],
18
  rowHeaders: true,
19
  colHeaders: true,
20
  contextMenu: true,
21
  height: 'auto',
22
  autoWrapRow: true,
23
  autoWrapCol: true,
24
  licenseKey: 'non-commercial-and-evaluation',
25
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1')!;
8

9
new Handsontable(container, {
10
  data: [
11
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
12
    ['2017', 10, 11, 12, 13, 15, 16],
13
    ['2018', 10, 11, 12, 13, 15, 16],
14
    ['2019', 10, 11, 12, 13, 15, 16],
15
    ['2020', 10, 11, 12, 13, 15, 16],
16
    ['2021', 10, 11, 12, 13, 15, 16],
17
  ],
18
  rowHeaders: true,
19
  colHeaders: true,
20
  contextMenu: true,
21
  height: 'auto',
22
  autoWrapRow: true,
23
  autoWrapCol: true,
24
  licenseKey: 'non-commercial-and-evaluation',
25
});

You can define the items in the menu by passing the contextMenu option as an array of keys:

Key	Action and required plugins
`row_above`	Insert a row above
`row_below`	Insert a row below
`col_left`	Insert a column to the left
`col_right`	Insert a column to the right
`---------`	Add a separator to the items in the menu
`remove_row`	Remove the selected row
`remove_col`	Remove the selected column
`clear_column`	Delete the data of the selected columns
`undo`	Undo the last action. Requires: `UndoRedo`
`redo`	Redo the last action. Requires: `UndoRedo`
`make_read_only`	Make the selected cells read-only
`alignment`	Align the text in the cell
`cut`	Cut the contents of the selected cells to the system clipboard. Requires: `CopyPaste`
`copy`	Copy the contents of the selected cells to the system clipboard. Requires: `CopyPaste`
`copy_with_column_headers`	Copy the contents of the selected cells and their nearest column headers. Requires: `CopyPaste` with `copyColumnHeaders` set to `true`
`copy_with_column_group_headers`	Copy the contents of the selected cells and all their related column headers. Requires: `NestedHeaders` and `CopyPaste` with `copyColumnGroupHeaders` set to `true`
`copy_column_headers_only`	Copy the contents of column headers that are nearest to the selected cells. Requires: `CopyPaste` with `copyColumnHeadersOnly` set to `true`
`freeze_column`	Freeze the selected column. Requires: `ManualColumnFreeze`
`unfreeze_column`	Unfreeze the selected column. Requires: `ManualColumnFreeze`
`borders`	Add borders around the selected cells. Requires: `CustomBorders`
`commentsAddEdit`	Add or edit a comment. Requires: `Comments`
`commentsRemove`	Remove the comment. Requires: `Comments`
`commentsReadOnly`	Make the comment read-only. Requires: `Comments`
`mergeCells`	Merge or unmerge the selected cells. Requires: `MergeCells`
`add_child`	Insert a child row. Requires: `NestedRows`
`detach_from_parent`	Detach the selected row from its parent row. Requires: `NestedRows`
`hidden_columns_hide`	Hide the selected columns. Requires: `HiddenColumns`
`hidden_columns_show`	Show the hidden columns. Requires: `HiddenColumns`
`hidden_rows_hide`	Hide the selected rows. Requires: `HiddenRows`
`hidden_rows_show`	Show hidden rows. Requires: `HiddenRows`
`filter_by_condition`	Add the first filter condition. Requires: `Filters`
`filter_by_condition2`	Add the second filter condition. Requires: `Filters`
`filter_operators`	Select a filter parameter. Requires: `Filters`
`filter_by_value`	Add a filter value. Requires: `Filters`
`filter_action_bar`	Apply the configured filter. Requires: `Filters`
`export_file`	Open the Export submenu with “To CSV” and “To Excel” items. Requires: `ExportFile`. The Excel item is hidden when no XLSX engine is configured.

To see the context menu, right-click on a cell:

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example2');
8

9
new Handsontable(container, {
10
  data: [
11
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
12
    ['2017', 10, 11, 12, 13, 15, 16],
13
    ['2018', 10, 11, 12, 13, 15, 16],
14
    ['2019', 10, 11, 12, 13, 15, 16],
15
    ['2020', 10, 11, 12, 13, 15, 16],
16
    ['2021', 10, 11, 12, 13, 15, 16],
17
  ],
18
  rowHeaders: true,
19
  colHeaders: true,
20
  contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],
21
  height: 'auto',
22
  autoWrapRow: true,
23
  autoWrapCol: true,
24
  licenseKey: 'non-commercial-and-evaluation',
25
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example2')!;
8

9
new Handsontable(container, {
10
  data: [
11
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
12
    ['2017', 10, 11, 12, 13, 15, 16],
13
    ['2018', 10, 11, 12, 13, 15, 16],
14
    ['2019', 10, 11, 12, 13, 15, 16],
15
    ['2020', 10, 11, 12, 13, 15, 16],
16
    ['2021', 10, 11, 12, 13, 15, 16],
17
  ],
18
  rowHeaders: true,
19
  colHeaders: true,
20
  contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],
21
  height: 'auto',
22
  autoWrapRow: true,
23
  autoWrapCol: true,
24
  licenseKey: 'non-commercial-and-evaluation',
25
});

To fully customize the context menu, set contextMenu to an object with an items property. Each key in items identifies one menu entry. The value can be:

A predefined item key string such as 'row_above' — includes the built-in item unchanged.
The string '---------' — inserts a horizontal separator line.
A configuration object — defines a custom item or overrides a predefined one.

This means you can freely mix built-in items with custom ones in the same menu:

1
contextMenu: {
2
  // Optional: a shared callback fired on every item click.
3
  callback(key, selection, clickEvent) {
4
    console.log(key, selection, clickEvent);
5
  },
6
  items: {
7
    row_above: {},                   // predefined item, unchanged
8
    sp1: '---------',               // separator
9
    row_below: {
10
      name: 'Click to add row below', // override a predefined item's label
11
    },
12
    myOption: {                      // fully custom item
13
      name: 'My custom action',
14
      callback() { /* ... */ },
15
    },
16
  },
17
},

The top-level object also accepts a uiContainer property (an HTMLElement) to control which DOM element the context menu is appended to.

Each configuration object in items can have these properties:

Option	Description
`key`	The unique identifier for the item. For top-level items, this is the key of the `items` object (for example `'row_above'` or `'myOption'`). For submenu items, it must follow the `parent_key:child_key` format (for example `'colors:red'`).
`name`	The label shown in the menu. Can be a `string` or a function returning a string. Supports HTML. When a function, `this` refers to the Handsontable instance.
`disabled`	Whether the item is grayed out and non-clickable. Can be a `boolean` or a function returning a boolean. When a function, `this` refers to the Handsontable instance.
`hidden`	Whether the item is hidden from the menu entirely. Can be a `boolean` or a function returning a boolean. When a function, `this` refers to the Handsontable instance.
`callback`	A function called when the item is clicked. Receives `key`, `selection`, and `clickEvent` as arguments.
`submenu`	Defines a nested submenu. Takes an object with an `items` array. Each submenu item’s `key` must follow the `parent_key:child_key` format.
`renderer`	A custom function for rendering the item’s HTML. Must return an `HTMLElement`.
`disableSelection`	When `true`, hovering over the item does not highlight it.
`isCommand`	When `false`, clicking the item does not execute a command or close the menu.

The following example shows how to:

Add a shared callback for all options
Dynamically disable an option
Override the label of a predefined option
Add a fully custom option with its own callback
Add a custom option with a submenu
Use a custom renderer

To see the context menu, right-click on a cell:

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const contextMenuSettings = {
8
  callback(key, selection, clickEvent) {
9
    // Common callback for all options
10
    console.log(key, selection, clickEvent);
11
  },
12
  items: {
13
    row_above: {
14
      disabled() {
15
        // `disabled` can be a boolean or a function
16
        // Disable option when first row was clicked
17
        return this.getSelectedLast()?.[0] === 0; // `this` === hot
18
      },
19
    },
20
    // A separator line can also be added like this:
21
    // 'sp1': { name: '---------' }
22
    // and the key has to be unique
23
    sp1: '---------',
24
    row_below: {
25
      name: 'Click to add row below', // Set custom text for predefined option
26
    },
27
    about: {
28
      // Own custom option
29
      name() {
30
        // `name` can be a string or a function
31
        return '<b>Custom option</b>'; // Name can contain HTML
32
      },
33
      hidden() {
34
        // `hidden` can be a boolean or a function
35
        // Hide the option when the first column was clicked
36
        return this.getSelectedLast()?.[1] == 0; // `this` === hot
37
      },
38
      callback() {
39
        // Callback for specific option
40
        setTimeout(() => {
41
          alert('Hello world!'); // Fire alert after menu close (with timeout)
42
        }, 0);
43
      },
44
    },
45
    colors: {
46
      // Own custom option
47
      name: 'Colors...',
48
      submenu: {
49
        // Custom option with submenu of items
50
        items: [
51
          {
52
            // Key must be in the form 'parent_key:child_key'
53
            key: 'colors:red',
54
            name: 'Red',
55
            callback() {
56
              setTimeout(() => {
57
                alert('You clicked red!');
58
              }, 0);
59
            },
60
          },
61
          { key: 'colors:green', name: 'Green' },
62
          { key: 'colors:blue', name: 'Blue' },
63
        ],
64
      },
65
    },
66
    credits: {
67
      // Own custom property
68
      // Custom rendered element in the context menu
69
      renderer() {
70
        const elem = document.createElement('marquee');
71

72
        elem.style.cssText = 'background: lightgray; color: #222222;';
73
        elem.textContent = 'Brought to you by...';
74

75
        return elem;
76
      },
77
      disableSelection: true,
78
      isCommand: false, // Prevent clicks from executing command and closing the menu
79
    },
80
  },
81
};
82

83
const container = document.querySelector('#example3');
84

85
new Handsontable(container, {
86
  data: [
87
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
88
    ['2017', 10, 11, 12, 13, 15, 16],
89
    ['2018', 10, 11, 12, 13, 15, 16],
90
    ['2019', 10, 11, 12, 13, 15, 16],
91
    ['2020', 10, 11, 12, 13, 15, 16],
92
    ['2021', 10, 11, 12, 13, 15, 16],
93
  ],
94
  rowHeaders: true,
95
  colHeaders: true,
96
  licenseKey: 'non-commercial-and-evaluation',
97
  height: 'auto',
98
  contextMenu: contextMenuSettings,
99
  autoWrapRow: true,
100
  autoWrapCol: true,
101
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { DetailedSettings, MenuItemConfig } from 'handsontable/plugins/contextMenu';
4

5
// Register all Handsontable's modules.
6
registerAllModules();
7

8
const contextMenuSettings: DetailedSettings = {
9
  callback(key, selection, clickEvent) {
10
    // Common callback for all options
11
    console.log(key, selection, clickEvent);
12
  },
13
  items: {
14
    row_above: {
15
      disabled() {
16
        // `disabled` can be a boolean or a function
17
        // Disable option when first row was clicked
18
        return this.getSelectedLast()?.[0] === 0; // `this` === hot
19
      },
20
    },
21
    // A separator line can also be added like this:
22
    // 'sp1': { name: '---------' }
23
    // and the key has to be unique
24
    sp1: '---------' as MenuItemConfig,
25
    row_below: {
26
      name: 'Click to add row below', // Set custom text for predefined option
27
    },
28
    about: {
29
      // Own custom option
30
      name() {
31
        // `name` can be a string or a function
32
        return '<b>Custom option</b>'; // Name can contain HTML
33
      },
34
      hidden() {
35
        // `hidden` can be a boolean or a function
36
        // Hide the option when the first column was clicked
37
        return this.getSelectedLast()?.[1] == 0; // `this` === hot
38
      },
39
      callback() {
40
        // Callback for specific option
41
        setTimeout(() => {
42
          alert('Hello world!'); // Fire alert after menu close (with timeout)
43
        }, 0);
44
      },
45
    },
46
    colors: {
47
      // Own custom option
48
      name: 'Colors...',
49
      submenu: {
50
        // Custom option with submenu of items
51
        items: [
52
          {
53
            // Key must be in the form 'parent_key:child_key'
54
            key: 'colors:red',
55
            name: 'Red',
56
            callback() {
57
              setTimeout(() => {
58
                alert('You clicked red!');
59
              }, 0);
60
            },
61
          },
62
          { key: 'colors:green', name: 'Green' },
63
          { key: 'colors:blue', name: 'Blue' },
64
        ],
65
      },
66
    },
67
    credits: {
68
      // Own custom property
69
      // Custom rendered element in the context menu
70
      renderer() {
71
        const elem = document.createElement('marquee');
72

73
        elem.style.cssText = 'background: lightgray; color: #222222;';
74
        elem.textContent = 'Brought to you by...';
75

76
        return elem;
77
      },
78
      disableSelection: true, // Prevent mouseoever from highlighting the item for selection
79
      isCommand: false, // Prevent clicks from executing command and closing the menu
80
    },
81
  },
82
};
83

84
const container = document.querySelector('#example3')!;
85

86
new Handsontable(container, {
87
  data: [
88
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
89
    ['2017', 10, 11, 12, 13, 15, 16],
90
    ['2018', 10, 11, 12, 13, 15, 16],
91
    ['2019', 10, 11, 12, 13, 15, 16],
92
    ['2020', 10, 11, 12, 13, 15, 16],
93
    ['2021', 10, 11, 12, 13, 15, 16],
94
  ],
95
  rowHeaders: true,
96
  colHeaders: true,
97
  licenseKey: 'non-commercial-and-evaluation',
98
  height: 'auto',
99
  contextMenu: contextMenuSettings,
100
  autoWrapRow: true,
101
  autoWrapCol: true,
102
});

Windows	macOS	Action	Excel	Sheets
`Ctrl`+`Shift`+`\` or `Shift`+`F10`	`Cmd`+`Shift`+`\` or `Shift`+`F10`	Open the context menu	✗	✓
Arrow keys	Arrow keys	Move one available menu item up, down, left, or right	✓	✓
`Page Up`	`Page Up`	Move to the first visible item of the context menu or submenu	✓	✗
`Page Down`	`Page Down`	Move to the last visible item of the context menu or submenu	✓	✗
`Escape`	`Escape`	Close the context menu or submenu	✓	✓
`Enter`	`Enter`	Run the action of the selected menu item	✓	✗