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],
    colHeaders: true,
    type: 'numeric',
    licenseKey: 'non-commercial-and-evaluation'
  });


  document.addEventListener("keydown", function(e) {
    var ctrl = e.ctrlKey;
    var key = e.key;
    console.log(ctrl, key);

    if (ctrl && key === 'm') {
      hot.validateCells();
    }
  })



});