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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example1',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
18
    ['2017', 10, 11, 12, 13, 15, 16],
19
    ['2018', 10, 11, 12, 13, 15, 16],
20
    ['2019', 10, 11, 12, 13, 15, 16],
21
    ['2020', 10, 11, 12, 13, 15, 16],
22
    ['2021', 10, 11, 12, 13, 15, 16],
23
  ];
24

25
  readonly hotSettings: GridSettings = {
26
    rowHeaders: true,
27
    colHeaders: true,
28
    contextMenu: true,
29
    height: 'auto',
30
    autoWrapRow: true,
31
    autoWrapCol: true,
32
  };
33
}
34
/* end-file */
35

36

37
/* file: app.module.ts */
38
import { NgModule, ApplicationConfig } from '@angular/core';
39
import { BrowserModule } from '@angular/platform-browser';
40
import { registerAllModules } from 'handsontable/registry';
41
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
42
import { CommonModule } from '@angular/common';
43
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
44

45
/* start:skip-in-compilation */
46
import { AppComponent } from './app.component';
47
/* end:skip-in-compilation */
48

49
// register Handsontable's modules
50
registerAllModules();
51

52
export const appConfig: ApplicationConfig = {
53
  providers: [
54
    {
55
      provide: HOT_GLOBAL_CONFIG,
56
      useValue: {
57
        license: NON_COMMERCIAL_LICENSE,
58
      } as HotGlobalConfig
59
    }
60
  ],
61
};
62

63
@NgModule({
64
  imports: [ BrowserModule, HotTableModule, CommonModule ],
65
  declarations: [ AppComponent ],
66
  providers: [...appConfig.providers],
67
  bootstrap: [ AppComponent ]
68
})
69

70
export class AppModule { }
71
/* end-file */

1
<div>
2
    <app-example1></app-example1>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example2',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
18
    ['2017', 10, 11, 12, 13, 15, 16],
19
    ['2018', 10, 11, 12, 13, 15, 16],
20
    ['2019', 10, 11, 12, 13, 15, 16],
21
    ['2020', 10, 11, 12, 13, 15, 16],
22
    ['2021', 10, 11, 12, 13, 15, 16],
23
  ];
24

25
  readonly hotSettings: GridSettings = {
26
    rowHeaders: true,
27
    colHeaders: true,
28
    contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],
29
    height: 'auto',
30
    autoWrapRow: true,
31
    autoWrapCol: true,
32
  };
33
}
34
/* end-file */
35

36

37
/* file: app.module.ts */
38
import { NgModule, ApplicationConfig } from '@angular/core';
39
import { BrowserModule } from '@angular/platform-browser';
40
import { registerAllModules } from 'handsontable/registry';
41
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
42
import { CommonModule } from '@angular/common';
43
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
44

45
/* start:skip-in-compilation */
46
import { AppComponent } from './app.component';
47
/* end:skip-in-compilation */
48

49
// register Handsontable's modules
50
registerAllModules();
51

52
export const appConfig: ApplicationConfig = {
53
  providers: [
54
    {
55
      provide: HOT_GLOBAL_CONFIG,
56
      useValue: {
57
        license: NON_COMMERCIAL_LICENSE,
58
      } as HotGlobalConfig
59
    }
60
  ],
61
};
62

63
@NgModule({
64
  imports: [ BrowserModule, HotTableModule, CommonModule ],
65
  declarations: [ AppComponent ],
66
  providers: [...appConfig.providers],
67
  bootstrap: [ AppComponent ]
68
})
69

70
export class AppModule { }
71
/* end-file */

1
<div>
2
  <app-example2></app-example2>
3
</div>

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
/* file: app.component.ts */
2
import { Component, OnInit } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example3',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent implements OnInit {
15

16
  readonly hotData = [
17
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
18
    ['2017', 10, 11, 12, 13, 15, 16],
19
    ['2018', 10, 11, 12, 13, 15, 16],
20
    ['2019', 10, 11, 12, 13, 15, 16],
21
    ['2020', 10, 11, 12, 13, 15, 16],
22
    ['2021', 10, 11, 12, 13, 15, 16],
23
  ];
24

25
  hotSettings!: GridSettings;
26

27

28
  ngOnInit() {
29
    const contextMenuSettings = {
30
      callback(key: string, selection: any, clickEvent: any) {
31
        // Common callback for all options
32
        console.log(key, selection, clickEvent);
33
      },
34
      items: {
35
        row_above: {
36
          disabled(): boolean {
37
            // `disabled` can be a boolean or a function
38
            // Disable option when first row was clicked
39
            // @ts-ignore
40
            return this.getSelectedLast()?.[0] === 0; // `this` === hot
41
          },
42
        },
43
        // A separator line can also be added like this:
44
        // 'sp1': '---------'
45
        // and the key has to be unique
46
        sp1: { name: '---------' },
47
        row_below: {
48
          name: 'Click to add row below',
49
        },
50
        about: {
51
          // Own custom option
52
          name() {
53
            // `name` can be a string or a function
54
            return '<b>Custom option</b>'; // Name can contain HTML
55
          },
56
          hidden(): boolean {
57
            // `hidden` can be a boolean or a function
58
            // Hide the option when the first column was clicked
59
            // @ts-ignore
60
            return this.getSelectedLast()?.[1] == 0; // `this` === hot
61
          },
62
          callback() {
63
            // Callback for specific option
64
            setTimeout(() => {
65
              alert('Hello world!'); // Fire alert after menu close (with timeout)
66
            }, 0);
67
          },
68
        },
69
        colors: {
70
          // Own custom option
71
          name: 'Colors...',
72
          submenu: {
73
            // Custom option with submenu of items
74
            items: [
75
              {
76
                // Key must be in the form 'parent_key:child_key'
77
                key: 'colors:red',
78
                name: 'Red',
79
                callback() {
80
                  setTimeout(() => {
81
                    alert('You clicked red!');
82
                  }, 0);
83
                },
84
              },
85
              { key: 'colors:green', name: 'Green' },
86
              { key: 'colors:blue', name: 'Blue' },
87
            ],
88
          },
89
        },
90
        credits: {
91
          // Own custom property
92
          // Custom rendered element in the context menu
93
          renderer() {
94
            const elem = document.createElement('marquee');
95

96
            elem.style.cssText = 'background: lightgray; color: #222222;';
97
            elem.textContent = 'Brought to you by...';
98

99
            return elem;
100
          },
101
          disableSelection: true,
102
          isCommand: false,
103
        },
104
      },
105
    };
106

107
    this.hotSettings = {
108
      rowHeaders: true,
109
      colHeaders: true,
110
      licenseKey: 'non-commercial-and-evaluation',
111
      height: 'auto',
112
      contextMenu: contextMenuSettings,
113
      autoWrapRow: true,
114
      autoWrapCol: true,
115
    }
116
  }
117
}
118
/* end-file */
119

120

121
/* file: app.module.ts */
122
import { NgModule, ApplicationConfig } from '@angular/core';
123
import { BrowserModule } from '@angular/platform-browser';
124
import { registerAllModules } from 'handsontable/registry';
125
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
126
import { CommonModule } from '@angular/common';
127
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
128

129
/* start:skip-in-compilation */
130
import { AppComponent } from './app.component';
131
/* end:skip-in-compilation */
132

133
// register Handsontable's modules
134
registerAllModules();
135

136
export const appConfig: ApplicationConfig = {
137
  providers: [
138
    {
139
      provide: HOT_GLOBAL_CONFIG,
140
      useValue: {
141
        license: NON_COMMERCIAL_LICENSE,
142
      } as HotGlobalConfig
143
    }
144
  ],
145
};
146

147
@NgModule({
148
  imports: [ BrowserModule, HotTableModule, CommonModule ],
149
  declarations: [ AppComponent ],
150
  providers: [...appConfig.providers],
151
  bootstrap: [ AppComponent ]
152
})
153

154
export class AppModule { }
155
/* end-file */

1
<div>
2
  <app-example3></app-example3>
3
</div>

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	✓	✗