This page covers a non-latest version of Handsontable.
# 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
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 Comments#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 Comments#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 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
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 Comments#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 Comments#setComment, Comments#removeComment, Comments#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 Comments#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.