Handsontable example

HTML

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

CSS

.handsontable .isDirty {
  background: yellow;
}

JavaScript

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

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

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

  hot.updateSettings({
    afterChange: function(changes, src) {
     var row = changes[0][0], col = changes[0][1];
     hot.setCellMeta(row, col, 'className', 'isDirty');
     hot.render();
    }
  });


});