Render only 1000 rows first, defer remaining rows

index.html

@@ -495,8 +495,11 @@
 				]
 			};
 
-			data.rows = data.rows.concat(data.rows);
+			for (let i = 0; i < 12; i++) {
-			data.rows = data.rows.concat(data.rows);
+				data.rows = data.rows.concat(data.rows);
+			}
+
+			console.log('No of Rows:', data.rows.length)
 
 			performance.mark("ReGrid-start");
 			var grid = new ReGrid({

lib/ReGrid.js

@@ -193,15 +193,59 @@ var ReGrid = function () {
       // empty body
       this.bodyScrollable.html('\n      <table class="data-table-body table table-bordered">\n        ' + (0, _utils.getBodyHTML)([]) + '\n      </table>\n    ');
 
-      var data = this.data.rows.map(function (row) {
+      this.start = 0;
-        return (0, _utils.getRowHTML)(row, { rowIndex: row[0].rowIndex });
+      this.pageLength = 1000;
-      });
+      this.end = this.start + this.pageLength;
+
+      var initialData = this.getDataForClusterize(
+      // only append ${this.pageLength} rows in the beginning
+      // defer remaining rows
+      this.data.rows.slice(this.start, this.end));
 
       this.clusterize = new _clusterize2.default({
-        rows: data,
+        rows: initialData,
         scrollElem: this.bodyScrollable.get(0),
         contentElem: this.bodyScrollable.find('tbody').get(0)
       });
+
+      this.appendRemainingData();
+    }
+  }, {
+    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;
+
+        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);
+      }
+
+      return promises.reduce(function (prev, cur) {
+        return prev.then(cur);
+      }, Promise.resolve());
+    }
+  }, {
+    key: 'getDataForClusterize',
+    value: function getDataForClusterize(rows) {
+      return rows.map(function (row) {
+        return (0, _utils.getRowHTML)(row, { rowIndex: row[0].rowIndex });
+      });
     }
   }, {
     key: 'updateCell',
@@ -491,7 +535,7 @@ var ReGrid = function () {
   }, {
     key: 'setColumnWidths',
     value: function setColumnWidths() {
-      var _this = this;
+      var _this2 = this;
 
       var availableWidth = this.wrapper.width();
       var headerWidth = this.header.width();
@@ -504,15 +548,15 @@ var ReGrid = function () {
       var deltaWidth = (availableWidth - headerWidth) / this.data.columns.length;
 
       this.data.columns.map(function (col) {
-        var width = _this.getColumnHeaderElement(col.colIndex).width();
+        var width = _this2.getColumnHeaderElement(col.colIndex).width();
         var finalWidth = width + deltaWidth - 16;
 
-        if (_this.addSerialNoColumn && col.colIndex === 0) {
+        if (_this2.addSerialNoColumn && col.colIndex === 0) {
           return;
         }
 
-        _this.setColumnHeaderWidth(col.colIndex, finalWidth);
+        _this2.setColumnHeaderWidth(col.colIndex, finalWidth);
-        _this.setColumnWidth(col.colIndex, finalWidth);
+        _this2.setColumnWidth(col.colIndex, finalWidth);
       });
       this.setBodyWidth();
     }
@@ -524,27 +568,20 @@ var ReGrid = function () {
   }, {
     key: 'appendStyle',
     value: function appendStyle(style) {
-      var $style = this.wrapper.find('style[data-id="regrid"]');
+      this.getStyleEl();
 
-      if ($style.length === 0) {
-        $style = (0, _jQuery2.default)('<style data-id="regrid"></style>').prependTo(this.wrapper);
-      }
       // existing styles
-      var styles = $style.text();
+      var styles = this.$style.text();
 
       styles += style;
-      $style.html(styles);
+      this.$style.html(styles);
     }
   }, {
     key: 'setStyle',
     value: function setStyle(rule, style) {
-      var $style = this.wrapper.find('style[data-id="regrid"]');
+      this.getStyleEl();
 
-      if ($style.length === 0) {
+      var styles = this.$style.text();
-        $style = (0, _jQuery2.default)('<style data-id="regrid"></style>').prependTo(this.wrapper);
-      }
-
-      var styles = $style.text();
       var patternStr = (0, _utils.escapeRegExp)(rule) + ' {([^}]*)}';
       var pattern = new RegExp(patternStr, 'g');
 
@@ -556,7 +593,16 @@ var ReGrid = function () {
 
         return replacer.replace(propPattern, '');
       });
-      $style.html(styles);
+      this.$style.html(styles);
+    }
+  }, {
+    key: 'getStyleEl',
+    value: function getStyleEl() {
+      if (!this.$style) {
+        this.$style = (0, _jQuery2.default)('<style data-id="regrid"></style>').prependTo(this.wrapper);
+      }
+
+      return this.$style;
     }
   }, {
     key: 'getColumn',

src/regrid.js

@@ -90,15 +90,54 @@ export default class ReGrid {
       </table>
     `);
 
-    const data = this.data.rows.map(
+    this.start = 0;
-      (row) => getRowHTML(row, { rowIndex: row[0].rowIndex })
+    this.pageLength = 1000;
+    this.end = this.start + this.pageLength;
+
+    const initialData = this.getDataForClusterize(
+      // only append ${this.pageLength} rows in the beginning
+      // defer remaining rows
+      this.data.rows.slice(this.start, this.end)
     );
 
     this.clusterize = new Clusterize({
-      rows: data,
+      rows: initialData,
       scrollElem: this.bodyScrollable.get(0),
       contentElem: this.bodyScrollable.find('tbody').get(0)
     });
+
+    this.appendRemainingData();
+  }
+
+  appendRemainingData() {
+    let dataAppended = this.pageLength;
+    const promises = [];
+
+    while (dataAppended + this.pageLength < this.data.rows.length) {
+      this.start = this.end;
+      this.end = this.start + this.pageLength;
+
+      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);
+    }
+
+    return promises.reduce(
+      (prev, cur) => prev.then(cur), Promise.resolve()
+    );
+  }
+
+  getDataForClusterize(rows) {
+    return rows.map((row) => getRowHTML(row, { rowIndex: row[0].rowIndex }));
   }
 
   updateCell(rowIndex, colIndex, value) {
@@ -405,26 +444,19 @@ export default class ReGrid {
   }
 
   appendStyle(style) {
-    let $style = this.wrapper.find('style[data-id="regrid"]');
+    this.getStyleEl();
 
-    if ($style.length === 0) {
-      $style = $('<style data-id="regrid"></style>').prependTo(this.wrapper);
-    }
     // existing styles
-    let styles = $style.text();
+    let styles = this.$style.text();
 
     styles += style;
-    $style.html(styles);
+    this.$style.html(styles);
   }
 
   setStyle(rule, style) {
-    let $style = this.wrapper.find('style[data-id="regrid"]');
+    this.getStyleEl();
 
-    if ($style.length === 0) {
+    let styles = this.$style.text();
-      $style = $('<style data-id="regrid"></style>').prependTo(this.wrapper);
-    }
-
-    let styles = $style.text();
     const patternStr = `${escapeRegExp(rule)} {([^}]*)}`;
     const pattern = new RegExp(patternStr, 'g');
 
@@ -437,7 +469,16 @@ export default class ReGrid {
 
       return replacer.replace(propPattern, '');
     });
-    $style.html(styles);
+    this.$style.html(styles);
+  }
+
+  getStyleEl() {
+    if (!this.$style) {
+      this.$style = $('<style data-id="regrid"></style>')
+        .prependTo(this.wrapper);
+    }
+
+    return this.$style;
   }
 
   getColumn(colIndex) {