Handsontable example

HTML

<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://docs.handsontable.com/pro/1.14.2/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.14.2/bower_components/handsontable-pro/dist/handsontable.full.min.css"> <script src="https://docs.handsontable.com/pro/1.14.2/bower_components/numbro/dist/languages.min.js"></script>

JavaScript

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

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

  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(10, 5),
    colHeaders: true
  });

  var setter = false;
  hot.addHook('afterChange', function(changes, src) {
    console.log(changes, src);
    if (!setter) {
      setter = true;
      hot.setDataAtCell(0, 0, 'Change');
    } else {
      setter = false;
    }
  });


});