Handsontable example

HTML

<div>
    <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>
<input type='submit' id = 'button1' onclick="buttonClick()"></input>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://docs.handsontable.com/pro/1.9.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.9.1/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

function buttonClick() {
						var fake = [1, 2, 3, 4, 5, 6, 7, 8, 10];
            hot.getPlugin('trimRows').untrimRows(fake);
            hot.getPlugin('trimRows').trimRows(fake);
            hot.render();
}

var hot;

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

  var example1 = document.getElementById('example1');
  
   hot = new Handsontable(example1, {
      data: Handsontable.helper.createSpreadsheetData(10, 4),
      colHeaders: true,
      rowHeaders: true,
      columnSorting: {
                    column: 0,
                    sortOrder: true
                },           
                autoColumnSize: false,
                height: 200,
                fixedRowsTop: 0,
                minSpareRows: 1,
                trimRows: []
  });

            

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

});