JavaScript Data GridComments
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:
const hot = new Handsontable(container, {
data: [
['A1', 'B1', 'C1'],
['A2', 'B2', 'C2'],
],
comments: true,
autoWrapRow: true,
autoWrapCol: true
});
Add comments via the context menu
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:
cell: [
{ row: 1, col: 1, comment: { value: 'Hello world!' } }
]
In this example, the comment "Hello world!" is added to the cell at (1,1)
.
Basic example
A | B | C | D | E | F | G | |
---|---|---|---|---|---|---|---|
1 | Tesla | Nissan | Toyota | Honda | Mazda | Ford | |
2 | 2017 | 10 | 11 | 12 | 13 | 15 | 16 |
3 | 2018 | 10 | 11 | 12 | 13 | 15 | 16 |
4 | 2019 | 10 | 11 | 12 | 13 | 15 | 16 |
5 | 2020 | 10 | 11 | 12 | 13 | 15 | 16 |
6 | 2021 | 10 | 11 | 12 | 13 | 15 | 16 |
A | B | C | D | E | F | G |
---|
1 |
---|
2 |
3 |
4 |
5 |
6 |
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.
A | B | C | D | E | |
---|---|---|---|---|---|
1 | Tesla | Toyota | Honda | Ford | |
2 | 2018 | 10 | 11 | 12 | 13 |
3 | 2019 | 10 | 11 | 12 | 13 |
4 | 2020 | 10 | 11 | 12 | 13 |
A | B | C | D | E |
---|
1 |
---|
2 |
3 |
4 |
Set a comment box's size
To set the width and height of a comment box, use the style
parameter.
A | B | C | D | E | F | G | |
---|---|---|---|---|---|---|---|
1 | Tesla | Nissan | Toyota | Honda | Mazda | Ford | |
2 | 2017 | 10 | 11 | 12 | 13 | 15 | 16 |
3 | 2018 | 10 | 11 | 12 | 13 | 15 | 16 |
4 | 2019 | 10 | 11 | 12 | 13 | 15 | 16 |
A | B | C | D | E | F | G |
---|
1 |
---|
2 |
3 |
4 |
Set a delay for displaying comments
To display comments after a pre-configured time delay, use the displayDelay
parameter.
A | B | C | D | E | |
---|---|---|---|---|---|
1 | Tesla | Toyota | Honda | Ford | |
2 | 2018 | 10 | 11 | 12 | 13 |
3 | 2019 | 10 | 11 | 12 | 13 |
4 | 2020 | 10 | 11 | 12 | 13 |
A | B | C | D | E |
---|
1 |
---|
2 |
3 |
4 |
Related keyboard shortcuts
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 | ✗ | ✗ |
Related API reference
- Configuration options:
There is a newer version of Handsontable available. Switch to the latest version ⟶