Excel-Like example with Handsontable

excel-like-example-with-handsontable.markdown

Excel-Like example with Handsontable

A Pen by Jaime Gaspar on CodePen.

License.

index.html

<h1>Excel-Like example with <b>Handsontable</b></h1>
<p>Easy sample of how to use <a href="https://handsontable.com/index.html">Handsontable</a>, a minimalist Excel-like data grid editor for HTML & JavaScript.
</p>
   
<div id="grid" class="handsontable"></div>

script.js

$(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('grid'),
  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];
        }
     });
   })();

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://handsontable.com/dist/handsontable.full.js"></script>

style.css

body {
  background: #f3f3f3;
  margin: 20px;
  color: #3d3d3d;
}

styles

<link href="https://handsontable.com/dist/handsontable.full.css" rel="stylesheet" />