Handsontable example

by Alex Azuero

HTML

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

CSS

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

<script src="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.css">
<style>
body {
  font-family: sans-serif;
}
table.htCore > colgroup col:nth-child(1){
  width: 130px;
}
table.htCore > tbody th:nth-child(1){
  text-align: right;
}
table.htCore > thead th {
  text-align: left;
}
table.htCore > thead th .relative { 
  transform:
    translate(0, 51px)
    rotate(270deg);
  width: 80px;
}
table.htCore > thead th { 
  height: 100px !important;
}
</style>

JavaScript

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

  var data = [
      {id: 1, name: 'Ted', isActive: true, color: 'orange', date: '2015-01-01'},
      {id: 2, name: 'John', isActive: false, color: 'black', date: null},
      {id: 3, name: 'Al', isActive: true, color: 'red', date: null},
      {id: 4, name: 'Ben', isActive: false, color: 'blue', date: null}
    ],
    container = document.getElementById('example1'),
    hot1,
    yellowRenderer,
    greenRenderer;
  
  yellowRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.backgroundColor = 'yellow';
  
  };
  
  greenRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.backgroundColor = 'green';
  
  };
  
  hot1 = new Handsontable(container, {
    data: data,
    startRows: 5,
    colHeaders: ["Austria","Belgium","Czech Rep.","Denmark","Estonia"],
    rowHeaders: ["Amsterdam", "Berlin", "Copenhagen", "Dusseldorf", "Espoo"],
    minSpareRows: 1,
    columns: [
      {data: "id", type: 'text'},
      // 'text' is default, you don't actually need to declare it
      {data: "name", renderer: yellowRenderer},
      // use default 'text' cell type but overwrite its renderer with yellowRenderer
      {data: "isActive", type: 'checkbox'},
      {data: "date", type: 'date', dateFormat: 'YYYY-MM-DD'},
      {data: "color",
        type: 'autocomplete',
        source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
      }
    ],
    cell: [
      {row: 1, col: 0, renderer: greenRenderer}
    ],
    cells: function (row, col, prop) {
      if (row === 0 && col === 0) {
        this.renderer = greenRenderer;
      }
    }
  });
  
  function bindDumpButton() {
      if (typeof Handsontable === "undefined") {
        return;
      }
  
      Handsontable.Dom.addEvent(document.body, 'click',...