Handsontable example

by handsoncode

HTML

<div id="example"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

Babel + JSX

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [[4.5, 'Hello']],
  licenseKey: 'non-commercial-and-evaluation',
  colWidths: 100,
  rowHeaders: true,
  colHeaders: true,
  comments: true,
  columns: [
  	{type: 'numeric'},
    {},
  ],
  afterValidate(isValid, value, row, prop) {
    const commentsPlugin = this.getPlugin('comments');

    if (!isValid) {
      commentsPlugin.setCommentAtCell(row, prop, 'Invalid cell');
    } else {
    	commentsPlugin.removeCommentAtCell(row, prop);
    }

    this.render();
  }
});