Handsontable example

by gopinaghr

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.14.1</a>, a
  release published on April 8th, 2015.

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

  <ul>
    <li>modified fixed header/overlay structure - each overlay has its own hidden scrollbar - change was made to reduce the laggy overlay effect for IE and Safari,<br><br>
    <strong>Please note:</strong> In order to maintain the pre-0.14.0 scrollbar functionality, change the CSS <code>overflow</code> property of your Handsontable container from <code>scroll</code>
    or <code>auto</code> to <code>hidden</code>. Without performing this change, you might encounter problems with doubling scrollbars.</li><br>
    <li>Adding JSDoc to the project,</li>
    <li>Removal of jQuery UI datepicker - we switched to Pikaday + Moment.js, that makes us jQuery-free</li>
  </ul>

  Check out the <a href="https://github.com/handsontable/handsontable/releases/latest/">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', 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,
    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();

});