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;
}

.handsontable .red {
  color: red;
}

.handsontable .black {
  color: black;
}

JavaScript

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

  var
    example = document.getElementById('example1'),
    hot;
  var myData = [
    ['Ann', 'Smith'],
    ['Brad', 'James'],
    ['Mike', 'Tail']
  ];

  var prevKey;
  hot = new Handsontable(example, {
    data: myData,
    colWidths: 345,
    licenseKey: 'non-commercial-and-evaluation',
    rowHeaders: true,
    colHeaders: true
  });

  hot.addHook('afterDocumentKeyDown', function(e) {
    if (e.key === 'm' && prevKey === 'Control') {
      // red font color
      hot.setCellMeta(hot.getSelected()[0], hot.getSelected()[1], 'className', 'red');
      hot.render();
    } else if (e.key === 'q' && prevKey === 'Control') {
      // black font color
      hot.setCellMeta(hot.getSelected()[0], hot.getSelected()[1], 'className', 'black');
      hot.render();
    }
    prevKey = e.key;
  })

});