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
<HotTable
2
  data={[
3
    ['Update API docs', 'Ana García', 'In progress'],
4
    ['Deploy hotfix', 'James Okafor', 'Blocked'],
5
  ]}
6
  comments={true}
7
/>

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
cell={[
2
  { 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
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
12
        ['2017', 10, 11, 12, 13, 15, 16],
13
        ['2018', 10, 11, 12, 13, 15, 16],
14
        ['2019', 10, 11, 12, 13, 15, 16],
15
        ['2020', 10, 11, 12, 13, 15, 16],
16
        ['2021', 10, 11, 12, 13, 15, 16],
17
      ]}
18
      rowHeaders={true}
19
      colHeaders={true}
20
      contextMenu={true}
21
      comments={true}
22
      cell={[
23
        { row: 1, col: 1, comment: { value: 'Some comment' } },
24
        { row: 2, col: 2, comment: { value: 'More comments' } },
25
      ]}
26
      height="auto"
27
      autoWrapRow={true}
28
      autoWrapCol={true}
29
      licenseKey="non-commercial-and-evaluation"
30
    />
31
  );
32
};
33

34
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
12
        ['2017', 10, 11, 12, 13, 15, 16],
13
        ['2018', 10, 11, 12, 13, 15, 16],
14
        ['2019', 10, 11, 12, 13, 15, 16],
15
        ['2020', 10, 11, 12, 13, 15, 16],
16
        ['2021', 10, 11, 12, 13, 15, 16],
17
      ]}
18
      rowHeaders={true}
19
      colHeaders={true}
20
      contextMenu={true}
21
      comments={true}
22
      cell={[
23
        { row: 1, col: 1, comment: { value: 'Some comment' } },
24
        { row: 2, col: 2, comment: { value: 'More comments' } },
25
      ]}
26
      height="auto"
27
      autoWrapRow={true}
28
      autoWrapCol={true}
29
      licenseKey="non-commercial-and-evaluation"
30
    />
31
  );
32
};
33

34
export default ExampleComponent;

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
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],
12
        ['2018', 10, 11, 12, 13, 15, 16],
13
        ['2019', 10, 11, 12, 13, 15, 16],
14
        ['2020', 10, 11, 12, 13, 15, 16],
15
      ]}
16
      rowHeaders={true}
17
      colHeaders={true}
18
      contextMenu={true}
19
      comments={true}
20
      cell={[
21
        {
22
          row: 0,
23
          col: 1,
24
          comment: { value: 'A read-only comment.', readOnly: true },
25
        },
26
        { row: 0, col: 3, comment: { value: 'You can edit this comment' } },
27
      ]}
28
      height="auto"
29
      autoWrapRow={true}
30
      autoWrapCol={true}
31
      licenseKey="non-commercial-and-evaluation"
32
    />
33
  );
34
};
35

36
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],
12
        ['2018', 10, 11, 12, 13, 15, 16],
13
        ['2019', 10, 11, 12, 13, 15, 16],
14
        ['2020', 10, 11, 12, 13, 15, 16],
15
      ]}
16
      rowHeaders={true}
17
      colHeaders={true}
18
      contextMenu={true}
19
      comments={true}
20
      cell={[
21
        {
22
          row: 0,
23
          col: 1,
24
          comment: { value: 'A read-only comment.', readOnly: true },
25
        },
26
        { row: 0, col: 3, comment: { value: 'You can edit this comment' } },
27
      ]}
28
      height="auto"
29
      autoWrapRow={true}
30
      autoWrapCol={true}
31
      licenseKey="non-commercial-and-evaluation"
32
    />
33
  );
34
};
35

36
export default ExampleComponent;

Set a comment box’s size

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

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
12
        ['2017', 10, 11, 12, 13, 15, 16],
13
        ['2018', 10, 11, 12, 13, 15, 16],
14
        ['2019', 10, 11, 12, 13, 15, 16],
15
      ]}
16
      rowHeaders={true}
17
      colHeaders={true}
18
      contextMenu={true}
19
      comments={true}
20
      cell={[
21
        { row: 1, col: 1, comment: { value: 'Some comment' } },
22
        // add the `style` parameter
23
        {
24
          row: 2,
25
          col: 2,
26
          comment: {
27
            value: 'Comment 200x50 px',
28
            style: { width: 200, height: 50 },
29
          },
30
        },
31
      ]}
32
      height="auto"
33
      autoWrapRow={true}
34
      autoWrapCol={true}
35
      licenseKey="non-commercial-and-evaluation"
36
    />
37
  );
38
};
39

40
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
12
        ['2017', 10, 11, 12, 13, 15, 16],
13
        ['2018', 10, 11, 12, 13, 15, 16],
14
        ['2019', 10, 11, 12, 13, 15, 16],
15
      ]}
16
      rowHeaders={true}
17
      colHeaders={true}
18
      contextMenu={true}
19
      comments={true}
20
      cell={[
21
        { row: 1, col: 1, comment: { value: 'Some comment' } },
22
        // add the `style` parameter
23
        {
24
          row: 2,
25
          col: 2,
26
          comment: {
27
            value: 'Comment 200x50 px',
28
            style: { width: 200, height: 50 },
29
          },
30
        },
31
      ]}
32
      height="auto"
33
      autoWrapRow={true}
34
      autoWrapCol={true}
35
      licenseKey="non-commercial-and-evaluation"
36
    />
37
  );
38
};
39

40
export default ExampleComponent;

Set a delay for displaying comments

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

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],
12
        ['2018', 10, 11, 12, 13, 15, 16],
13
        ['2019', 10, 11, 12, 13, 15, 16],
14
        ['2020', 10, 11, 12, 13, 15, 16],
15
      ]}
16
      rowHeaders={true}
17
      colHeaders={true}
18
      contextMenu={true}
19
      comments={{
20
        // on mouseover, wait 2 seconds before the comment box displays
21
        displayDelay: 2000,
22
      }}
23
      cell={[{ row: 1, col: 1, comment: { value: 'Some comment' } }]}
24
      height="auto"
25
      autoWrapRow={true}
26
      autoWrapCol={true}
27
      licenseKey="non-commercial-and-evaluation"
28
    />
29
  );
30
};
31

32
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],
12
        ['2018', 10, 11, 12, 13, 15, 16],
13
        ['2019', 10, 11, 12, 13, 15, 16],
14
        ['2020', 10, 11, 12, 13, 15, 16],
15
      ]}
16
      rowHeaders={true}
17
      colHeaders={true}
18
      contextMenu={true}
19
      comments={{
20
        // on mouseover, wait 2 seconds before the comment box displays
21
        displayDelay: 2000,
22
      }}
23
      cell={[{ row: 1, col: 1, comment: { value: 'Some comment' } }]}
24
      height="auto"
25
      autoWrapRow={true}
26
      autoWrapCol={true}
27
      licenseKey="non-commercial-and-evaluation"
28
    />
29
  );
30
};
31

32
export default ExampleComponent;

Flag invalid cells with a comment

Combine comments with validation to explain data-entry errors. This example adds a comment to a cell when it fails validation and removes the comment once the value is valid. The afterValidate hook drives the change, and setCommentAtCell() writes the message. The grid validates on load, so the Mechanical keyboard row starts with an invalid stock value and shows its comment right away. Edit any Stock cell and enter a negative number or text to flag it, or enter a valid whole number to clear the flag.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
// register Handsontable's modules
4
registerAllModules();
5
const ExampleComponent = () => {
6
    return (<HotTable data={[
7
            ['Wireless mouse', 142],
8
            ['USB-C cable', 67],
9
            ['Mechanical keyboard', -5],
10
            ['Laptop stand', 38],
11
            ['HDMI adapter', 210],
12
        ]} colHeaders={['Product', 'Stock']} rowHeaders={true} comments={true} columns={[
13
            {},
14
            {
15
                type: 'numeric',
16
                validator(value, callback) {
17
                    callback(Number.isInteger(value) && value >= 0);
18
                },
19
            },
20
        ]}
21
    // Attach a comment when a cell fails validation, and remove it once the cell is valid.
22
    afterValidate={function (isValid, value, row, prop) {
23
            const column = this.propToCol(prop);
24
            const comments = this.getPlugin('comments');
25
            if (!isValid) {
26
                comments.setCommentAtCell(row, column, `"${value}" is not valid. Enter a whole number of 0 or more.`);
27
            }
28
            else {
29
                comments.removeCommentAtCell(row, column);
30
            }
31
        }}
32
    // Validate every cell on load so the pre-existing invalid value is flagged right away.
33
    afterInit={function () {
34
            this.validateCells();
35
        }} height="auto" autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation"/>);
36
};
37
export default ExampleComponent;

1
import Handsontable from 'handsontable/base';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  return (
10
    <HotTable
11
      data={[
12
        ['Wireless mouse', 142],
13
        ['USB-C cable', 67],
14
        ['Mechanical keyboard', -5],
15
        ['Laptop stand', 38],
16
        ['HDMI adapter', 210],
17
      ]}
18
      colHeaders={['Product', 'Stock']}
19
      rowHeaders={true}
20
      comments={true}
21
      columns={[
22
        {},
23
        {
24
          type: 'numeric',
25
          validator(value: any, callback: (valid: boolean) => void) {
26
            callback(Number.isInteger(value) && value >= 0);
27
          },
28
        },
29
      ]}
30
      // Attach a comment when a cell fails validation, and remove it once the cell is valid.
31
      afterValidate={function (this: Handsontable, isValid, value, row, prop) {
32
        const column = this.propToCol(prop);
33
        const comments = this.getPlugin('comments');
34

35
        if (!isValid) {
36
          comments.setCommentAtCell(row, column, `"${value}" is not valid. Enter a whole number of 0 or more.`);
37
        } else {
38
          comments.removeCommentAtCell(row, column);
39
        }
40
      }}
41
      // Validate every cell on load so the pre-existing invalid value is flagged right away.
42
      afterInit={function (this: Handsontable) {
43
        this.validateCells();
44
      }}
45
      height="auto"
46
      autoWrapRow={true}
47
      autoWrapCol={true}
48
      licenseKey="non-commercial-and-evaluation"
49
    />
50
  );
51
};
52

53
export default ExampleComponent;

Read all comments programmatically

To collect every comment in the grid, loop through the rows and read each cell’s metadata with getCellMetaAtRow(). Each returned cell-meta object stores its comment under the comment key. Click List all comments to print all comments below the grid.

1
import { useRef, useState } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
// register Handsontable's modules
5
registerAllModules();
6
const ExampleComponent = () => {
7
    const hotRef = useRef(null);
8
    const [output, setOutput] = useState('');
9
    const listComments = () => {
10
        const hot = hotRef.current?.hotInstance;
11
        if (!hot) {
12
            return;
13
        }
14
        const found = [];
15
        // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).
16
        for (let row = 0; row < hot.countRows(); row += 1) {
17
            hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {
18
                const comment = cellMeta.comment;
19
                if (comment?.value !== undefined) {
20
                    found.push(`Row ${row + 1}, "${hot.getColHeader(col)}": ${comment.value}`);
21
                }
22
            });
23
        }
24
        setOutput(found.length > 0 ? found.join('\n') : 'No comments found.');
25
    };
26
    return (<>
27
      <div className="example-controls-container">
28
        <div className="controls">
29
          <button id="list-comments" onClick={() => listComments()}>
30
            List all comments
31
          </button>
32
        </div>
33
      </div>
34
      <HotTable ref={hotRef} data={[
35
            ['Update API docs', 'Ana García', 'In progress'],
36
            ['Deploy hotfix', 'James Okafor', 'Blocked'],
37
            ['Review pull requests', 'Li Wei', 'Done'],
38
            ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],
39
            ['Refactor auth module', 'David Kim', 'In review'],
40
        ]} colHeaders={['Task', 'Assignee', 'Status']} rowHeaders={true} comments={true} cell={[
41
            { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },
42
            { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },
43
            { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },
44
        ]} height="auto" autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation"/>
45
      <output className="comments-output" style={{ whiteSpace: 'pre-wrap' }}>
46
        {output}
47
      </output>
48
    </>);
49
};
50
export default ExampleComponent;

1
import { useRef, useState } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotRef = useRef<HotTableRef>(null);
10
  const [output, setOutput] = useState('');
11

12
  const listComments = () => {
13
    const hot = hotRef.current?.hotInstance;
14

15
    if (!hot) {
16
      return;
17
    }
18

19
    const found: string[] = [];
20

21
    // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).
22
    for (let row = 0; row < hot.countRows(); row += 1) {
23
      hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {
24
        const comment = cellMeta.comment as { value?: string } | undefined;
25

26
        if (comment?.value !== undefined) {
27
          found.push(`Row ${row + 1}, "${hot.getColHeader(col)}": ${comment.value}`);
28
        }
29
      });
30
    }
31

32
    setOutput(found.length > 0 ? found.join('\n') : 'No comments found.');
33
  };
34

35
  return (
36
    <>
37
      <div className="example-controls-container">
38
        <div className="controls">
39
          <button id="list-comments" onClick={() => listComments()}>
40
            List all comments
41
          </button>
42
        </div>
43
      </div>
44
      <HotTable
45
        ref={hotRef}
46
        data={[
47
          ['Update API docs', 'Ana García', 'In progress'],
48
          ['Deploy hotfix', 'James Okafor', 'Blocked'],
49
          ['Review pull requests', 'Li Wei', 'Done'],
50
          ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],
51
          ['Refactor auth module', 'David Kim', 'In review'],
52
        ]}
53
        colHeaders={['Task', 'Assignee', 'Status']}
54
        rowHeaders={true}
55
        comments={true}
56
        cell={[
57
          { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },
58
          { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },
59
          { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },
60
        ]}
61
        height="auto"
62
        autoWrapRow={true}
63
        autoWrapCol={true}
64
        licenseKey="non-commercial-and-evaluation"
65
      />
66
      <output className="comments-output" style={{ whiteSpace: 'pre-wrap' }}>
67
        {output}
68
      </output>
69
    </>
70
  );
71
};
72

73
export default ExampleComponent;

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.

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