Handsontable example

by Aman Middha

HTML

<div>
<TR>
    <select>        
            <option value="sum">sum</option>
            <option value="count">count</option>
            <option value="Max">Max</option>
            <option value="Min">Min</option>
    </select>
     
</TR>
<TR>
     <select>        
            <option value="sum">sum</option>
            <option value="count">count</option>
            <option value="Max">Max</option>
            <option value="Min">Min</option>
    </select>
</TR>
<TR>
    <select>        
            <option value="sum">sum</option>
            <option value="count">count</option>
            <option value="Max">Max</option>
            <option value="Min">Min</option>
    </select>
</TR>
<TR>
    <select>        
            <option value="sum">sum</option>
            <option value="count">count</option>
            <option value="Max">Max</option>
            <option value="Min">Min</option>
    </select>
</TR>
<TR>
     <select>        
            <option value="sum">sum</option>
            <option value="count">count</option>
            <option value="Max">Max</option>
            <option value="Min">Min</option>
    </select>
</TR>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://docs.handsontable.com/pro/1.4.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.4.1/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var generateDataObj = function(rows, columns) {
    var data = [];
    var number = 0;

    if (!rows) {
      rows = 3;
    }
    if (!columns) {
      columns = 7;
    }

    for (var i = 0; i < rows; i++) {
      data[i] = [];
      for (var j = 0; j < columns; j++) {
        data[i][j] = number++;
      }
    }

    for (i = 0; i < 2; i++) {
      data.push([]);
    }

    return data;
  };

  var example1 = document.getElementById('example1');

  var hot = new Handsontable(example1, {
    data: generateDataObj(),
    colHeaders: true,
    rowHeaders: true,
    columnSummary: [{
      destinationRow: 4,
      destinationColumn: 1,
      type: 'min'
    }, {
      destinationRow: 0,
      destinationColumn: 3,
      reversedRowCoords: true,
      type: 'max'
    }, {
      destinationRow: 4,
      destinationColumn: 5,
      type: 'sum',
      forceNumeric: true
    }]
  });

  function bindDumpButton() {
    if (typeof Handsontable === "undefined") {
      return;
    }

    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();

});