Handsontable example

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

.border {
  box-shadow: inset 0 -2px 0 red;
}

JavaScript

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

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

  hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(10, 10),
    rowHeights: 23,
    rowHeaders: true,
    colHeaders: true
  });

  hot.addHook('afterChange', function(chn, src) {
    if (src === 'edit') {
      console.log(src);
      hot.setCellMeta(chn[0][0], chn[0][1], 'className', 'border');
      hot.render()
    }
  })

});