# Comments

# Description

This plugin allows setting and managing cell comments by either an option in the context menu or with the use of the API.

To enable the plugin, you'll need to set the comments property of the config object to true:

comments: true

or an object with extra predefined plugin config:

comments: {
  displayDelay: 1000
}

To add comments at the table initialization, define the comment property in the cell config array as in an example below.

Example

const hot = new Handsontable(document.getElementById('example'), {
  data: getData(),
  comments: true,
  cell: [
    {row: 1, col: 1, comment: {value: 'Foo'}},
    {row: 2, col: 2, comment: {value: 'Bar'}}
  ]
});

// Access to the Comments plugin instance:
const commentsPlugin = hot.getPlugin('comments');

// Manage comments programmatically:
commentsPlugin.setCommentAtCell(1, 6, 'Comment contents');
commentsPlugin.showAtCell(1, 6);
commentsPlugin.removeCommentAtCell(1, 6);

// You can also set range once and use proper methods:
commentsPlugin.setRange({from: {row: 1, col: 6}});
commentsPlugin.setComment('Comment contents');
commentsPlugin.show();
commentsPlugin.removeComment();

# Options

# comments

Source code (opens new window)

comments.comments : boolean | Array<object>

If true, enables the Comments plugin, which enables an option to apply cell comments through the context menu (configurable with context menu keys commentsAddEdit, commentsRemove).

To initialize Handsontable with predefined comments, provide cell coordinates and comment text values in a form of an array.

See Comments demo for examples.

Default: false
Example

// enable comments plugin
comments: true,

// or an object with extra predefined plugin config:

comments: {
  displayDelay: 1000
}

// or
// enable comments plugin and add predefined comments
const hot = new Handsontable(document.getElementById('example'), {
  data: getData(),
  comments: true,
  cell: [
    { row: 1, col: 1, comment: { value: 'Foo' } },
    { row: 2, col: 2, comment: { value: 'Bar' } }
  ]
});

# Members

# range

Source code (opens new window)

comments.range : object

Current cell range, an object with from property, with row and col properties (e.q. {from: {row: 1, col: 6}}).

# Methods

# clearRange

Source code (opens new window)

comments.clearRange()

Clears the currently selected cell.

# destroy

Source code (opens new window)

comments.destroy()

Destroys the plugin instance.

# disablePlugin

Source code (opens new window)

comments.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

# enablePlugin

Source code (opens new window)

comments.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

# getComment

Source code (opens new window)

comments.getComment() ⇒ string | undefined

Gets comment from a cell according to previously set range (see setRange).

Returns: string | undefined - Returns a content of the comment.

# getCommentAtCell

Source code (opens new window)

comments.getCommentAtCell(row, column) ⇒ string | undefined

Gets comment from a cell at the provided coordinates.

Param Type Description
row number Visual row index.
column number Visual column index.

Returns: string | undefined - Returns a content of the comment.

# getCommentMeta

Source code (opens new window)

comments.getCommentMeta(row, column, property) ⇒ Mixed

Gets the comment related meta information.

Param Type Description
row number Visual row index.
column number Visual column index.
property string Cell meta property.

# hide

Source code (opens new window)

comments.hide()

Hides the comment editor.

# isEnabled

Source code (opens new window)

comments.isEnabled() ⇒ boolean

Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInit hook and if it returns true than the enablePlugin method is called.

# refreshEditor

Source code (opens new window)

comments.refreshEditor([force])

Refreshes comment editor position and styling.

Param Type Default Description
[force] boolean false optional If true then recalculation will be forced.

# removeComment

Source code (opens new window)

comments.removeComment([forceRender])

Removes a comment from a cell according to previously set range (see setRange).

Param Type Default Description
[forceRender] boolean true optional If set to true, the table will be re-rendered at the end of the operation.

# removeCommentAtCell

Source code (opens new window)

comments.removeCommentAtCell(row, column, [forceRender])

Removes a comment from a specified cell.

Param Type Default Description
row number Visual row index.
column number Visual column index.
[forceRender] boolean true optional If true, the table will be re-rendered at the end of the operation.

# setComment

Source code (opens new window)

comments.setComment(value)

Sets a comment for a cell according to the previously set range (see setRange).

Param Type Description
value string Comment contents.

# setCommentAtCell

Source code (opens new window)

comments.setCommentAtCell(row, column, value)

Sets a comment for a specified cell.

Param Type Description
row number Visual row index.
column number Visual column index.
value string Comment contents.

# setRange

Source code (opens new window)

comments.setRange(range)

Sets the current cell range to be able to use general methods like setComment, removeComment, show.

Param Type Description
range object Object with from property, each with row and col properties.

# show

Source code (opens new window)

comments.show() ⇒ boolean

Shows the comment editor accordingly to the previously set range (see setRange).

Returns: boolean - Returns true if comment editor was shown.

# showAtCell

Source code (opens new window)

comments.showAtCell(row, column) ⇒ boolean

Shows comment editor according to cell coordinates.

Param Type Description
row number Visual row index.
column number Visual column index.

Returns: boolean - Returns true if comment editor was shown.

# updateCommentMeta

Source code (opens new window)

comments.updateCommentMeta(row, column, metaObject)

Sets or update the comment-related cell meta.

Param Type Description
row number Visual row index.
column number Visual column index.
metaObject object Object defining all the comment-related meta information.

# updatePlugin

Source code (opens new window)

comments.updatePlugin()

Updates the plugin state. This method is executed when Core#updateSettings is invoked.

Last Updated: Jul 8, 2021