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,
  readOnly: true,
  style: {
    width: 300,
    height: 100
  }
}

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

Ask AI

Source code

comments.comments : boolean | Array<object>

The comments option configures the Comments plugin.

You can set the comments option to one of the following:

Setting	Description
true	- Enable the Comments plugin - Add comment menu items to the context menu
false	Disable the Comments plugin
An object	- Enable the Comments plugin - Add comment menu items to the context menu - Configure comment settings

If you set the comments option to an object, you can configure the following comment options:

Option	Possible settings	Description
displayDelay	A number (default: 250)	Display comments after a delay (in milliseconds)
readOnly	true | false (default)	true: Make comments read-only
style	An object	Set comment boxes’ width and height (in pixels)

Read more:

• Comments
• Context menu
• width
• height
• readOnly
• commentedCellClassName

Default: false
Example

// enable the `Comments` plugin
comments: true,

// enable the `Comments` plugin
// and configure its settings
comments: {
  // display all comments with a 1-second delay
  displayDelay: 1000,
  // make all comments read-only
  readOnly: true,
  // set the default size of all comment boxes
  style: {
    width: 300,
    height: 100
  }
}

Members

range

Ask AI

Source code

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

Ask AI

Source code

comments.clearRange()

Clears the currently selected cell.

destroy

Ask AI

Source code

comments.destroy()

Destroys the plugin instance.

disablePlugin

Ask AI

Source code

comments.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Ask AI

Source code

comments.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

focusEditor

Ask AI

Source code

comments.focusEditor()

Focuses the comments editor element.

getComment

Ask AI

Source code

comments.getComment() ⇒ string | undefined

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

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

getCommentAtCell

Ask AI

Source code

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

Ask AI

Source code

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

Ask AI

Source code

comments.hide()

Hides the comment editor.

isEnabled

Ask AI

Source code

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 then the Comments#enablePlugin method is called.

refreshEditor

Ask AI

Source code

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

Ask AI

Source code

comments.removeComment([forceRender])

Removes a comment from a cell according to previously set range (see Comments#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

Ask AI

Source code

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

Ask AI

Source code

comments.setComment(value)

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

Param	Type	Description
value	string	Comment contents.

setCommentAtCell

Ask AI

Source code

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

Ask AI

Source code

comments.setRange(range)

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

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

show

Ask AI

Source code

comments.show() ⇒ boolean

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

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

showAtCell

Ask AI

Source code

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

Ask AI

Source code

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

Ask AI

Source code

comments.updatePlugin()

Updates the plugin’s state.

This method is executed when updateSettings() is invoked with any of the following configuration options:

• comments