Handsontable example

HTML

<p style="font-size: 20px"><strong>Handsontable</strong> is a minimal Excel-like <span class="nobreak">data grid</span>
  editor
  for HTML, JavaScript &amp; jQuery</p>

<div class="warning">
  This is Handsontable <a href="https://github.com/handsontable/jquery-handsontable/releases" class="ver">0.11.1</a>, a release published on Sep 5, 2014. Most prominent changes include
  <a href="demo/scroll.html">native scrolling</a> (also in a <a href="demo/scroll_window.html">window</a>)
  and <a href="demo/merge_cells.html">merged cells</a>.

  <br>If you experience some rough edges, please report an
  <a href="https://github.com/handsontable/jquery-handsontable/issues">issue</a> or temporarily stick to
  version <a href="http://old.handsontable.com">0.10.5 <sup><i class="icon-external-link"></i></sup></a>.
</div>

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

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">

<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", 5, 2905, 2867, 412, 5284],
    ["2011", 4, 2517, 4822, 552, 6127],
    ["2012", 2, 2422, 5399, 776, 4151]
  ];
  
  $('#example').handsontable({
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    contextMenu: true
  });
  
  
  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();

});