append first page, and rest in next tick

lib/frappe-datatable.js

@@ -942,12 +942,6 @@ var CellManager = function () {
         });
       });
 
-      ['left', 'right', 'up', 'down'].map(function (direction) {
-        return _keyboard2.default.on(direction, function () {
-          return _this2.scrollToCell(_this2.$focusedCell);
-        });
-      });
-
       _keyboard2.default.on('esc', function () {
         _this2.deactivateEditing();
       });
@@ -1049,6 +1043,7 @@ var CellManager = function () {
       $cell.classList.add('selected');
 
       this.highlightRowColumnHeader($cell);
+      this.scrollToCell($cell);
     }
   }, {
     key: 'highlightRowColumnHeader',
@@ -2727,6 +2722,19 @@ var DataManager = function () {
         }
         return 0;
       });
+
+      if (this.hasColumn('Sr. No')) {
+        // update Sr. No indexes
+        var srNoColIndex = this.getColumnIndex('Sr. No');
+        this.rows = this.rows.map(function (row, index) {
+          return row.map(function (cell) {
+            if (cell.colIndex === srNoColIndex) {
+              cell.content = index + 1 + '';
+            }
+            return cell;
+          });
+        });
+      }
     }
   }, {
     key: 'reverseArray',
@@ -2943,6 +2951,13 @@ var DataManager = function () {
         return col.content === name;
       }));
     }
+  }, {
+    key: 'getColumnIndex',
+    value: function getColumnIndex(name) {
+      return this.columns.findIndex(function (col) {
+        return col.content === name;
+      });
+    }
   }, {
     key: 'currentSort',
     get: function get() {
@@ -3076,7 +3091,7 @@ var BodyRenderer = function () {
     this.cellmanager = instance.cellmanager;
     this.bodyScrollable = instance.bodyScrollable;
     this.log = instance.log;
-    this.appendNextPage = (0, _utils.promisify)(this.appendNextPage, this);
+    this.appendRemainingData = (0, _utils.promisify)(this.appendRemainingData, this);
   }
 
   _createClass(BodyRenderer, [{
@@ -3100,14 +3115,18 @@ var BodyRenderer = function () {
     value: function renderBodyWithClusterize() {
       var _this = this;
 
+      // first page
+      var rows = this.datamanager.getRows(0, 20);
+      var initialData = this.getDataForClusterize(rows);
+
       if (!this.clusterize) {
         // empty body
         this.bodyScrollable.innerHTML = '\n        <table class="data-table-body">\n          ' + getBodyHTML([]) + '\n        </table>\n      ';
 
-        // Rows will be appended as promises, so we don't block
+        // first 20 rows will appended
-        // even for the first page render
+        // rest of them in nextTick
         this.clusterize = new _clusterize2.default({
-          rows: [],
+          rows: initialData,
           scrollElem: this.bodyScrollable,
           contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
           callbacks: {
@@ -3118,61 +3137,24 @@ var BodyRenderer = function () {
             }
           },
           /* eslint-disable */
-          no_data_text: 'Loading..',
+          no_data_text: this.options.loadingText,
           no_data_class: 'empty-state'
           /* eslint-enable */
         });
+
+        // setDimensions requires atleast 1 row to exist in dom
+        this.instance.setDimensions();
       } else {
-        this.clusterize.update([]);
+        this.clusterize.update(initialData);
       }
 
       this.appendRemainingData();
-      // setDimensions will work only if there is atleast one row appended
-      // so we call it as soon as the first Page is appended
-      this.firstPagePromise.then(function () {
-        _this.instance.setDimensions();
-      });
     }
   }, {
     key: 'appendRemainingData',
     value: function appendRemainingData() {
-      var chunkSize = 1000;
+      var rows = this.datamanager.getRows(20);
-      var start = 0,
-          end = chunkSize;
-      var dataAppended = 0;
-      this.firstPagePromise = null;
-
-      var promises = [];
-      var rowCount = this.datamanager.getRowCount();
-
-      while (dataAppended + chunkSize < rowCount) {
-        var promise = this.appendNextPage(start, end);
-        if (!this.firstPagePromise) this.firstPagePromise = promise;
-        promises.push(promise);
-        dataAppended += chunkSize;
-        start = end;
-        end += chunkSize;
-      }
-
-      if (rowCount % chunkSize > 0) {
-        // last page
-        var _promise = this.appendNextPage(start, end);
-        if (!this.firstPagePromise) this.firstPagePromise = _promise;
-        promises.push(_promise);
-        dataAppended += rowCount % chunkSize;
-      }
-
-      return (0, _utils.chainPromises)(promises);
-    }
-
-    // promisified
-
-  }, {
-    key: 'appendNextPage',
-    value: function appendNextPage(start, end) {
-      var rows = this.datamanager.getRows(start, end);
       var data = this.getDataForClusterize(rows);
-
       this.clusterize.append(data);
     }
   }, {
@@ -3321,7 +3303,8 @@ exports.default = {
   addCheckboxColumn: true,
   enableClusterize: true,
   enableLogs: false,
-  takeAvailableSpace: false
+  takeAvailableSpace: false,
+  loadingText: 'Loading...'
 };
 module.exports = exports['default'];
 

src/body-renderer.js

@@ -1,7 +1,7 @@
 import $ from './dom';
 import Clusterize from 'clusterize.js';
 import { getRowHTML } from './rowmanager';
-import { promisify, chainPromises } from './utils';
+import { promisify } from './utils';
 
 export default class BodyRenderer {
   constructor(instance) {
@@ -12,7 +12,7 @@ export default class BodyRenderer {
     this.cellmanager = instance.cellmanager;
     this.bodyScrollable = instance.bodyScrollable;
     this.log = instance.log;
-    this.appendNextPage = promisify(this.appendNextPage, this);
+    this.appendRemainingData = promisify(this.appendRemainingData, this);
   }
 
   render() {
@@ -34,6 +34,9 @@ export default class BodyRenderer {
   }
 
   renderBodyWithClusterize() {
+    // first page
+    const rows = this.datamanager.getRows(0, 20);
+    const initialData = this.getDataForClusterize(rows);
 
     if (!this.clusterize) {
       // empty body
@@ -43,10 +46,10 @@ export default class BodyRenderer {
         </table>
       `;
 
-      // Rows will be appended as promises, so we don't block
+      // first 20 rows will appended
-      // even for the first page render
+      // rest of them in nextTick
       this.clusterize = new Clusterize({
-        rows: [],
+        rows: initialData,
         scrollElem: this.bodyScrollable,
         contentElem: $('tbody', this.bodyScrollable),
         callbacks: {
@@ -57,56 +60,23 @@ export default class BodyRenderer {
           }
         },
         /* eslint-disable */
-        no_data_text: 'Loading..',
+        no_data_text: this.options.loadingText,
         no_data_class: 'empty-state'
         /* eslint-enable */
       });
+
+      // setDimensions requires atleast 1 row to exist in dom
+      this.instance.setDimensions();
     } else {
-      this.clusterize.update([]);
+      this.clusterize.update(initialData);
     }
 
     this.appendRemainingData();
-    // setDimensions will work only if there is atleast one row appended
-    // so we call it as soon as the first Page is appended
-    this.firstPagePromise.then(() => {
-      this.instance.setDimensions();
-    });
   }
 
   appendRemainingData() {
-    const chunkSize = 1000;
+    const rows = this.datamanager.getRows(20);
-    let start = 0, end = chunkSize;
-    let dataAppended = 0;
-    this.firstPagePromise = null;
-
-    const promises = [];
-    const rowCount = this.datamanager.getRowCount();
-
-    while (dataAppended + chunkSize < rowCount) {
-      const promise = this.appendNextPage(start, end);
-      if (!this.firstPagePromise) this.firstPagePromise = promise;
-      promises.push(promise);
-      dataAppended += chunkSize;
-      start = end;
-      end += chunkSize;
-    }
-
-    if (rowCount % chunkSize > 0) {
-      // last page
-      const promise = this.appendNextPage(start, end);
-      if (!this.firstPagePromise) this.firstPagePromise = promise;
-      promises.push(promise);
-      dataAppended += rowCount % chunkSize;
-    }
-
-    return chainPromises(promises);
-  }
-
-  // promisified
-  appendNextPage(start, end) {
-    const rows = this.datamanager.getRows(start, end);
     const data = this.getDataForClusterize(rows);
-
     this.clusterize.append(data);
   }