Handsontable example

by heavyhorse

HTML

<div id="example" class="handsontable"></div>
<button id="more">Load more data</button>

CSS

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

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

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

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

JavaScript

$(document).ready(function () {

  var
    data = [
      ['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
      ['2009', 0, 2941, 4303, 354, 5814],
      ['2010', 3, 2905, 2867, 412, 5284],
      ['2011', 4, 2517, 4822, 552, 6127],
      ['2012', 2, 2422, 5399, 776, 4151]
    ],
    container = document.getElementById('example'),
    hot;
  
  hot = new Handsontable(container, {
    data: data,
    colHeaders: true,
    contextMenu: true
  });
    
    document.querySelector('#more').addEventListener('click', function() {
        var moreData = [
          ['2009', 0, 2941, 4303, 354, 5814],
          ['2010', 3, 2905, 2867, 412, 5284],
          ['2011', 4, 2517, 4822, 552, 6127],
          ['2012', 2, 2422, 5399, 776, 4151]
        ];
        
        for (var i = 0; i < moreData.length; i ++) {
            hot.getData().push(moreData[i]);
        }
        hot.render();
    });
});