React Data Grid 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:

<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 can be declared as any value of that 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

    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.

      Set a comment box's size

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

        Set a delay for displaying comments

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