JavaScript Data GridComments
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 codecomments.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:
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
Source codecomments.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 codecomments.clearRange()
Clears the currently selected cell.
destroy
Source codecomments.destroy()
Destroys the plugin instance.
disablePlugin
Source codecomments.disablePlugin()
Disables the plugin functionality for this Handsontable instance.
enablePlugin
Source codecomments.enablePlugin()
Enables the plugin functionality for this Handsontable instance.
focusEditor
Source codecomments.focusEditor()
Focuses the comments editor element.
getComment
Source codecomments.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 codecomments.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 codecomments.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 codecomments.hide()
Hides the comment editor.
isEnabled
Source codecomments.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
Source codecomments.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 codecomments.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 codecomments.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 codecomments.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 codecomments.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 codecomments.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 codecomments.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 codecomments.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 codecomments.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 codecomments.updatePlugin()
Updates the plugin's state.
This method is executed when updateSettings()
is invoked with any of the following configuration options: