Handsontable example

by handsoncode

HTML

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

CSS

.make-me-red {
  color: #f00;
}

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

JavaScript

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

  var data = [
      ['reg', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
      ['2017', -5, '', 12, 13],
      ['2018', '', -11, 14, 13],
      ['2019', '', 15, -12, 'readOnly']
    ],
    container,
    hot;

  function firstRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.fontWeight = 'bold';
    td.style.color = 'green';
    td.style.background = '#CEC';
  }


  container = document.getElementById('example1');
  hot = new Handsontable(container, {
    data: data,
    colHeaders: true
  });

  hot.setCellMeta(0, 0, 'renderer', firstRenderer);
  hot.render();
});