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:

<HotTable
  data={[
    ['A1', 'B1', 'C1'],
    ['A2', 'B2', 'C2'],
  ]}
  comments={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

Source code

JavaScript

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

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
        ['2017', 10, 11, 12, 13, 15, 16],
        ['2018', 10, 11, 12, 13, 15, 16],
        ['2019', 10, 11, 12, 13, 15, 16],
        ['2020', 10, 11, 12, 13, 15, 16],
        ['2021', 10, 11, 12, 13, 15, 16],
      ]}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      comments={true}
      cell={[
        { row: 1, col: 1, comment: { value: 'Some comment' } },
        { row: 2, col: 2, comment: { value: 'More comments' } },
      ]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

TypeScript

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

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
        ['2017', 10, 11, 12, 13, 15, 16],
        ['2018', 10, 11, 12, 13, 15, 16],
        ['2019', 10, 11, 12, 13, 15, 16],
        ['2020', 10, 11, 12, 13, 15, 16],
        ['2021', 10, 11, 12, 13, 15, 16],
      ]}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      comments={true}
      cell={[
        { row: 1, col: 1, comment: { value: 'Some comment' } },
        { row: 2, col: 2, comment: { value: 'More comments' } },
      ]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

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.

Source code

JavaScript

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

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],
        ['2018', 10, 11, 12, 13, 15, 16],
        ['2019', 10, 11, 12, 13, 15, 16],
        ['2020', 10, 11, 12, 13, 15, 16],
      ]}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      comments={true}
      cell={[
        {
          row: 0,
          col: 1,
          comment: { value: 'A read-only comment.', readOnly: true },
        },
        { row: 0, col: 3, comment: { value: 'You can edit this comment' } },
      ]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

TypeScript

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

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],
        ['2018', 10, 11, 12, 13, 15, 16],
        ['2019', 10, 11, 12, 13, 15, 16],
        ['2020', 10, 11, 12, 13, 15, 16],
      ]}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      comments={true}
      cell={[
        {
          row: 0,
          col: 1,
          comment: { value: 'A read-only comment.', readOnly: true },
        },
        { row: 0, col: 3, comment: { value: 'You can edit this comment' } },
      ]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

Set a comment box’s size

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

Source code

JavaScript

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

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
        ['2017', 10, 11, 12, 13, 15, 16],
        ['2018', 10, 11, 12, 13, 15, 16],
        ['2019', 10, 11, 12, 13, 15, 16],
      ]}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      comments={true}
      cell={[
        { row: 1, col: 1, comment: { value: 'Some comment' } },
        // add the `style` parameter
        {
          row: 2,
          col: 2,
          comment: {
            value: 'Comment 200x50 px',
            style: { width: 200, height: 50 },
          },
        },
      ]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

TypeScript

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

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
        ['2017', 10, 11, 12, 13, 15, 16],
        ['2018', 10, 11, 12, 13, 15, 16],
        ['2019', 10, 11, 12, 13, 15, 16],
      ]}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      comments={true}
      cell={[
        { row: 1, col: 1, comment: { value: 'Some comment' } },
        // add the `style` parameter
        {
          row: 2,
          col: 2,
          comment: {
            value: 'Comment 200x50 px',
            style: { width: 200, height: 50 },
          },
        },
      ]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

Set a delay for displaying comments

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

Source code

JavaScript

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

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],
        ['2018', 10, 11, 12, 13, 15, 16],
        ['2019', 10, 11, 12, 13, 15, 16],
        ['2020', 10, 11, 12, 13, 15, 16],
      ]}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      comments={{
        // on mouseover, wait 2 seconds before the comment box displays
        displayDelay: 2000,
      }}
      cell={[{ row: 1, col: 1, comment: { value: 'Some comment' } }]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

TypeScript

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

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],
        ['2018', 10, 11, 12, 13, 15, 16],
        ['2019', 10, 11, 12, 13, 15, 16],
        ['2020', 10, 11, 12, 13, 15, 16],
      ]}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      comments={{
        // on mouseover, wait 2 seconds before the comment box displays
        displayDelay: 2000,
      }}
      cell={[{ row: 1, col: 1, comment: { value: 'Some comment' } }]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

Related keyboard shortcuts

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

Related API reference

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.