Handsontable example

HTML

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders" style="height: 320px; overflow: hidden; width: 100%;" data-originalstyle="height: 320px; overflow: hidden; width: 100%;"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

var example = document.getElementById('example1');
  var hot = new Handsontable(example, {
    data: [['o4.5', 'Hello']],
    colWidths: 100,
    rowHeaders: true,
    colHeaders: true,
    comments: true,
    columns: [{type: 'numeric'}, {}],
    afterValidate: function(isValid, value, row, prop){
    const commentsPlugin = this.getPlugin('comments');
    	if(!isValid){
      	commentsPlugin.setCommentAtCell(row, prop, 'Invalid cell');
       	this.render()
      }
    }
  });
  
  hot.validateCells()