Comments

Add a comment (a note) to a cell, using the context menu, just like in Excel. Edit and delete comments. Make comments read-only.

The Comments plugin lets users attach text notes to individual cells. Use it when reviewers need to annotate data without changing cell values.

Enable the plugin

Set the comments configuration option to true to enable the feature and add all the needed context menu items. For example:

1
data = [
2
  ["A1", "B1", "C1"],
3
  ["A2", "B2", "C2"],
4
];
5
settings = {
6
  comments: true,
7
};

1
<hot-table [data]="data" [settings]="settings" />

After you’ve enabled the plugin, the Context Menu gains a few new items:

Add/Edit comment
Delete comment
Read-only comment

Set up pre-set comments

You can also pre-define comments for your table. Comments are stored in the table’s/column’s/cell’s metadata object and you can declare as any value of the respective type. For example:

1
settings = {
2
  cell: [{ row: 1, col: 1, comment: { value: "Hello world!" } }],
3
};

In this example, the comment “Hello world!” is added to the cell at (1,1).

Basic example

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

5
@Component({
6
  selector: 'example1-comments',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent {
14

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

24
  readonly gridSettings: GridSettings = {
25
    rowHeaders: true,
26
    colHeaders: true,
27
    contextMenu: true,
28
    comments: true,
29
    cell: [
30
      { row: 1, col: 1, comment: { value: 'Some comment' } },
31
      { row: 2, col: 2, comment: { value: 'More comments' } },
32
    ],
33
    height: 'auto',
34
    autoWrapRow: true,
35
    autoWrapCol: true
36
  };
37
}
38
/* end-file */
39

40

41
/* file: app.config.ts */
42
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
43
import { registerAllModules } from 'handsontable/registry';
44
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
45

46
// register Handsontable's modules
47
registerAllModules();
48

49
export const appConfig: ApplicationConfig = {
50
  providers: [
51
    provideZoneChangeDetection({ eventCoalescing: true }),
52
    {
53
      provide: HOT_GLOBAL_CONFIG,
54
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
55
    },
56
  ],
57
};
58
/* end-file */

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

Make a comment read-only

By default, all comments are editable. To change this, set the readOnly configuration option to true when adding a comment. This example makes the “Tesla” comment attached to a cell read-only, whereas the “Honda” comment attached to another cell is editable.

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

5
@Component({
6
  selector: 'example2-comments',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent {
14

15
  readonly data = [
16
    ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],
17
    ['2018', 10, 11, 12, 13, 15, 16],
18
    ['2019', 10, 11, 12, 13, 15, 16],
19
    ['2020', 10, 11, 12, 13, 15, 16],
20
  ];
21

22
  readonly gridSettings: GridSettings = {
23
    rowHeaders: true,
24
    colHeaders: true,
25
    contextMenu: true,
26
    comments: true,
27
    cell: [
28
      {
29
        row: 0,
30
        col: 1,
31
        comment: { value: 'A read-only comment.', readOnly: true },
32
      },
33
      { row: 0, col: 3, comment: { value: 'You can edit this comment' } },
34
    ],
35
    height: 'auto',
36
    autoWrapRow: true,
37
    autoWrapCol: true
38
  };
39
}
40
/* end-file */
41

42

43
/* file: app.config.ts */
44
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
45
import { registerAllModules } from 'handsontable/registry';
46
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
47

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

51
export const appConfig: ApplicationConfig = {
52
  providers: [
53
    provideZoneChangeDetection({ eventCoalescing: true }),
54
    {
55
      provide: HOT_GLOBAL_CONFIG,
56
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
57
    },
58
  ],
59
};
60
/* end-file */

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

Set a comment box’s size

To set the width and height of a comment box, use the style parameter.

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

5
@Component({
6
  selector: 'example3-comments',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent {
14

15
  readonly data = [
16
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
17
    ['2017', 10, 11, 12, 13, 15, 16],
18
    ['2018', 10, 11, 12, 13, 15, 16],
19
    ['2019', 10, 11, 12, 13, 15, 16],
20
  ];
21

22
  readonly gridSettings: GridSettings = {
23
    rowHeaders: true,
24
    colHeaders: true,
25
    contextMenu: true,
26
    comments: true,
27
    cell: [
28
      { row: 1, col: 1, comment: { value: 'Some comment' } },
29
      // add the `style` parameter
30
      {
31
        row: 2,
32
        col: 2,
33
        comment: {
34
          value: 'Comment 200x50 px',
35
          style: { width: 200, height: 50 },
36
        },
37
      },
38
    ],
39
    height: 'auto',
40
    autoWrapRow: true,
41
    autoWrapCol: true,
42
  };
43
}
44
/* end-file */
45

46

47
/* file: app.config.ts */
48
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
49
import { registerAllModules } from 'handsontable/registry';
50
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
51

52
// register Handsontable's modules
53
registerAllModules();
54

55
export const appConfig: ApplicationConfig = {
56
  providers: [
57
    provideZoneChangeDetection({ eventCoalescing: true }),
58
    {
59
      provide: HOT_GLOBAL_CONFIG,
60
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
61
    },
62
  ],
63
};
64
/* end-file */

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

Set a delay for displaying comments

To display comments after a pre-configured time delay, use the displayDelay parameter.

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

5
@Component({
6
  selector: 'example4-comments',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent {
14

15
  readonly data = [
16
    ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],
17
    ['2018', 10, 11, 12, 13, 15, 16],
18
    ['2019', 10, 11, 12, 13, 15, 16],
19
    ['2020', 10, 11, 12, 13, 15, 16],
20
  ];
21

22
  readonly gridSettings: GridSettings = {
23
    rowHeaders: true,
24
    colHeaders: true,
25
    contextMenu: true,
26
    comments: {
27
      // on mouseover, wait 2 seconds before the comment box displays
28
      displayDelay: 2000,
29
    },
30
    cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],
31
    height: 'auto',
32
    autoWrapRow: true,
33
    autoWrapCol: true,
34
  };
35
}
36
/* end-file */
37

38

39
/* file: app.config.ts */
40
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
41
import { registerAllModules } from 'handsontable/registry';
42
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
43

44
// register Handsontable's modules
45
registerAllModules();
46

47
export const appConfig: ApplicationConfig = {
48
  providers: [
49
    provideZoneChangeDetection({ eventCoalescing: true }),
50
    {
51
      provide: HOT_GLOBAL_CONFIG,
52
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
53
    },
54
  ],
55
};
56
/* end-file */

1
<div>
2
  <example4-comments></example4-comments>
3
</div>

Windows	macOS	Action	Excel	Sheets
`Ctrl`+`Alt`+`M`	`⌃`+`⌥`+`M`	Add or edit a comment	✗	✓
`Ctrl`+`Enter`	`⌘`+`Enter`	Save and exit the current comment	✗	✓
`Escape`	`Escape`	Exit the current comment without saving	✗	✗

Configuration options

commentedCellClassName

comments

Result

Cells with comments display a small indicator in the corner. Users can view, edit, or delete comments through the context menu, and pre-configured comments appear when the table loads.