Fix last page render, add enableLogs option

index.html

@@ -495,7 +495,7 @@
 				]
 			};
 
-			for (let i = 0; i < 12; i++) {
+			for (let i = 0; i < 10; i++) {
 				data.rows = data.rows.concat(data.rows);
 			}
 

lib/ReGrid.js

@@ -128,7 +128,8 @@ var ReGrid = function () {
         events = _ref.events,
         data = _ref.data,
         addSerialNoColumn = _ref.addSerialNoColumn,
-        enableClusterize = _ref.enableClusterize;
+        enableClusterize = _ref.enableClusterize,
+        enableLogs = _ref.enableLogs;
 
     _classCallCheck(this, ReGrid);
 
@@ -140,6 +141,7 @@ var ReGrid = function () {
     this.events = (0, _utils.getDefault)(events, {});
     this.addSerialNoColumn = (0, _utils.getDefault)(addSerialNoColumn, false);
     this.enableClusterize = (0, _utils.getDefault)(enableClusterize, false);
+    this.enableLogs = (0, _utils.getDefault)(enableLogs, true);
 
     this.makeDom();
     this.bindEvents();
@@ -213,33 +215,43 @@ var ReGrid = function () {
   }, {
     key: 'appendRemainingData',
     value: function appendRemainingData() {
-      var _this = this;
-
       var dataAppended = this.pageLength;
       var promises = [];
 
       while (dataAppended + this.pageLength < this.data.rows.length) {
         this.start = this.end;
         this.end = this.start + this.pageLength;
-
+        promises.push(this.appendNextPagePromise(this.start, this.end));
-        var promise = new Promise(function (resolve) {
-          setTimeout(function () {
-            var rows = _this.data.rows.slice(_this.start, _this.end);
-            var data = _this.getDataForClusterize(rows);
-
-            _this.clusterize.append(data);
-            resolve();
-          }, 0);
-        });
-
         dataAppended += this.pageLength;
-        promises.push(promise);
+      }
+
+      if (this.data.rows.length % this.pageLength > 0) {
+        // last page
+        this.start = this.end;
+        this.end = this.start + this.pageLength;
+        promises.push(this.appendNextPagePromise(this.start, this.end));
       }
 
       return promises.reduce(function (prev, cur) {
         return prev.then(cur);
       }, Promise.resolve());
     }
+  }, {
+    key: 'appendNextPagePromise',
+    value: function appendNextPagePromise(start, end) {
+      var _this = this;
+
+      return new Promise(function (resolve) {
+        setTimeout(function () {
+          var rows = _this.data.rows.slice(start, end);
+          var data = _this.getDataForClusterize(rows);
+
+          _this.clusterize.append(data);
+          _this.log('dataAppended', rows.length);
+          resolve();
+        }, 0);
+      });
+    }
   }, {
     key: 'getDataForClusterize',
     value: function getDataForClusterize(rows) {
@@ -627,6 +639,13 @@ var ReGrid = function () {
       if (colIndex < 0) return null;
       return this.wrapper.find('.data-table-col[data-is-header][data-col-index="' + colIndex + '"]');
     }
+  }, {
+    key: 'log',
+    value: function log() {
+      if (this.enableLogs) {
+        console.log.apply(console, arguments);
+      }
+    }
   }]);
 
   return ReGrid;

src/regrid.js

@@ -14,7 +14,7 @@ import Clusterize from 'clusterize.js';
 import './style.scss';
 
 export default class ReGrid {
-  constructor({ wrapper, events, data, addSerialNoColumn, enableClusterize }) {
+  constructor({ wrapper, events, data, addSerialNoColumn, enableClusterize, enableLogs }) {
     this.wrapper = $(wrapper);
     if (this.wrapper.length === 0) {
       throw new Error('Invalid argument given for `wrapper`');
@@ -23,6 +23,7 @@ export default class ReGrid {
     this.events = getDefault(events, {});
     this.addSerialNoColumn = getDefault(addSerialNoColumn, false);
     this.enableClusterize = getDefault(enableClusterize, false);
+    this.enableLogs = getDefault(enableLogs, true);
 
     this.makeDom();
     this.bindEvents();
@@ -116,19 +117,15 @@ export default class ReGrid {
     while (dataAppended + this.pageLength < this.data.rows.length) {
       this.start = this.end;
       this.end = this.start + this.pageLength;
-
+      promises.push(this.appendNextPagePromise(this.start, this.end));
-      const promise = new Promise(resolve => {
-        setTimeout(() => {
-          const rows = this.data.rows.slice(this.start, this.end);
-          const data = this.getDataForClusterize(rows);
-
-          this.clusterize.append(data);
-          resolve();
-        }, 0);
-      });
-
       dataAppended += this.pageLength;
-      promises.push(promise);
+    }
+
+    if (this.data.rows.length % this.pageLength > 0) {
+      // last page
+      this.start = this.end;
+      this.end = this.start + this.pageLength;
+      promises.push(this.appendNextPagePromise(this.start, this.end));
     }
 
     return promises.reduce(
@@ -136,6 +133,19 @@ export default class ReGrid {
     );
   }
 
+  appendNextPagePromise(start, end) {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        const rows = this.data.rows.slice(start, end);
+        const data = this.getDataForClusterize(rows);
+
+        this.clusterize.append(data);
+        this.log('dataAppended', rows.length);
+        resolve();
+      }, 0);
+    });
+  }
+
   getDataForClusterize(rows) {
     return rows.map((row) => getRowHTML(row, { rowIndex: row[0].rowIndex }));
   }
@@ -498,5 +508,11 @@ export default class ReGrid {
       `.data-table-col[data-is-header][data-col-index="${colIndex}"]`
     );
   }
+
+  log() {
+    if (this.enableLogs) {
+      console.log.apply(console, arguments);
+    }
+  }
 }