Handsontable example

HTML

<h2>Object data source</h2>

<p>With version 0.7.0, comes possibility to use <strong>array of objects</strong> data source.</p>

<div id="example3" class="handsontable"></div>

<p>
  <button name="dump" data-dump="#example3">Dump to console</button>
</p>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

<script src="http://handsontable.com/lib/jquery.min.js"></script>
<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">

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

JavaScript

$(document).ready(function () {

  var objectData = [
      {id: 1, name: "Ted Right", address: "NY", value:{old_value:"10", new_value:"15"}},
      {id: 2, name: "Frank Honest", address: "CA", value:{old_value:"12", new_value:"12"}},
      {id: 3, name: "Joan Well", address: "TX", value:{old_value:"20", new_value:"28"}}
  ];
  
var valueRenderer = function (instance, td, row, col, prop, value, cellProperties) {
	var background_color = '';
	if (value.old_value == value.new_value) {
		background_color = 'white';
	} else {
		background_color = 'yellow';
	}
	value = value.new_value;
    Handsontable.renderers.NumericRenderer.apply(this, arguments);
    $(td).css({
      background: background_color
    });
  };    
    
    
  var $container = $("#example3");
  $container.handsontable({
    data: objectData,
    startRows: 5,
    startCols: 3,
    colHeaders: ['ID', 'First Name', 'Address', 'Value'],
    columns: [
    {data: "id"},
    {data: "name"},
    {data: "address"},
        {data: "value", renderer:valueRenderer}    
  ]  
  });
  
  function bindDumpButton() {
      $('body').on('click', 'button[name=dump]', function () {
        var dump = $(this).data('dump');
        var $container = $(dump);
        console.log('data of ' + dump, $container.handsontable('getData'));
      });
    }
  bindDumpButton();

});