Custom context menu actions

In this tutorial, you will add custom items to the Handsontable right-click context menu. You will learn how to define custom actions alongside built-in menu items and how to control which built-in items appear.

1
/* file: app.component.ts */
2
import { Component, ViewChild } from '@angular/core';
3
import { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';
4
import { RowObject } from 'handsontable/common';
5

6
/* start:skip-in-preview */
7
const data: RowObject[] = [
8
  { task: 'Deploy API v2', assignee: 'Alice Chen', status: 'In Progress', priority: 'High', dueDate: '2026-05-10' },
9
  { task: 'Write unit tests', assignee: 'Bob Smith', status: 'To Do', priority: 'Medium', dueDate: '2026-05-15' },
10
  { task: 'Review PR #142', assignee: 'Carol Davis', status: 'Done', priority: 'Low', dueDate: '2026-04-30' },
11
  { task: 'Fix login timeout', assignee: 'David Lee', status: 'In Progress', priority: 'High', dueDate: '2026-05-08' },
12
  { task: 'Update SSL certs', assignee: 'Eve Martin', status: 'To Do', priority: 'Urgent', dueDate: '2026-05-01' },
13
  { task: 'Migrate DB schema', assignee: 'Frank Wang', status: 'To Do', priority: 'High', dueDate: '2026-05-20' },
14
  { task: 'Refactor auth module', assignee: 'Grace Kim', status: 'In Progress', priority: 'Medium', dueDate: '2026-05-25' },
15
  { task: 'Load test staging', assignee: 'Henry Park', status: 'To Do', priority: 'Low', dueDate: '2026-06-01' },
16
];
17
/* end:skip-in-preview */
18

19
const flaggedRows = new Set<number>();
20

21
@Component({
22
  standalone: true,
23
  imports: [HotTableModule],
24
  selector: 'example1-custom-context-menu',
25
  template: `
26
    <div>
27
      <hot-table [data]="data" [settings]="gridSettings"></hot-table>
28
    </div>
29
  `,
30
})
31
export class AppComponent {
32
  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;
33

34
  readonly data: RowObject[] = data;
35

36
  readonly gridSettings: GridSettings = {
37
    rowHeaders: true,
38
    colHeaders: ['Task', 'Assignee', 'Status', 'Priority', 'Due Date'],
39
    columns: [
40
      { data: 'task', width: 200 },
41
      { data: 'assignee', width: 130 },
42
      { data: 'status', width: 110 },
43
      { data: 'priority', width: 90 },
44
      { data: 'dueDate', width: 110 },
45
    ],
46
    height: 'auto',
47
    width: '100%',
48
    autoWrapRow: true,
49
    cells(row: number) {
50
      if (flaggedRows.has(row)) {
51
        return { className: 'ht-flagged-row' };
52
      }
53
      return {};
54
    },
55
    contextMenu: {
56
      items: {
57
        duplicate_row: {
58
          name: 'Duplicate row',
59
          callback: (_key: string, selection: Array<{ start: { row: number } }>) => {
60
            const hot = this.hotTable?.hotInstance;
61

62
            if (!hot) return;
63

64
            const row = selection[0].start.row;
65
            const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row)) as Record<string, unknown>;
66

67
            hot.alter('insert_row_below', row, 1);
68
            hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);
69
          },
70
        },
71
        flag_row: {
72
          name: (): string => {
73
            const row = this.hotTable?.hotInstance?.getSelectedRangeLast()?.from.row;
74

75
            return flaggedRows.has(row as number) ? 'Unflag row' : 'Flag row';
76
          },
77
          callback: (_key: string, selection: Array<{ start: { row: number } }>) => {
78
            const hot = this.hotTable?.hotInstance;
79

80
            if (!hot) return;
81

82
            const row = selection[0].start.row;
83

84
            if (flaggedRows.has(row)) {
85
              flaggedRows.delete(row);
86
            } else {
87
              flaggedRows.add(row);
88
            }
89

90
            hot.render();
91
          },
92
        },
93
        copy_row_as_json: {
94
          name: 'Copy row as JSON',
95
          callback: (_key: string, selection: Array<{ start: { row: number } }>) => {
96
            const hot = this.hotTable?.hotInstance;
97

98
            if (!hot) return;
99

100
            const row = selection[0].start.row;
101
            const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row));
102

103
            navigator.clipboard.writeText(JSON.stringify(rowData));
104
          },
105
        },
106
        sep1: { name: '---------' },
107
        row_above: { name: 'Insert row above' },
108
        row_below: { name: 'Insert row below' },
109
        remove_row: { name: 'Remove row' },
110
        sep2: { name: '---------' },
111
        undo: { name: 'Undo' },
112
        redo: { name: 'Redo' },
113
      },
114
    },
115
  };
116
}
117
/* end-file */
118

119
/* file: app.config.ts */
120
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
121
import { registerAllModules } from 'handsontable/registry';
122
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
123

124
registerAllModules();
125

126
export const appConfig: ApplicationConfig = {
127
  providers: [
128
    provideZoneChangeDetection({ eventCoalescing: true }),
129
    {
130
      provide: HOT_GLOBAL_CONFIG,
131
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
132
    },
133
  ],
134
};
135
/* end-file */

1
<div>
2
  <example1-custom-context-menu></example1-custom-context-menu>
3
</div>

1
td.ht-flagged-row {
2
  background-color: #fff9c4 !important;
3
}

Overview

Difficulty: Beginner Time: ~15 minutes

Handsontable’s context menu supports fully custom items alongside built-in ones. This recipe shows you how to add three practical actions — Duplicate row, Flag row, and Copy row as JSON — and how to keep only the built-in items you want.

What You’ll Build

A project-task grid where right-clicking a row reveals:

Duplicate row - inserts an exact copy of the row directly below the selected one.
Flag row / Unflag row - toggles a yellow highlight on the row to mark it for attention.
Copy row as JSON - writes the row’s data as a JSON string to the clipboard.
A separator line dividing custom actions from built-in row operations.
A curated set of built-in items (insert row above/below, remove row, undo, redo) with column-insert items removed.

Before you begin

You need a working Handsontable instance. If you are starting fresh, install it first:

1
npm install handsontable

Then import and register all modules:

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

4
registerAllModules();

Set up the data and the flagged-row tracker
```
1
const data = [
2
  { task: 'Deploy API v2', assignee: 'Alice Chen', status: 'In Progress', priority: 'High', dueDate: '2026-05-10' },
3
  // ...more rows
4
];
5

6
const flaggedRows = new Set();
```
What’s happening:
- data is an array of row objects. Each object maps to one row in the grid.
- flaggedRows is a JavaScript Set that tracks which visual row indexes are currently flagged. A Set gives you O(1) add, delete, and lookup, which keeps the cells callback fast even with many rows.
Apply per-row CSS via the cells callback
```
1
const hot = new Handsontable(container, {
2
  // ...
3
  cells(row) {
4
    if (flaggedRows.has(row)) {
5
      return { className: 'ht-flagged-row' };
6
    }
7
  },
8
  // ...
9
});
```
What’s happening:
- Handsontable calls cells(row, col, prop) for every cell it renders. Returning an object from this callback merges its properties into the cell’s meta.
- Returning { className: 'ht-flagged-row' } tells Handsontable to add that CSS class to the <td> element of every cell in the flagged row.
- The CSS file defines .ht-flagged-row { background-color: #fff9c4 !important; }, which produces the yellow highlight.
- Because cells is called on every render, toggling a row in flaggedRows and then calling hot.render() is all you need — no direct DOM manipulation required.
Configure the context menu with custom items
```
1
contextMenu: {
2
  items: {
3
    duplicate_row: { name: 'Duplicate row', callback(key, selection) { ... } },
4
    flag_row:      { name() { ... }, callback(key, selection) { ... } },
5
    copy_row_as_json: { name: 'Copy row as JSON', callback(key, selection) { ... } },
6
    sep1: '-',
7
    row_above: { name: 'Insert row above' },
8
    row_below: { name: 'Insert row below' },
9
    remove_row: { name: 'Remove row' },
10
    sep2: '-',
11
    undo: { name: 'Undo' },
12
    redo: { name: 'Redo' },
13
  },
14
},
```
What’s happening:
- Passing an object to contextMenu.items gives you full control. The keys you list are the only items that appear — anything omitted (including col_left and col_right) is hidden.
- Custom items use any key string that does not clash with built-in keys. Here, duplicate_row, flag_row, and copy_row_as_json are all user-defined.
- Built-in items (row_above, row_below, remove_row, undo, redo) can be re-declared with a custom name to override the label, or listed as-is to use the default label.
- '-' (a string with a single hyphen) is the built-in separator token. Any key that maps to '-' renders as a visual divider.
Implement “Duplicate row”
```
1
duplicate_row: {
2
  name: 'Duplicate row',
3
  callback(key, selection) {
4
    const row = selection[0].start.row;
5
    const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row));
6

7
    hot.alter('insert_row_below', row, 1);
8
    hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);
9
  },
10
},
```
What’s happening:
1. selection[0].start.row is the visual row index of the right-clicked cell.
2. hot.toPhysicalRow(row) converts the visual index to a physical one. This is needed because sorting or filtering can reorder rows; getSourceDataAtRow expects a physical index.
3. hot.getSourceDataAtRow(physicalRow) returns the raw source object (e.g., { task: '...', assignee: '...' }).
4. hot.alter('insert_row_below', row, 1) inserts one empty row directly below the clicked row.
5. hot.populateFromArray(row + 1, 0, [Object.values(rowData)]) fills that new row with the original row’s values. populateFromArray expects a 2-D array, so you wrap Object.values(rowData) in an outer array.
Implement “Flag row”
```
1
flag_row: {
2
  name() {
3
    const row = this.getSelectedRangeLast()?.from.row;
4

5
    return flaggedRows.has(row) ? 'Unflag row' : 'Flag row';
6
  },
7
  callback(key, selection) {
8
    const row = selection[0].start.row;
9

10
    if (flaggedRows.has(row)) {
11
      flaggedRows.delete(row);
12
    } else {
13
      flaggedRows.add(row);
14
    }
15

16
    hot.render();
17
  },
18
},
```
What’s happening:
- name can be a function. Handsontable calls it each time the menu opens, so the label updates dynamically. Inside name, this is the context menu instance; this.getSelectedRangeLast()?.from.row reads the hovered row to show the correct label (“Flag row” or “Unflag row”) before the user clicks.
- In callback, you add or remove the row from flaggedRows, then call hot.render(). The re-render triggers the cells callback, which returns className: 'ht-flagged-row' for flagged rows and nothing for unflagged ones, so the highlight appears or disappears immediately.
Implement “Copy row as JSON”
```
1
copy_row_as_json: {
2
  name: 'Copy row as JSON',
3
  callback(key, selection) {
4
    const row = selection[0].start.row;
5
    const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row));
6

7
    navigator.clipboard.writeText(JSON.stringify(rowData));
8
  },
9
},
```
What’s happening:
- JSON.stringify(rowData) serializes the source object for that row (e.g., {"task":"Deploy API v2","assignee":"Alice Chen",...}).
- navigator.clipboard.writeText(...) writes the string to the system clipboard asynchronously. It requires a secure context (HTTPS or localhost) and returns a Promise; you can add .catch(...) to handle permission errors in production.

How It Works - Complete Flow

User right-clicks a cell. Handsontable opens the context menu and calls each item’s name function (if it is a function) to render labels.
The menu shows the three custom items, a separator, and the selected built-in items. Column-insert items are absent because they were not listed.
Duplicate row: alter shifts existing rows down, then populateFromArray copies the source data into the new row.
Flag row / Unflag row: The flaggedRows Set is updated, hot.render() fires the cells callback for every visible cell, and the CSS class is added or removed.
Copy row as JSON: Source data is serialized and written to the clipboard without modifying the grid.

What you learned

Pass an object to contextMenu.items to control exactly which items appear. Omitted keys — including built-in ones like col_left — are hidden.
Use a string key like 'duplicate_row' for custom items. The key must not clash with built-in keys.
callback(key, selection) receives the item key and an array of selection ranges. selection[0].start.row gives you the right-clicked visual row.
Convert visual to physical row with hot.toPhysicalRow(row) before calling hot.getSourceDataAtRow().
Use name as a function to return a dynamic label based on current state.
The cells callback + hot.render() is the idiomatic way to apply per-row styling without touching the DOM directly.
'-' as an item value inserts a visual separator.

Next steps

Add a disabled() function to any item to make it conditionally unavailable. Return true to grey out the item and prevent its callback from firing.
Explore the Context menu guide for the full list of built-in item keys and advanced configuration.
To add the same custom actions to the column dropdown menu, configure dropdownMenu.items using the same structure.

Custom context menu actions

Overview

What You’ll Build

Before you begin

Set up the data and the flagged-row tracker

Apply per-row CSS via the cells callback

Configure the context menu with custom items

Implement “Duplicate row”

Implement “Flag row”

Implement “Copy row as JSON”

How It Works - Complete Flow

What you learned

Next steps

Apply per-row CSS via the `cells` callback