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.

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 } from '@handsontable/angular-wrapper';
4

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

14
  readonly data = [
15
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
16
    ['2017', 10, 11, 12, 13, 15, 16],
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
    ['2021', 10, 11, 12, 13, 15, 16],
21
  ];
22

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

39

40
/* file: app.module.ts */
41
import { NgModule, ApplicationConfig } from '@angular/core';
42
import { BrowserModule } from '@angular/platform-browser';
43
import { registerAllModules } from 'handsontable/registry';
44
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
45
import { CommonModule } from '@angular/common';
46
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
47
/* start:skip-in-compilation */
48
import { Example1CommentsComponent } from './app.component';
49
/* end:skip-in-compilation */
50

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

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

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

72
export class AppModule { }
73
/* 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 } from '@handsontable/angular-wrapper';
4

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

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

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

41

42
/* file: app.module.ts */
43
import { NgModule, ApplicationConfig } from '@angular/core';
44
import { BrowserModule } from '@angular/platform-browser';
45
import { registerAllModules } from 'handsontable/registry';
46
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
47
import { CommonModule } from '@angular/common';
48
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
49
/* start:skip-in-compilation */
50
import { Example2CommentsComponent } from './app.component';
51
/* end:skip-in-compilation */
52

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

56
export const appConfig: ApplicationConfig = {
57
  providers: [
58
    {
59
      provide: HOT_GLOBAL_CONFIG,
60
      useValue: {
61
        license: NON_COMMERCIAL_LICENSE,
62
      } as HotGlobalConfig
63
    }
64
  ],
65
};
66

67
@NgModule({
68
  imports: [ BrowserModule, HotTableModule, CommonModule ],
69
  declarations: [ Example2CommentsComponent ],
70
  providers: [...appConfig.providers],
71
  bootstrap: [ Example2CommentsComponent ]
72
})
73

74
export class AppModule { }
75
/* 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 } from '@handsontable/angular-wrapper';
4

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

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

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

45

46
/* file: app.module.ts */
47
import { NgModule, ApplicationConfig } from '@angular/core';
48
import { BrowserModule } from '@angular/platform-browser';
49
import { registerAllModules } from 'handsontable/registry';
50
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
51
import { CommonModule } from '@angular/common';
52
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
53
/* start:skip-in-compilation */
54
import { Example3CommentsComponent } from './app.component';
55
/* end:skip-in-compilation */
56

57
// register Handsontable's modules
58
registerAllModules();
59

60
export const appConfig: ApplicationConfig = {
61
  providers: [
62
    {
63
      provide: HOT_GLOBAL_CONFIG,
64
      useValue: {
65
        license: NON_COMMERCIAL_LICENSE,
66
      } as HotGlobalConfig
67
    }
68
  ],
69
};
70

71
@NgModule({
72
  imports: [ BrowserModule, HotTableModule, CommonModule ],
73
  declarations: [ Example3CommentsComponent ],
74
  providers: [...appConfig.providers],
75
  bootstrap: [ Example3CommentsComponent ]
76
})
77

78
export class AppModule { }
79
/* 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 } from '@handsontable/angular-wrapper';
4

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

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

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

37

38
/* file: app.module.ts */
39
import { NgModule, ApplicationConfig } from '@angular/core';
40
import { BrowserModule } from '@angular/platform-browser';
41
import { registerAllModules } from 'handsontable/registry';
42
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
43
import { CommonModule } from '@angular/common';
44
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
45
/* start:skip-in-compilation */
46
import { Example4CommentsComponent } 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: [ Example4CommentsComponent ],
66
  providers: [...appConfig.providers],
67
  bootstrap: [ Example4CommentsComponent ]
68
})
69

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

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

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

Configuration options

commentedCellClassName

comments