Handsontable example

by sqiudward

HTML

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

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

var
    isChecked,
    container2 = document.getElementById('example2'),
    hot2;
  
  hot2 = new Handsontable(container2, {
    columns: [
      {},
      {renderer: customRenderer}
    ],
    colHeaders: function (col) {
      var txt;
  
      switch (col) {
        case 0:
          return '<b>Bold</b> and <em>Beautiful</em>';
  
        case 1:
          txt = "Some <input type='checkbox' class='checker' ";
          txt += isChecked ? 'checked="checked"' : '';
          txt += "> checkbox";
  
          return txt;
      }
    }
  });
  
  function customRenderer(instance, td) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
  
    if (isChecked) {
      td.style.backgroundColor = 'yellow';
    }
    else {
      td.style.backgroundColor = 'white';
    }
  
    return td;
  }
  
/*   Handsontable.dom.addEvent(container2, 'mousedown', function (event) {
    if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {
      event.stopPropagation();
    }
  });
  
  Handsontable.dom.addEvent(container2, 'mouseup', function (event) {
    if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {
      isChecked = !event.target.checked;
      hot2.render();
    }
  }); */