Handsontable example

by handsoncode

HTML

<link rel="stylesheet" href="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.js"></script>
<div id="example1"></div>

CSS

body {
  margin: 0;
  padding: 0;
  background: #fff;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var
    example = document.getElementById('example1'),
    hot;

  var myData = [
    [1, 2, 3, 'ABC'],
    ['DEF', 4, 5, 6],
    [7, 'GHI', 8, 9]
  ];

  hot = new Handsontable(example, {
    data: myData,
    colWidths: [187, 187, 185, 185],
    licenseKey: 'non-commercial-and-evaluation',
    colHeaders: true,
    type: 'numeric',
    comments: true
  });

  var plugin = hot.getPlugin('Comments');

  document.addEventListener("keydown", function(e) {
    var ctrl = e.ctrlKey;
    var key = e.key;
    var row = hot.getSelected()[0];
    var col = hot.getSelected()[1];

    if (ctrl && key === 'm') {
      plugin.setCommentAtCell(row, col, 'Accepted');
      plugin.showAtCell(row, col);
    }
  })



});