Handsontable example

by dirkk0

HTML

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

<div class="warning">
  This is Handsontable <a href="https://github.com/handsontable/handsontable/releases" class="ver">0.12.2</a>, a
  release published on Dec 8, 2014.

  <p>The most prominent changes are:</p>

  <ul>
    <li>the removal of jQuery from dependencies and the filename,</li>
    <li>(but we still keep <a href="demo/jquery.html">the jQuery plugin API</a> for backward compatibility),
    </li>
    <li>dropped support for IE 8 and 9 (if it bothers you, please email us),</li>
    <li>more efficient row rendering algorithm.</li>
    <li>Basic iPad 4 support</li>
  </ul>

  Check out the <a href="https://github.com/handsontable/handsontable/releases/tag/0.12.2">full release
  notes</a>. If you experience some rough edges, please report an
  <a href="https://github.com/handsontable/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="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", 5, 2905, 2867, 412, 5284],
    ["2011", 4, 2517, 4822, 552, 6127],
    ["2012", 2, 2422, 5399, 776, 4151]
  ];
  
  var container = document.getElementById('example');
  var hot = new Handsontable(container,
  {
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    contextMenu: true
  });
  
  
  function bindDumpButton() {
  
      Handsontable.Dom.addEvent(document.body, 'click', function (e) {
  
        var element = e.target || e.srcElement;
  
        if (element.nodeName == "BUTTON" && element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
  bindDumpButton();

});