React Data Grid 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 hotRef = useRef(null);
...
<HotTable
ref={hotRef}
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 hot = hotRef.current.hotInstance;
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>
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 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 then 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's state.
This method is executed when updateSettings() is invoked with any of the following configuration options: