Search code examples
javascripthookhandsontable

afterCommentChange hook in HandsOnTable


On HoT hooks tutorial one could see a (complete!?) list of hooks in HandsOnTable. However, none of them is comment related.

I'd like to add a custom callback after a comment has been added, deleted or updated.

Neither afterChange nor afterContextMenuExecute seem to trigger after a comment change and beforeRender seems to trigger too often.

Ideally, I'd like to use a specific hook, that only triggers when a comment is added, modified or removed, giving me access to the old and new values as well as the cell position.
At this point, I'd settle for anything that works. Even though I haven't found anything related to it, it's hard to believe nobody needed this before. As soon as I find the answer, I'll post it here.

Here's a basic HoT example, with comments enabled and specific actions added to context menu:

var data = function () {
  return Handsontable.helper.createSpreadsheetData(100, 10);
};

var container = document.getElementById('example');

var hot = new Handsontable(container, {
  data: data(),
  minSpareCols: 1,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: ['undo','redo','commentsAddEdit','commentsRemove'],
  comments: true,
});
body {   
  margin: 2rem;
  font-size: 13px;
  font-family: 'Open Sans', Helvetica, Arial;
}

h2 {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: normal;
}
<link href="https://docs.handsontable.com/pro/1.14.3/bower_components/handsontable-pro/dist/handsontable.full.min.css" rel="stylesheet"/>
<script src="https://docs.handsontable.com/pro/1.14.3/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>


<h2>Handsontable Basic Example (100x10)</h2>

<div id="example"></div>


Solution

  • Apparently, afterSetCellMeta is what I was looking for:

    let hot = new Handsontable(container, {
      // ...,
      afterSetCellMeta: (row, col, key, value) => {
        if (key === 'comment') {
          // comment for cell @ `row`,`col` was changed to `value`
        }
      }
    }