Handsontable lazy load

lazy load data based on the visible number of rows

by Aman Middha

HTML

<button class="btn">
load more data
</button>


<button class="btn1" id="btnReload">
load more data12
</button>

 
<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders">


</div>

CSS

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

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

JavaScript

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


  // mock service for getting data
	var fetchData = function(n) {
  	return Handsontable.helper.createSpreadsheetData(n, 3);
  };

	// variables
  var example = document.getElementById('example1');
  var hot;
  var data = fetchData(100);
  
  var compute_window = function(e) {
  	var rowCount = hot.countRows();
    var rowOffset = hot.rowOffset();
    var visibleRows = hot.countVisibleRows();
    var lastRow = rowOffset + (visibleRows * 1);
    var lastVisibleRow = rowOffset + visibleRows + (visibleRows/2);
    var threshold = 15;
    
    if(lastVisibleRow > (rowCount - threshold)) {
      loadMoreData(rowCount);
    }
  };
  
  // initialize HOT
  hot = new Handsontable(example,{
    data: data,
    rowHeaders: true,
    colHeaders: true,
    afterScrollVertically: compute_window
  });
  
  // load data and render
  var loadMoreData = function(n) {
  	// call data service
	  var incoming = fetchData(n);
    incoming.forEach(function(d) {
        data.push(d);
    });
    hot.render();
  };
});