Handsontable example

by mpusarla

HTML

<div id="basic_example"></div>
<span id="output"></span>

CSS

</style>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<link href="http://handsontable.com//styles/main.css" rel="stylesheet">
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

JavaScript

$(document).ready(function () {

  var container = document.getElementById('basic_example');
  
  var data = function () {
   return Handsontable.helper.createSpreadsheetData(1, 1);
  };
  
    function customRenderer(instance, td, row, col, prop, value, cellProperties) {
        console.log("renderer invoked for " + row + "--" + col);
        $('#output').append("renderer invoked for " + row + "--" + col + '<br /> ');
        Handsontable.TextCell.renderer.apply(this, arguments);
    }
    
    var columns = [{}];
    columns[0].renderer = customRenderer;
    
  var hot = new Handsontable(container, {
    data: data(),
    height: 396,
    colHeaders: true,
    rowHeaders: true,
    stretchH: 'all',
    columnSorting: true,
    contextMenu: false,
    columns : columns
  });
  
});