Handsontable example

by handsoncode

HTML

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

CSS

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

JavaScript

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

  var container, hot1;

  function myRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.color = '#777';
  };

  function columnRedRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.fontWeight = 'bold';
    td.style.color = 'red';
  };

  container = document.getElementById('example1');
  hot1 = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(20, 10),
    cells: function(row, col, prop) {
      var cellProperties = {};

      if (col === 1) {
        cellProperties.renderer = columnRedRenderer;
      } else {
        cellProperties.renderer = myRenderer;
      }
      return cellProperties;
    }
  });


});