Split body rendering code in class BodyRenderer

lib/frappe-datatable.js

@@ -1338,6 +1338,8 @@ var ColumnManager = function () {
   }, {
     key: 'refreshHeader',
     value: function refreshHeader() {
+      var _this = this;
+
       var columns = this.datamanager.getColumns();
 
       if (!(0, _dom2.default)('.data-table-col', this.header)) {
@@ -1351,20 +1353,21 @@ var ColumnManager = function () {
           (0, _dom2.default)('thead', this.header).innerHTML = (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 });
           return;
         }
+
+        $cols.map(function ($col, i) {
+          var column = columns[i];
           // column sorted or order changed
           // update colIndex of each header cell
-        $cols.map(function ($col, i) {
           _dom2.default.data($col, {
-            colIndex: columns[i].colIndex
+            colIndex: column.colIndex
-          });
           });
 
-        // show sort indicator
+          // refresh sort indicator
-        var sortColIndex = this.datamanager.currentSort.colIndex;
+          var sortIndicator = (0, _dom2.default)('.sort-indicator', $col);
-        if (sortColIndex !== -1) {
+          if (sortIndicator) {
-          var order = this.datamanager.currentSort.sortOrder;
+            sortIndicator.innerHTML = _this.options.sortIndicator[column.sortOrder];
-          (0, _dom2.default)('.sort-indicator', $cols[sortColIndex]).innerHTML = this.options.sortIndicator[order];
           }
+        });
       }
       // reset columnMap
       this.$columnMap = [];
@@ -1379,7 +1382,7 @@ var ColumnManager = function () {
   }, {
     key: 'bindDropdown',
     value: function bindDropdown() {
-      var _this = this;
+      var _this2 = this;
 
       var $activeDropdown = void 0;
       _dom2.default.on(this.header, 'click', '.data-table-dropdown-toggle', function (e, $button) {
@@ -1412,7 +1415,7 @@ var ColumnManager = function () {
 
         var callback = dropdownItems[index].action;
 
-        callback && callback.call(_this.instance, _this.getColumn(colIndex));
+        callback && callback.call(_this2.instance, _this2.getColumn(colIndex));
       });
 
       function deactivateDropdown(e) {
@@ -1423,7 +1426,7 @@ var ColumnManager = function () {
   }, {
     key: 'bindResizeColumn',
     value: function bindResizeColumn() {
-      var _this2 = this;
+      var _this3 = this;
 
       var isDragging = false;
       var $resizingCell = void 0,
@@ -1437,7 +1440,7 @@ var ColumnManager = function () {
         var _$$data3 = _dom2.default.data($resizingCell),
             colIndex = _$$data3.colIndex;
 
-        var col = _this2.getColumn(colIndex);
+        var col = _this3.getColumn(colIndex);
 
         if (col && col.resizable === false) {
           return;
@@ -1457,8 +1460,8 @@ var ColumnManager = function () {
 
         var width = _dom2.default.style((0, _dom2.default)('.content', $resizingCell), 'width');
 
-        _this2.setColumnWidth(colIndex, width);
+        _this3.setColumnWidth(colIndex, width);
-        _this2.instance.setBodyWidth();
+        _this3.instance.setBodyWidth();
         $resizingCell = null;
       });
 
@@ -1469,18 +1472,18 @@ var ColumnManager = function () {
         var _$$data5 = _dom2.default.data($resizingCell),
             colIndex = _$$data5.colIndex;
 
-        if (_this2.getColumnMinWidth(colIndex) > finalWidth) {
+        if (_this3.getColumnMinWidth(colIndex) > finalWidth) {
           // don't resize past minWidth
           return;
         }
 
-        _this2.setColumnHeaderWidth(colIndex, finalWidth);
+        _this3.setColumnHeaderWidth(colIndex, finalWidth);
       });
     }
   }, {
     key: 'bindMoveColumn',
     value: function bindMoveColumn() {
-      var _this3 = this;
+      var _this4 = this;
 
       var initialized = void 0;
 
@@ -1489,10 +1492,10 @@ var ColumnManager = function () {
           _dom2.default.off(document.body, 'mousemove', initialize);
           return;
         }
-        var ready = (0, _dom2.default)('.data-table-col', _this3.header);
+        var ready = (0, _dom2.default)('.data-table-col', _this4.header);
         if (!ready) return;
 
-        var $parent = (0, _dom2.default)('.data-table-row', _this3.header);
+        var $parent = (0, _dom2.default)('.data-table-row', _this4.header);
 
         _dom2.default.on(document, 'drag', '.data-table-col', (0, _utils.throttle)(function (e, $target) {
           if (e.offsetY > 200) {
@@ -1504,7 +1507,7 @@ var ColumnManager = function () {
           }
         }));
 
-        _this3.sortable = _sortablejs2.default.create($parent, {
+        _this4.sortable = _sortablejs2.default.create($parent, {
           onEnd: function onEnd(e) {
             var oldIndex = e.oldIndex,
                 newIndex = e.newIndex;
@@ -1516,7 +1519,7 @@ var ColumnManager = function () {
 
             if (+colIndex === newIndex) return;
 
-            _this3.switchColumn(oldIndex, newIndex);
+            _this4.switchColumn(oldIndex, newIndex);
           },
           preventOnFilter: false,
           filter: '.column-resizer, .data-table-dropdown',
@@ -1529,7 +1532,7 @@ var ColumnManager = function () {
   }, {
     key: 'bindSortColumn',
     value: function bindSortColumn() {
-      var _this4 = this;
+      var _this5 = this;
 
       _dom2.default.on(this.header, 'click', '.data-table-col .column-title', function (e, span) {
         var $cell = span.closest('.data-table-col');
@@ -1539,15 +1542,15 @@ var ColumnManager = function () {
             sortOrder = _$$data7.sortOrder;
 
         sortOrder = (0, _utils.getDefault)(sortOrder, 'none');
-        var col = _this4.getColumn(colIndex);
+        var col = _this5.getColumn(colIndex);
 
         if (col && col.sortable === false) {
           return;
         }
 
         // reset sort indicator
-        (0, _dom2.default)('.sort-indicator', _this4.header).textContent = '';
+        (0, _dom2.default)('.sort-indicator', _this5.header).textContent = '';
-        _dom2.default.each('.data-table-col', _this4.header).map(function ($cell) {
+        _dom2.default.each('.data-table-col', _this5.header).map(function ($cell) {
           _dom2.default.data($cell, {
             sortOrder: 'none'
           });
@@ -1571,55 +1574,55 @@ var ColumnManager = function () {
         });
         (0, _dom2.default)('.sort-indicator', $cell).textContent = textContent;
 
-        _this4.sortColumn(colIndex, nextSortOrder);
+        _this5.sortColumn(colIndex, nextSortOrder);
       });
     }
   }, {
     key: 'sortColumn',
     value: function sortColumn(colIndex, nextSortOrder) {
-      var _this5 = this;
+      var _this6 = this;
 
       this.instance.freeze();
       this.sortRows(colIndex, nextSortOrder).then(function () {
-        _this5.refreshHeader();
-        return _this5.rowmanager.refreshRows();
-      }).then(function () {
-        return _this5.instance.unfreeze();
-      }).then(function () {
-        _this5.fireEvent('onSortColumn', _this5.getColumn(colIndex));
-      });
-    }
-  }, {
-    key: 'removeColumn',
-    value: function removeColumn(colIndex) {
-      var _this6 = this;
-
-      var removedCol = this.getColumn(colIndex);
-      this.instance.freeze();
-      this.datamanager.removeColumn(colIndex).then(function () {
         _this6.refreshHeader();
         return _this6.rowmanager.refreshRows();
       }).then(function () {
         return _this6.instance.unfreeze();
       }).then(function () {
-        _this6.fireEvent('onRemoveColumn', removedCol);
+        _this6.fireEvent('onSortColumn', _this6.getColumn(colIndex));
+      });
+    }
+  }, {
+    key: 'removeColumn',
+    value: function removeColumn(colIndex) {
+      var _this7 = this;
+
+      var removedCol = this.getColumn(colIndex);
+      this.instance.freeze();
+      this.datamanager.removeColumn(colIndex).then(function () {
+        _this7.refreshHeader();
+        return _this7.rowmanager.refreshRows();
+      }).then(function () {
+        return _this7.instance.unfreeze();
+      }).then(function () {
+        _this7.fireEvent('onRemoveColumn', removedCol);
       });
     }
   }, {
     key: 'switchColumn',
     value: function switchColumn(oldIndex, newIndex) {
-      var _this7 = this;
+      var _this8 = this;
 
       this.instance.freeze();
       this.datamanager.switchColumn(oldIndex, newIndex).then(function () {
-        _this7.refreshHeader();
+        _this8.refreshHeader();
-        return _this7.rowmanager.refreshRows();
+        return _this8.rowmanager.refreshRows();
       }).then(function () {
-        _this7.setColumnWidth(oldIndex);
+        _this8.setColumnWidth(oldIndex);
-        _this7.setColumnWidth(newIndex);
+        _this8.setColumnWidth(newIndex);
-        _this7.instance.unfreeze();
+        _this8.instance.unfreeze();
       }).then(function () {
-        _this7.fireEvent('onSwitchColumn', _this7.getColumn(oldIndex), _this7.getColumn(newIndex));
+        _this8.fireEvent('onSwitchColumn', _this8.getColumn(oldIndex), _this8.getColumn(newIndex));
       });
     }
   }, {
@@ -1662,7 +1665,7 @@ var ColumnManager = function () {
   }, {
     key: 'setupMinWidth',
     value: function setupMinWidth() {
-      var _this8 = this;
+      var _this9 = this;
 
       // cache minWidth for each column
       this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
@@ -1673,16 +1676,16 @@ var ColumnManager = function () {
         var _$$data8 = _dom2.default.data(col),
             colIndex = _$$data8.colIndex;
 
-        if (!_this8.minWidthMap[colIndex]) {
+        if (!_this9.minWidthMap[colIndex]) {
           // only set this once
-          _this8.minWidthMap[colIndex] = width;
+          _this9.minWidthMap[colIndex] = width;
         }
       });
     }
   }, {
     key: 'setNaturalColumnWidth',
     value: function setNaturalColumnWidth() {
-      var _this9 = this;
+      var _this10 = this;
 
       // set initial width as naturally calculated by table's first row
       _dom2.default.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map(function ($cell) {
@@ -1693,19 +1696,19 @@ var ColumnManager = function () {
         var _$$data9 = _dom2.default.data($cell),
             colIndex = _$$data9.colIndex;
 
-        var minWidth = _this9.getColumnMinWidth(colIndex);
+        var minWidth = _this10.getColumnMinWidth(colIndex);
 
         if (width < minWidth) {
           width = minWidth;
         }
-        _this9.setColumnWidth(colIndex, width);
+        _this10.setColumnWidth(colIndex, width);
-        _this9.setDefaultCellHeight(height);
+        _this10.setDefaultCellHeight(height);
       });
     }
   }, {
     key: 'distributeRemainingWidth',
     value: function distributeRemainingWidth() {
-      var _this10 = this;
+      var _this11 = this;
 
       if (!this.options.takeAvailableSpace) return;
 
@@ -1724,11 +1727,11 @@ var ColumnManager = function () {
       var deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
 
       resizableColumns.map(function (col) {
-        var width = _dom2.default.style(_this10.getColumnHeaderElement(col.colIndex), 'width');
+        var width = _dom2.default.style(_this11.getColumnHeaderElement(col.colIndex), 'width');
         var finalWidth = Math.min(width + deltaWidth) - 2;
 
-        _this10.setColumnHeaderWidth(col.colIndex, finalWidth);
+        _this11.setColumnHeaderWidth(col.colIndex, finalWidth);
-        _this10.setColumnWidth(col.colIndex, finalWidth);
+        _this11.setColumnWidth(col.colIndex, finalWidth);
       });
       this.instance.setBodyWidth();
     }
@@ -1742,12 +1745,12 @@ var ColumnManager = function () {
   }, {
     key: 'setColumnAlignments',
     value: function setColumnAlignments() {
-      var _this11 = this;
+      var _this12 = this;
 
       // align columns
       this.getColumns().map(function (column) {
         if (['left', 'center', 'right'].includes(column.align)) {
-          _this11.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
+          _this12.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
             'text-align': column.align
           });
         }
@@ -2119,16 +2122,10 @@ Object.defineProperty(exports, "__esModule", {
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-exports.getBodyHTML = getBodyHTML;
-
 var _dom = __webpack_require__(0);
 
 var _dom2 = _interopRequireDefault(_dom);
 
-var _clusterize = __webpack_require__(7);
-
-var _clusterize2 = _interopRequireDefault(_clusterize);
-
 var _datamanager = __webpack_require__(8);
 
 var _datamanager2 = _interopRequireDefault(_datamanager);
@@ -2145,6 +2142,10 @@ var _rowmanager = __webpack_require__(4);
 
 var _rowmanager2 = _interopRequireDefault(_rowmanager);
 
+var _bodyRenderer = __webpack_require__(18);
+
+var _bodyRenderer2 = _interopRequireDefault(_bodyRenderer);
+
 var _style = __webpack_require__(11);
 
 var _style2 = _interopRequireDefault(_style);
@@ -2229,6 +2230,7 @@ var DataTable = function () {
     this.rowmanager = new _rowmanager2.default(this);
     this.columnmanager = new _columnmanager2.default(this);
     this.cellmanager = new _cellmanager2.default(this);
+    this.bodyRenderer = new _bodyRenderer2.default(this);
 
     if (this.options.data) {
       this.refresh(this.options.data);
@@ -2239,6 +2241,7 @@ var DataTable = function () {
     key: 'prepare',
     value: function prepare() {
       this.prepareDom();
+      this.unfreeze();
     }
   }, {
     key: 'prepareDom',
@@ -2249,7 +2252,6 @@ var DataTable = function () {
       this.header = (0, _dom2.default)('.data-table-header', this.wrapper);
       this.bodyScrollable = (0, _dom2.default)('.body-scrollable', this.wrapper);
       this.freezeContainer = (0, _dom2.default)('.freeze-container', this.wrapper);
-      this.unfreeze();
     }
   }, {
     key: 'refresh',
@@ -2284,98 +2286,7 @@ var DataTable = function () {
   }, {
     key: 'renderBody',
     value: function renderBody() {
-      if (this.options.enableClusterize) {
+      this.bodyRenderer.render();
-        this.renderBodyWithClusterize();
-      } else {
-        this.renderBodyHTML();
-      }
-    }
-  }, {
-    key: 'renderBodyHTML',
-    value: function renderBodyHTML() {
-      var rows = this.datamanager.getRows();
-
-      this.bodyScrollable.innerHTML = '\n      <table class="data-table-body">\n        ' + getBodyHTML(rows) + '\n      </table>\n    ';
-    }
-  }, {
-    key: 'renderBodyWithClusterize',
-    value: function renderBodyWithClusterize() {
-      var _this = this;
-
-      // empty body
-      this.bodyScrollable.innerHTML = '\n      <table class="data-table-body">\n        ' + getBodyHTML([]) + '\n      </table>\n    ';
-
-      this.start = 0;
-      this.pageLength = 1000;
-      this.end = this.start + this.pageLength;
-
-      // only append ${this.pageLength} rows in the beginning,
-      // defer remaining
-      var rows = this.datamanager.getRows(this.start, this.end);
-      var initialData = this.getDataForClusterize(rows);
-
-      this.clusterize = new _clusterize2.default({
-        rows: initialData,
-        scrollElem: this.bodyScrollable,
-        contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
-        callbacks: {
-          clusterChanged: function clusterChanged() {
-            _this.rowmanager.highlightCheckedRows();
-            _this.cellmanager.selectAreaOnClusterChanged();
-            _this.cellmanager.focusCellOnClusterChanged();
-          }
-        }
-      });
-      this.log('dataAppended', this.pageLength);
-      this.appendRemainingData();
-    }
-  }, {
-    key: 'appendRemainingData',
-    value: function appendRemainingData() {
-      var dataAppended = this.pageLength;
-      var promises = [];
-      var rowCount = this.datamanager.getRowCount();
-
-      while (dataAppended + this.pageLength < rowCount) {
-        this.start = this.end;
-        this.end = this.start + this.pageLength;
-        promises.push(this.appendNextPagePromise(this.start, this.end));
-        dataAppended += this.pageLength;
-      }
-
-      if (rowCount % 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 _this2 = this;
-
-      return new Promise(function (resolve) {
-        setTimeout(function () {
-          var rows = _this2.datamanager.getRows(start, end);
-          var data = _this2.getDataForClusterize(rows);
-
-          _this2.clusterize.append(data);
-          _this2.log('dataAppended', rows.length);
-          resolve();
-        }, 0);
-      });
-    }
-  }, {
-    key: 'getDataForClusterize',
-    value: function getDataForClusterize(rows) {
-      return rows.map(function (row) {
-        return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex });
-      });
     }
   }, {
     key: 'setDimensions',
@@ -2476,11 +2387,7 @@ var DataTable = function () {
 DataTable.instances = 0;
 
 exports.default = DataTable;
-function getBodyHTML(rows) {
+module.exports = exports['default'];
-  return '\n    <tbody>\n      ' + rows.map(function (row) {
-    return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex });
-  }).join('') + '\n    </tbody>\n  ';
-}
 
 /***/ }),
 /* 7 */
@@ -2562,87 +2469,50 @@ var DataManager = function () {
       this.rowCount = 0;
       this.columns = [];
       this.rows = [];
-      this._serialNoColumnAdded = false;
-      this._checkboxColumnAdded = false;
-
-      // initialize sort state
-      this.currentSort = {
-        colIndex: -1,
-        sortOrder: 'none' // asc, desc, none
-      };
 
       this.columns = this.prepareColumns(columns);
       this.rows = this.prepareRows(rows);
 
       this.prepareNumericColumns();
     }
+
+    // computed property
+
   }, {
     key: 'prepareColumns',
     value: function prepareColumns(columns) {
-      if (!Array.isArray(columns)) {
+      this.validateColumns(columns);
-        throw new DataError('`columns` must be an array');
-      }
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = undefined;
 
-      try {
+      if (this.options.addSerialNoColumn && !this.hasColumn('Sr. No')) {
-        for (var _iterator = columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var column = _step.value;
-
-          if (typeof column !== 'string' && (typeof column === 'undefined' ? 'undefined' : _typeof(column)) !== 'object') {
-            throw new DataError('`column` must be a string or an object');
-          }
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
-      }
-
-      if (this.options.addSerialNoColumn && !this._serialNoColumnAdded) {
         var val = {
           content: 'Sr. No',
+          align: 'center',
           editable: false,
           resizable: false,
-          align: 'center',
           focusable: false,
           dropdown: false
         };
 
         columns = [val].concat(columns);
-        this._serialNoColumnAdded = true;
       }
 
-      if (this.options.addCheckboxColumn && !this._checkboxColumnAdded) {
+      if (this.options.addCheckboxColumn && !this.hasColumn('Checkbox')) {
         var _val = {
-          content: '<input type="checkbox" />',
+          content: 'Checkbox',
           editable: false,
           resizable: false,
           sortable: false,
           focusable: false,
-          dropdown: false
+          dropdown: false,
+          format: function format(val) {
+            return '<input type="checkbox" />';
+          }
         };
 
         columns = [_val].concat(columns);
-        this._checkboxColumnAdded = true;
       }
 
-      return _prepareColumns(columns, {
+      return _prepareColumns(columns);
-        isHeader: 1,
-        format: function format(value) {
-          return '<span class="column-title">' + value + '</span>';
-        }
-      });
     }
   }, {
     key: 'prepareNumericColumns',
@@ -2663,31 +2533,19 @@ var DataManager = function () {
     value: function prepareRows(rows) {
       var _this = this;
 
-      if (!Array.isArray(rows)) {
+      this.validateRows(rows);
-        throw new DataError('`rows` must be an array');
-      }
-
-      rows.forEach(function (row, i) {
-        if (!Array.isArray(row)) {
-          throw new DataError('`row` must be an array');
-        }
-
-        if (row.length !== _this.getColumnCount()) {
-          throw new DataError('Row index "' + i + '" doesn\'t match column length');
-        }
-      });
 
       rows = rows.map(function (row, i) {
         var index = _this._getNextRowCount();
 
         if (row.length < _this.columns.length) {
-          if (_this._serialNoColumnAdded) {
+          if (_this.hasColumn('Sr. No')) {
             var val = index + 1 + '';
 
             row = [val].concat(row);
           }
 
-          if (_this._checkboxColumnAdded) {
+          if (_this.hasColumn('Checkbox')) {
             var _val2 = '<input type="checkbox" />';
 
             row = [_val2].concat(row);
@@ -2699,15 +2557,44 @@ var DataManager = function () {
 
       return rows;
     }
+  }, {
+    key: 'validateColumns',
+    value: function validateColumns(columns) {
+      if (!Array.isArray(columns)) {
+        throw new DataError('`columns` must be an array');
+      }
+
+      columns.forEach(function (column, i) {
+        if (typeof column !== 'string' && (typeof column === 'undefined' ? 'undefined' : _typeof(column)) !== 'object') {
+          throw new DataError('column "' + i + '" must be a string or an object');
+        }
+      });
+    }
+  }, {
+    key: 'validateRows',
+    value: function validateRows(rows) {
+      var _this2 = this;
+
+      if (!Array.isArray(rows)) {
+        throw new DataError('`rows` must be an array');
+      }
+
+      rows.forEach(function (row, i) {
+        if (!Array.isArray(row)) {
+          throw new DataError('`row` must be an array');
+        }
+
+        if (row.length !== _this2.getColumnCount(true)) {
+          throw new DataError('Row index "' + i + '" doesn\'t match column length');
+        }
+      });
+    }
   }, {
     key: 'appendRows',
     value: function appendRows(rows) {
-      if (Array.isArray(rows) && !Array.isArray(rows[0])) {
+      this.validateRows(rows);
-        rows = [rows];
-      }
-      var _rows = this.prepareRows(rows);
 
-      this.rows = this.rows.concat(_rows);
+      this.rows = this.rows.concat(this.prepareRows(rows));
     }
   }, {
     key: 'sortRows',
@@ -2716,6 +2603,21 @@ var DataManager = function () {
 
       colIndex = +colIndex;
 
+      // reset sortOrder and update for colIndex
+      this.getColumns().map(function (col) {
+        if (col.colIndex === colIndex) {
+          col.sortOrder = sortOrder;
+        } else {
+          col.sortOrder = 'none';
+        }
+      });
+
+      this._sortRows(colIndex, sortOrder);
+    }
+  }, {
+    key: '_sortRows',
+    value: function _sortRows(colIndex, sortOrder) {
+
       if (this.currentSort.colIndex === colIndex) {
         // reverse the array if only sortOrder changed
         if (this.currentSort.sortOrder === 'asc' && sortOrder === 'desc' || this.currentSort.sortOrder === 'desc' && sortOrder === 'asc') {
@@ -2744,9 +2646,6 @@ var DataManager = function () {
         }
         return 0;
       });
-
-      this.currentSort.colIndex = colIndex;
-      this.currentSort.sortOrder = sortOrder;
     }
   }, {
     key: 'reverseArray',
@@ -2895,6 +2794,24 @@ var DataManager = function () {
         rows: this.rows
       };
     }
+  }, {
+    key: 'hasColumn',
+    value: function hasColumn(name) {
+      return Boolean(this.columns.find(function (col) {
+        return col.content === name;
+      }));
+    }
+  }, {
+    key: 'currentSort',
+    get: function get() {
+      var col = this.columns.find(function (col) {
+        return col.sortOrder !== 'none';
+      });
+      return col || {
+        colIndex: -1,
+        sortOrder: 'none'
+      };
+    }
   }]);
 
   return DataManager;
@@ -2903,34 +2820,59 @@ var DataManager = function () {
 exports.default = DataManager;
 
 
-function _prepareColumns(columns) {
+function prepareRow(row, i) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var baseRowCell = {
+    rowIndex: i
+  };
 
-  var _columns = columns.map(prepareCell);
+  return row.map(prepareCell).map(function (cell) {
-
+    return Object.assign({}, baseRowCell, cell);
-  return _columns.map(function (col) {
-    return Object.assign({}, col, props);
   });
 }
 
-function prepareRow(row, i) {
+function _prepareColumns(columns) {
-  return _prepareColumns(row, {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    rowIndex: i
+
+  var baseColumn = {
+    isHeader: 1,
+    editable: true,
+    sortable: true,
+    resizable: true,
+    focusable: true,
+    dropdown: true,
+    format: function format(value) {
+      return '<span class="column-title">' + value + '</span>';
+    }
+  };
+
+  return columns.map(prepareCell).map(function (col) {
+    return Object.assign({}, baseColumn, col);
   });
 }
 
 function prepareCell(col, i) {
+  var baseCell = {
+    content: '',
+    align: 'left',
+    sortOrder: 'none',
+    colIndex: 0,
+    width: 40
+  };
+
   if (typeof col === 'string') {
     col = {
       content: col
     };
   }
-  return Object.assign(col, {
+
+  return Object.assign({}, baseCell, col, {
     colIndex: i
   });
 }
 
-var DataError = function (_extendableBuiltin2) {
+// Custom Errors
+
+var DataError = exports.DataError = function (_extendableBuiltin2) {
   _inherits(DataError, _extendableBuiltin2);
 
   function DataError() {
@@ -2944,8 +2886,6 @@ var DataError = function (_extendableBuiltin2) {
 
 ;
 
-exports.DataError = DataError;
-
 /***/ }),
 /* 9 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -3683,6 +3623,154 @@ module.exports = function (css) {
 
 module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.3","babel-loader":"7.0.0","babel-plugin-add-module-exports":"0.2.1","babel-plugin-transform-builtin-extend":"^1.1.2","babel-preset-env":"^1.6.1","chai":"3.5.0","css-loader":"^0.28.7","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","node-sass":"^4.5.3","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","yargs":"7.1.0"},"repository":{"type":"git","url":"https://github.com/frappe/datatable.git"},"keywords":["webpack","es6","starter","library","universal","umd","commonjs"],"author":"Faris Ansari","license":"MIT","bugs":{"url":"https://github.com/frappe/datatable/issues"},"homepage":"https://frappe.github.io/datatable","dependencies":{"clusterize.js":"^0.18.0","sortablejs":"^1.7.0"}}
 
+/***/ }),
+/* 18 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+exports.getBodyHTML = getBodyHTML;
+
+var _dom = __webpack_require__(0);
+
+var _dom2 = _interopRequireDefault(_dom);
+
+var _clusterize = __webpack_require__(7);
+
+var _clusterize2 = _interopRequireDefault(_clusterize);
+
+var _rowmanager = __webpack_require__(4);
+
+var _utils = __webpack_require__(1);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var BodyRenderer = function () {
+  function BodyRenderer(instance) {
+    _classCallCheck(this, BodyRenderer);
+
+    this.instance = instance;
+    this.options = instance.options;
+    this.datamanager = instance.datamanager;
+    this.rowmanager = instance.rowmanager;
+    this.cellmanager = instance.cellmanager;
+    this.bodyScrollable = instance.bodyScrollable;
+    this.log = instance.log;
+    this.appendNextPage = (0, _utils.promisify)(this.appendNextPage, this);
+  }
+
+  _createClass(BodyRenderer, [{
+    key: 'render',
+    value: function render() {
+      if (this.options.enableClusterize) {
+        this.renderBodyWithClusterize();
+      } else {
+        this.renderBodyHTML();
+      }
+    }
+  }, {
+    key: 'renderBodyHTML',
+    value: function renderBodyHTML() {
+      var rows = this.datamanager.getRows();
+
+      this.bodyScrollable.innerHTML = '\n      <table class="data-table-body">\n        ' + getBodyHTML(rows) + '\n      </table>\n    ';
+    }
+  }, {
+    key: 'renderBodyWithClusterize',
+    value: function renderBodyWithClusterize() {
+      var _this = this;
+
+      // empty body
+      this.bodyScrollable.innerHTML = '\n      <table class="data-table-body">\n        ' + getBodyHTML([]) + '\n      </table>\n    ';
+
+      this.start = 0;
+      this.pageLength = 1000;
+      this.end = this.start + this.pageLength;
+
+      // only append ${this.pageLength} rows in the beginning,
+      // defer remaining
+      var rows = this.datamanager.getRows(this.start, this.end);
+      var initialData = this.getDataForClusterize(rows);
+
+      this.clusterize = new _clusterize2.default({
+        rows: initialData,
+        scrollElem: this.bodyScrollable,
+        contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
+        callbacks: {
+          clusterChanged: function clusterChanged() {
+            _this.rowmanager.highlightCheckedRows();
+            _this.cellmanager.selectAreaOnClusterChanged();
+            _this.cellmanager.focusCellOnClusterChanged();
+          }
+        }
+      });
+      this.log('dataAppended', this.pageLength);
+      this.appendRemainingData();
+    }
+  }, {
+    key: 'appendRemainingData',
+    value: function appendRemainingData() {
+      var dataAppended = this.pageLength;
+      var promises = [];
+      var rowCount = this.datamanager.getRowCount();
+
+      while (dataAppended + this.pageLength < rowCount) {
+        this.start = this.end;
+        this.end = this.start + this.pageLength;
+        promises.push(this.appendNextPage(this.start, this.end));
+        dataAppended += this.pageLength;
+      }
+
+      if (rowCount % this.pageLength > 0) {
+        // last page
+        this.start = this.end;
+        this.end = this.start + this.pageLength;
+        promises.push(this.appendNextPage(this.start, this.end));
+      }
+
+      return promises.reduce(function (prev, cur) {
+        return prev.then(cur);
+      }, Promise.resolve());
+    }
+  }, {
+    key: 'appendNextPage',
+    value: function appendNextPage(start, end) {
+      var rows = this.datamanager.getRows(start, end);
+      var data = this.getDataForClusterize(rows);
+
+      this.clusterize.append(data);
+      this.log('dataAppended', rows.length);
+    }
+  }, {
+    key: 'getDataForClusterize',
+    value: function getDataForClusterize(rows) {
+      return rows.map(function (row) {
+        return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex });
+      });
+    }
+  }]);
+
+  return BodyRenderer;
+}();
+
+exports.default = BodyRenderer;
+;
+
+function getBodyHTML(rows) {
+  return '\n    <tbody>\n      ' + rows.map(function (row) {
+    return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex });
+  }).join('') + '\n    </tbody>\n  ';
+}
+
 /***/ })
 /******/ ]);
 });

src/body-renderer.js

@@ -0,0 +1,113 @@
+import $ from './dom';
+import Clusterize from 'clusterize.js';
+import { getRowHTML } from './rowmanager';
+import { promisify } from './utils';
+
+export default class BodyRenderer {
+  constructor(instance) {
+    this.instance = instance;
+    this.options = instance.options;
+    this.datamanager = instance.datamanager;
+    this.rowmanager = instance.rowmanager;
+    this.cellmanager = instance.cellmanager;
+    this.bodyScrollable = instance.bodyScrollable;
+    this.log = instance.log;
+    this.appendNextPage = promisify(this.appendNextPage, this);
+  }
+
+  render() {
+    if (this.options.enableClusterize) {
+      this.renderBodyWithClusterize();
+    } else {
+      this.renderBodyHTML();
+    }
+  }
+
+  renderBodyHTML() {
+    const rows = this.datamanager.getRows();
+
+    this.bodyScrollable.innerHTML = `
+      <table class="data-table-body">
+        ${getBodyHTML(rows)}
+      </table>
+    `;
+  }
+
+  renderBodyWithClusterize() {
+
+    // empty body
+    this.bodyScrollable.innerHTML = `
+      <table class="data-table-body">
+        ${getBodyHTML([])}
+      </table>
+    `;
+
+    this.start = 0;
+    this.pageLength = 1000;
+    this.end = this.start + this.pageLength;
+
+    // only append ${this.pageLength} rows in the beginning,
+    // defer remaining
+    const rows = this.datamanager.getRows(this.start, this.end);
+    const initialData = this.getDataForClusterize(rows);
+
+    this.clusterize = new Clusterize({
+      rows: initialData,
+      scrollElem: this.bodyScrollable,
+      contentElem: $('tbody', this.bodyScrollable),
+      callbacks: {
+        clusterChanged: () => {
+          this.rowmanager.highlightCheckedRows();
+          this.cellmanager.selectAreaOnClusterChanged();
+          this.cellmanager.focusCellOnClusterChanged();
+        }
+      }
+    });
+    this.log('dataAppended', this.pageLength);
+    this.appendRemainingData();
+  }
+
+  appendRemainingData() {
+    let dataAppended = this.pageLength;
+    const promises = [];
+    const rowCount = this.datamanager.getRowCount();
+
+    while (dataAppended + this.pageLength < rowCount) {
+      this.start = this.end;
+      this.end = this.start + this.pageLength;
+      promises.push(this.appendNextPage(this.start, this.end));
+      dataAppended += this.pageLength;
+    }
+
+    if (rowCount % this.pageLength > 0) {
+      // last page
+      this.start = this.end;
+      this.end = this.start + this.pageLength;
+      promises.push(this.appendNextPage(this.start, this.end));
+    }
+
+    return promises.reduce(
+      (prev, cur) => prev.then(cur), Promise.resolve()
+    );
+  }
+
+  appendNextPage(start, end) {
+    const rows = this.datamanager.getRows(start, end);
+    const data = this.getDataForClusterize(rows);
+
+    this.clusterize.append(data);
+    this.log('dataAppended', rows.length);
+  }
+
+  getDataForClusterize(rows) {
+    return rows.map((row) => getRowHTML(row, { rowIndex: row[0].rowIndex }));
+  }
+};
+
+export function getBodyHTML(rows) {
+  return `
+    <tbody>
+      ${rows.map(row => getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
+    </tbody>
+  `;
+}

src/columnmanager.js

@@ -37,20 +37,21 @@ export default class ColumnManager {
         $('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
         return;
       }
+
+      $cols.map(($col, i) => {
+        const column = columns[i];
         // column sorted or order changed
         // update colIndex of each header cell
-      $cols.map(($col, i) => {
         $.data($col, {
-          colIndex: columns[i].colIndex
+          colIndex: column.colIndex
-        });
         });
 
-      // show sort indicator
+        // refresh sort indicator
-      const sortColIndex = this.datamanager.currentSort.colIndex;
+        const sortIndicator = $('.sort-indicator', $col);
-      if (sortColIndex !== -1) {
+        if (sortIndicator) {
-        const order = this.datamanager.currentSort.sortOrder;
+          sortIndicator.innerHTML = this.options.sortIndicator[column.sortOrder];
-        $('.sort-indicator', $cols[sortColIndex]).innerHTML = this.options.sortIndicator[order];
         }
+      });
     }
     // reset columnMap
     this.$columnMap = [];

src/datatable.js

@@ -1,13 +1,10 @@
 import $ from './dom';
-import Clusterize from 'clusterize.js';
 import DataManager from './datamanager';
 import CellManager from './cellmanager';
 import ColumnManager from './columnmanager';
 import RowManager from './rowmanager';
+import BodyRenderer from './body-renderer';
 import Style from './style';
-
-import { getRowHTML } from './rowmanager';
-
 import './style.scss';
 
 const DEFAULT_OPTIONS = {
@@ -91,6 +88,7 @@ class DataTable {
     this.rowmanager = new RowManager(this);
     this.columnmanager = new ColumnManager(this);
     this.cellmanager = new CellManager(this);
+    this.bodyRenderer = new BodyRenderer(this);
 
     if (this.options.data) {
       this.refresh(this.options.data);
@@ -99,6 +97,7 @@ class DataTable {
 
   prepare() {
     this.prepareDom();
+    this.unfreeze();
   }
 
   prepareDom() {
@@ -120,7 +119,6 @@ class DataTable {
     this.header = $('.data-table-header', this.wrapper);
     this.bodyScrollable = $('.body-scrollable', this.wrapper);
     this.freezeContainer = $('.freeze-container', this.wrapper);
-    this.unfreeze();
   }
 
   refresh(data) {
@@ -149,95 +147,7 @@ class DataTable {
   }
 
   renderBody() {
-    if (this.options.enableClusterize) {
+    this.bodyRenderer.render();
-      this.renderBodyWithClusterize();
-    } else {
-      this.renderBodyHTML();
-    }
-  }
-
-  renderBodyHTML() {
-    const rows = this.datamanager.getRows();
-
-    this.bodyScrollable.innerHTML = `
-      <table class="data-table-body">
-        ${getBodyHTML(rows)}
-      </table>
-    `;
-  }
-
-  renderBodyWithClusterize() {
-    // empty body
-    this.bodyScrollable.innerHTML = `
-      <table class="data-table-body">
-        ${getBodyHTML([])}
-      </table>
-    `;
-
-    this.start = 0;
-    this.pageLength = 1000;
-    this.end = this.start + this.pageLength;
-
-    // only append ${this.pageLength} rows in the beginning,
-    // defer remaining
-    const rows = this.datamanager.getRows(this.start, this.end);
-    const initialData = this.getDataForClusterize(rows);
-
-    this.clusterize = new Clusterize({
-      rows: initialData,
-      scrollElem: this.bodyScrollable,
-      contentElem: $('tbody', this.bodyScrollable),
-      callbacks: {
-        clusterChanged: () => {
-          this.rowmanager.highlightCheckedRows();
-          this.cellmanager.selectAreaOnClusterChanged();
-          this.cellmanager.focusCellOnClusterChanged();
-        }
-      }
-    });
-    this.log('dataAppended', this.pageLength);
-    this.appendRemainingData();
-  }
-
-  appendRemainingData() {
-    let dataAppended = this.pageLength;
-    const promises = [];
-    const rowCount = this.datamanager.getRowCount();
-
-    while (dataAppended + this.pageLength < rowCount) {
-      this.start = this.end;
-      this.end = this.start + this.pageLength;
-      promises.push(this.appendNextPagePromise(this.start, this.end));
-      dataAppended += this.pageLength;
-    }
-
-    if (rowCount % 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(
-      (prev, cur) => prev.then(cur), Promise.resolve()
-    );
-  }
-
-  appendNextPagePromise(start, end) {
-    return new Promise(resolve => {
-      setTimeout(() => {
-        const rows = this.datamanager.getRows(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 }));
   }
 
   setDimensions() {
@@ -318,11 +228,3 @@ class DataTable {
 DataTable.instances = 0;
 
 export default DataTable;
-
-export function getBodyHTML(rows) {
-  return `
-    <tbody>
-      ${rows.map(row => getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
-    </tbody>
-  `;
-}