Handsontable lazy load

lazy load data based on the visible number of rows

HTML

<script src="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="btn1" id="btnReload">
  Reload data
</button>


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


</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://docs.handsontable.com/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() {

   $("#btnReload").click(function() {
     hot.loadData(Handsontable.helper.createSpreadsheetData(600, 8));
     hot.render();
   });


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