Move sorting to datamanager

lib/frappe-datatable.js

@@ -88,7 +88,7 @@ var _datatable = __webpack_require__(1);
 
 var _datatable2 = _interopRequireDefault(_datatable);
 
-var _package = __webpack_require__(8);
+var _package = __webpack_require__(9);
 
 var _package2 = _interopRequireDefault(_package);
 
@@ -115,11 +115,11 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _utils = __webpack_require__(2);
 
-var _datamanager = __webpack_require__(9);
+var _datamanager = __webpack_require__(3);
 
 var _datamanager2 = _interopRequireDefault(_datamanager);
 
-__webpack_require__(3);
+__webpack_require__(4);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -148,7 +148,10 @@ var DataTable = function () {
     }
 
     this.options = Object.assign({}, DEFAULT_OPTIONS, options);
+    // custom user events
     this.events = this.options.events;
+    // map of checked rows
+    this.checkMap = [];
 
     this.datamanager = new _datamanager2.default(this.options);
 
@@ -393,7 +396,7 @@ var DataTable = function () {
         var _self$getCellAttr2 = self.getCellAttr($cell),
             colIndex = _self$getCellAttr2.colIndex;
 
-        if (self.options.addCheckbox && colIndex === 0) {
+        if (self.options.addCheckboxColumn && colIndex === 0) {
           return;
         }
 
@@ -584,7 +587,7 @@ var DataTable = function () {
 
       this.header.on('click', '.data-table-col .content span', function () {
         var $cell = $(this).closest('.data-table-col');
-        var sortAction = (0, _utils.getDefault)($cell.attr('data-sort-action'), 'none');
+        var sortOrder = (0, _utils.getDefault)($cell.attr('data-sort-order'), 'none');
         var colIndex = $cell.attr('data-col-index');
         var col = self.getColumn(colIndex);
 
@@ -594,47 +597,41 @@ var DataTable = function () {
 
         // reset sort indicator
         self.header.find('.sort-indicator').text('');
-        self.header.find('.data-table-col').attr('data-sort-action', 'none');
+        self.header.find('.data-table-col').attr('data-sort-order', 'none');
 
-        if (sortAction === 'none') {
+        if (sortOrder === 'none') {
-          $cell.attr('data-sort-action', 'asc');
+          $cell.attr('data-sort-order', 'asc');
           $cell.find('.sort-indicator').text('▲');
-        } else if (sortAction === 'asc') {
+        } else if (sortOrder === 'asc') {
-          $cell.attr('data-sort-action', 'desc');
+          $cell.attr('data-sort-order', 'desc');
           $cell.find('.sort-indicator').text('▼');
-        } else if (sortAction === 'desc') {
+        } else if (sortOrder === 'desc') {
-          $cell.attr('data-sort-action', 'none');
+          $cell.attr('data-sort-order', 'none');
           $cell.find('.sort-indicator').text('');
         }
 
         // sortWith this action
-        var sortWith = $cell.attr('data-sort-action');
+        sortOrder = $cell.attr('data-sort-order');
 
         if (self.events && self.events.onSort) {
-          self.events.onSort(colIndex, sortWith);
+          self.events.onSort(colIndex, sortOrder);
         } else {
-          self.sortRows(colIndex, sortWith);
+          self.sortRows(colIndex, sortOrder);
           self.refreshRows();
         }
       });
     }
   }, {
     key: 'sortRows',
-    value: function sortRows(colIndex) {
+    value: function sortRows(colIndex, sortOrder) {
-      var sortAction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'none';
+      this.datamanager.sortRows(colIndex, sortOrder);
-
-      colIndex = +colIndex;
-      this.datamanager.sortRows(colIndex, sortAction);
     }
   }, {
     key: 'bindCheckbox',
     value: function bindCheckbox() {
-      if (!this.options.addCheckbox) return;
+      if (!this.options.addCheckboxColumn) return;
       var self = this;
 
-      // map of checked rows
-      this.checkMap = [];
-
       this.wrapper.on('click', '.data-table-col[data-col-index="0"] [type="checkbox"]', function () {
         var $checkbox = $(this);
         var $cell = $checkbox.closest('.data-table-col');
@@ -655,7 +652,6 @@ var DataTable = function () {
   }, {
     key: 'getCheckedRows',
     value: function getCheckedRows() {
-      this.checkMap = this.checkMap || [];
 
       return this.checkMap.map(function (c, rowIndex) {
         if (c) {
@@ -771,9 +767,10 @@ var DataTable = function () {
         return;
       }
 
-      var deltaWidth = (availableWidth - headerWidth) / this.data.columns.length;
+      var columns = this.datamanager.getColumns();
+      var deltaWidth = (availableWidth - headerWidth) / this.datamanager.getColumnCount();
 
-      this.data.columns.map(function (col) {
+      columns.map(function (col) {
         var width = _this5.getColumnHeaderElement(col.colIndex).width();
         var finalWidth = width + deltaWidth - 16;
 
@@ -807,27 +804,17 @@ var DataTable = function () {
   }, {
     key: 'getColumn',
     value: function getColumn(colIndex) {
-      colIndex = +colIndex;
+      return this.datamanager.getColumn(colIndex);
-      return this.data.columns.find(function (col) {
-        return col.colIndex === colIndex;
-      });
     }
   }, {
     key: 'getRow',
     value: function getRow(rowIndex) {
-      rowIndex = +rowIndex;
+      return this.datamanager.getRow(rowIndex);
-      return this.data.rows.find(function (row) {
-        return row[0].rowIndex === rowIndex;
-      });
     }
   }, {
     key: 'getCell',
     value: function getCell(rowIndex, colIndex) {
-      rowIndex = +rowIndex;
+      return this.datamanager.getCell(rowIndex, colIndex);
-      colIndex = +colIndex;
-      return this.data.rows.find(function (row) {
-        return row[0].rowIndex === rowIndex;
-      })[colIndex];
     }
   }, {
     key: 'getColumnHeaderElement',
@@ -850,7 +837,7 @@ var DataTable = function () {
   }, {
     key: 'getTotalRows',
     value: function getTotalRows() {
-      return this.data.rows.length;
+      return this.datamanager.getRowCount();
     }
   }, {
     key: 'log',
@@ -1073,10 +1060,282 @@ module.exports = exports['default'];
 /* 3 */
 /***/ (function(module, exports, __webpack_require__) {
 
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+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; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var DataManager = function () {
+  function DataManager(options) {
+    _classCallCheck(this, DataManager);
+
+    this.options = options;
+    this.rowCount = 0;
+    this.currentSort = {
+      sortBy: -1, // colIndex
+      sortOrder: 'none' // asc, desc, none
+    };
+  }
+
+  _createClass(DataManager, [{
+    key: 'init',
+    value: function init(data) {
+      var columns = data.columns,
+          rows = data.rows;
+
+
+      this.columns = this.prepareColumns(columns);
+      this.rows = this.prepareRows(rows);
+    }
+  }, {
+    key: 'prepareColumns',
+    value: function prepareColumns(columns) {
+      if (!Array.isArray(columns)) {
+        throw new TypeError('`columns` must be an array');
+      }
+
+      if (this.options.addSerialNoColumn && !this._serialNoColumnAdded) {
+        var val = {
+          content: 'Sr. No',
+          resizable: false
+        };
+
+        columns = [val].concat(columns);
+        this._serialNoColumnAdded = true;
+      }
+
+      if (this.options.addCheckboxColumn && !this._checkboxColumnAdded) {
+        var _val = {
+          content: '<input type="checkbox" />',
+          resizable: false
+        };
+
+        columns = [_val].concat(columns);
+        this._checkboxColumnAdded = true;
+      }
+
+      // wrap the title in span
+      columns = columns.map(function (column) {
+        if (typeof column === 'string') {
+          column = '<span>' + column + '</span>';
+        } else if ((typeof column === 'undefined' ? 'undefined' : _typeof(column)) === 'object') {
+          column.content = '<span>' + column.content + '</span>';
+        }
+
+        return column;
+      });
+
+      return _prepareColumns(columns, {
+        isHeader: 1
+      });
+    }
+  }, {
+    key: 'prepareRows',
+    value: function prepareRows(rows) {
+      var _this = this;
+
+      if (!Array.isArray(rows) || !Array.isArray(rows[0])) {
+        throw new TypeError('`rows` must be an array of arrays');
+      }
+
+      rows = rows.map(function (row, i) {
+        var index = _this._getNextRowCount();
+
+        if (row.length < _this.columns.length) {
+          if (_this._serialNoColumnAdded) {
+            var val = index + 1 + '';
+
+            row = [val].concat(row);
+          }
+
+          if (_this._checkboxColumnAdded) {
+            var _val2 = '<input type="checkbox" />';
+
+            row = [_val2].concat(row);
+          }
+        }
+
+        return prepareRow(row, index);
+      });
+
+      return rows;
+    }
+  }, {
+    key: 'appendRows',
+    value: function appendRows(rows) {
+      if (Array.isArray(rows) && !Array.isArray(rows[0])) {
+        rows = [rows];
+      }
+      var _rows = this.prepareRows(rows);
+
+      this.rows = this.rows.concat(_rows);
+    }
+  }, {
+    key: 'sortRows',
+    value: function sortRows(colIndex) {
+      var sortOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'none';
+
+      colIndex = +colIndex;
+
+      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') {
+          this.reverseArray(this.rows);
+          this.currentSort.sortOrder = sortOrder;
+          return;
+        }
+      }
+
+      this.rows.sort(function (a, b) {
+        var _aIndex = a[0].rowIndex;
+        var _bIndex = b[0].rowIndex;
+        var _a = a[colIndex].content;
+        var _b = b[colIndex].content;
+
+        if (sortOrder === 'none') {
+          return _aIndex - _bIndex;
+        } else if (sortOrder === 'asc') {
+          if (_a < _b) return -1;
+          if (_a > _b) return 1;
+          if (_a === _b) return 0;
+        } else if (sortOrder === 'desc') {
+          if (_a < _b) return 1;
+          if (_a > _b) return -1;
+          if (_a === _b) return 0;
+        }
+        return 0;
+      });
+
+      this.currentSort.colIndex = colIndex;
+      this.currentSort.sortOrder = sortOrder;
+    }
+  }, {
+    key: 'reverseArray',
+    value: function reverseArray(array) {
+      var left = null;
+      var right = null;
+      var length = array.length;
+
+      for (left = 0, right = length - 1; left < right; left += 1, right -= 1) {
+        var temporary = array[left];
+
+        array[left] = array[right];
+        array[right] = temporary;
+      }
+    }
+  }, {
+    key: 'getRowCount',
+    value: function getRowCount() {
+      return this.rowCount;
+    }
+  }, {
+    key: '_getNextRowCount',
+    value: function _getNextRowCount() {
+      var val = this.rowCount;
+
+      this.rowCount++;
+      return val;
+    }
+  }, {
+    key: 'getRows',
+    value: function getRows(start, end) {
+      return this.rows.slice(start, end);
+    }
+  }, {
+    key: 'getColumns',
+    value: function getColumns() {
+      return this.columns;
+    }
+  }, {
+    key: 'getColumnCount',
+    value: function getColumnCount() {
+      return this.columns.length;
+    }
+  }, {
+    key: 'getColumn',
+    value: function getColumn(colIndex) {
+      colIndex = +colIndex;
+      return this.columns.find(function (col) {
+        return col.colIndex === colIndex;
+      });
+    }
+  }, {
+    key: 'getRow',
+    value: function getRow(rowIndex) {
+      rowIndex = +rowIndex;
+      return this.rows.find(function (row) {
+        return row[0].rowIndex === rowIndex;
+      });
+    }
+  }, {
+    key: 'getCell',
+    value: function getCell(rowIndex, colIndex) {
+      rowIndex = +rowIndex;
+      colIndex = +colIndex;
+      return this.rows.find(function (row) {
+        return row[0].rowIndex === rowIndex;
+      })[colIndex];
+    }
+  }, {
+    key: 'get',
+    value: function get() {
+      return {
+        columns: this.columns,
+        rows: this.rows
+      };
+    }
+  }]);
+
+  return DataManager;
+}();
+
+exports.default = DataManager;
+
+
+function _prepareColumns(columns) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  var _columns = columns.map(prepareCell);
+
+  return _columns.map(function (col) {
+    return Object.assign({}, col, props);
+  });
+}
+
+function prepareRow(row, i) {
+  return _prepareColumns(row, {
+    rowIndex: i
+  });
+}
+
+function prepareCell(col, i) {
+  if (typeof col === 'string') {
+    col = {
+      content: col
+    };
+  }
+  return Object.assign(col, {
+    colIndex: i
+  });
+}
+module.exports = exports['default'];
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(4);
+var content = __webpack_require__(5);
 if(typeof content === 'string') content = [[module.i, content, '']];
 // Prepare cssTransformation
 var transform;
@@ -1084,7 +1343,7 @@ var transform;
 var options = {}
 options.transform = transform
 // add the styles to the DOM
-var update = __webpack_require__(6)(content, options);
+var update = __webpack_require__(7)(content, options);
 if(content.locals) module.exports = content.locals;
 // Hot Module Replacement
 if(false) {
@@ -1101,10 +1360,10 @@ if(false) {
 }
 
 /***/ }),
-/* 4 */
+/* 5 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(5)(undefined);
+exports = module.exports = __webpack_require__(6)(undefined);
 // imports
 
 
@@ -1115,7 +1374,7 @@ exports.push([module.i, ".table {\n  width: 100%;\n  max-width: 100%;\n  margin-
 
 
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, exports) {
 
 /*
@@ -1197,7 +1456,7 @@ function toComment(sourceMap) {
 
 
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /*
@@ -1243,7 +1502,7 @@ var singleton = null;
 var	singletonCounter = 0;
 var	stylesInsertedAtTop = [];
 
-var	fixUrls = __webpack_require__(7);
+var	fixUrls = __webpack_require__(8);
 
 module.exports = function(list, options) {
 	if (typeof DEBUG !== "undefined" && DEBUG) {
@@ -1556,7 +1815,7 @@ function updateLink (link, options, obj) {
 
 
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports) {
 
 
@@ -1651,234 +1910,11 @@ module.exports = function (css) {
 
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports) {
 
 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-preset-es2015":"6.24.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":{"bootstrap":"^4.0.0-beta","popper.js":"^1.12.5"}}
 
-/***/ }),
-/* 9 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-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; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var DataManager = function () {
-  function DataManager(options) {
-    _classCallCheck(this, DataManager);
-
-    this.options = options;
-    this._data = {};
-    this.rowCount = 0;
-  }
-
-  _createClass(DataManager, [{
-    key: 'init',
-    value: function init(data) {
-      var columns = data.columns,
-          rows = data.rows;
-
-
-      this.columns = this.prepareColumns(columns);
-      this.rows = this.prepareRows(rows);
-    }
-  }, {
-    key: 'prepareColumns',
-    value: function prepareColumns(columns) {
-      if (!Array.isArray(columns)) {
-        throw new TypeError('`columns` must be an array');
-      }
-
-      if (this.options.addSerialNoColumn && !this._serialNoColumnAdded) {
-        var val = {
-          content: 'Sr. No',
-          resizable: false
-        };
-
-        columns = [val].concat(columns);
-        this._serialNoColumnAdded = true;
-      }
-
-      if (this.options.addCheckboxColumn && !this._checkboxColumnAdded) {
-        var _val = {
-          content: '<input type="checkbox" />',
-          resizable: false
-        };
-
-        columns = [_val].concat(columns);
-        this._checkboxColumnAdded = true;
-      }
-
-      // wrap the title in span
-      columns = columns.map(function (column) {
-        if (typeof column === 'string') {
-          column = '<span>' + column + '</span>';
-        } else if ((typeof column === 'undefined' ? 'undefined' : _typeof(column)) === 'object') {
-          column.content = '<span>' + column.content + '</span>';
-        }
-
-        return column;
-      });
-
-      return _prepareColumns(columns, {
-        isHeader: 1
-      });
-    }
-  }, {
-    key: 'prepareRows',
-    value: function prepareRows(rows) {
-      var _this = this;
-
-      if (!Array.isArray(rows) || !Array.isArray(rows[0])) {
-        throw new TypeError('`rows` must be an array of arrays');
-      }
-
-      rows = rows.map(function (row, i) {
-        var index = _this._getNextRowCount();
-
-        if (row.length < _this.columns.length) {
-          if (_this._serialNoColumnAdded) {
-            var val = index + 1 + '';
-
-            row = [val].concat(row);
-          }
-
-          if (_this._checkboxColumnAdded) {
-            var _val2 = '<input type="checkbox" />';
-
-            row = [_val2].concat(row);
-          }
-        }
-
-        return prepareRow(row, index);
-      });
-
-      return rows;
-    }
-  }, {
-    key: 'appendRows',
-    value: function appendRows(rows) {
-      if (Array.isArray(rows) && !Array.isArray(rows[0])) {
-        rows = [rows];
-      }
-      var _rows = this.prepareRows(rows);
-
-      this.rows = this.rows.concat(_rows);
-    }
-  }, {
-    key: 'sortRows',
-    value: function sortRows(colIndex, sortAction) {
-
-      this.rows.sort(function (a, b) {
-        var _aIndex = a[0].rowIndex;
-        var _bIndex = b[0].rowIndex;
-        var _a = a[colIndex].content;
-        var _b = b[colIndex].content;
-
-        if (sortAction === 'none') {
-          return _aIndex - _bIndex;
-        } else if (sortAction === 'asc') {
-          if (_a < _b) return -1;
-          if (_a > _b) return 1;
-          if (_a === _b) return 0;
-        } else if (sortAction === 'desc') {
-          if (_a < _b) return 1;
-          if (_a > _b) return -1;
-          if (_a === _b) return 0;
-        }
-        return 0;
-      });
-    }
-  }, {
-    key: 'reverseArray',
-    value: function reverseArray(array) {
-      var left = null;
-      var right = null;
-
-      for (left = 0, right = length - 1; left < right; left += 1, right -= 1) {
-        var temporary = array[left];
-
-        array[left] = array[right];
-        array[right] = temporary;
-      }
-    }
-  }, {
-    key: 'getRowCount',
-    value: function getRowCount() {
-      return this.rowCount;
-    }
-  }, {
-    key: '_getNextRowCount',
-    value: function _getNextRowCount() {
-      var val = this.rowCount;
-
-      this.rowCount++;
-      return val;
-    }
-  }, {
-    key: 'getRows',
-    value: function getRows(start, end) {
-      return this.rows.slice(start, end);
-    }
-  }, {
-    key: 'getColumns',
-    value: function getColumns() {
-      return this.columns;
-    }
-  }, {
-    key: 'get',
-    value: function get() {
-      return {
-        columns: this.columns,
-        rows: this.rows
-      };
-    }
-  }]);
-
-  return DataManager;
-}();
-
-exports.default = DataManager;
-
-
-function _prepareColumns(columns) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  var _columns = columns.map(prepareCell);
-
-  return _columns.map(function (col) {
-    return Object.assign({}, col, props);
-  });
-}
-
-function prepareRow(row, i) {
-  return _prepareColumns(row, {
-    rowIndex: i
-  });
-}
-
-function prepareCell(col, i) {
-  if (typeof col === 'string') {
-    col = {
-      content: col
-    };
-  }
-  return Object.assign(col, {
-    colIndex: i
-  });
-}
-module.exports = exports['default'];
-
 /***/ })
 /******/ ]);
 });

src/datamanager.js

@@ -2,8 +2,11 @@
 export default class DataManager {
   constructor(options) {
     this.options = options;
-    this._data = {};
     this.rowCount = 0;
+    this.currentSort = {
+      sortBy: -1, // colIndex
+      sortOrder: 'none' // asc, desc, none
+    };
   }
 
   init(data) {
@@ -91,7 +94,20 @@ export default class DataManager {
     this.rows = this.rows.concat(_rows);
   }
 
-  sortRows(colIndex, sortAction) {
+  sortRows(colIndex, sortOrder = 'none') {
+    colIndex = +colIndex;
+
+    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')
+      ) {
+        this.reverseArray(this.rows);
+        this.currentSort.sortOrder = sortOrder;
+        return;
+      }
+    }
 
     this.rows.sort((a, b) => {
       const _aIndex = a[0].rowIndex;
@@ -99,24 +115,28 @@ export default class DataManager {
       const _a = a[colIndex].content;
       const _b = b[colIndex].content;
 
-      if (sortAction === 'none') {
+      if (sortOrder === 'none') {
         return _aIndex - _bIndex;
-      } else if (sortAction === 'asc') {
+      } else if (sortOrder === 'asc') {
         if (_a < _b) return -1;
         if (_a > _b) return 1;
         if (_a === _b) return 0;
-      } else if (sortAction === 'desc') {
+      } else if (sortOrder === 'desc') {
         if (_a < _b) return 1;
         if (_a > _b) return -1;
         if (_a === _b) return 0;
       }
       return 0;
     });
+
+    this.currentSort.colIndex = colIndex;
+    this.currentSort.sortOrder = sortOrder;
   }
 
   reverseArray(array) {
     let left = null;
     let right = null;
+    let length = array.length;
 
     for (left = 0, right = length - 1; left < right; left += 1, right -= 1) {
       const temporary = array[left];
@@ -145,6 +165,26 @@ export default class DataManager {
     return this.columns;
   }
 
+  getColumnCount() {
+    return this.columns.length;
+  }
+
+  getColumn(colIndex) {
+    colIndex = +colIndex;
+    return this.columns.find(col => col.colIndex === colIndex);
+  }
+
+  getRow(rowIndex) {
+    rowIndex = +rowIndex;
+    return this.rows.find(row => row[0].rowIndex === rowIndex);
+  }
+
+  getCell(rowIndex, colIndex) {
+    rowIndex = +rowIndex;
+    colIndex = +colIndex;
+    return this.rows.find(row => row[0].rowIndex === rowIndex)[colIndex];
+  }
+
   get() {
     return {
       columns: this.columns,

src/datatable.js

@@ -34,7 +34,10 @@ export default class DataTable {
     }
 
     this.options = Object.assign({}, DEFAULT_OPTIONS, options);
+    // custom user events
     this.events = this.options.events;
+    // map of checked rows
+    this.checkMap = [];
 
     this.datamanager = new DataManager(this.options);
 
@@ -272,7 +275,7 @@ export default class DataTable {
       const $cell = $(this);
       const { colIndex } = self.getCellAttr($cell);
 
-      if (self.options.addCheckbox && colIndex === 0) {
+      if (self.options.addCheckboxColumn && colIndex === 0) {
         return;
       }
 
@@ -444,7 +447,7 @@ export default class DataTable {
 
     this.header.on('click', '.data-table-col .content span', function () {
       const $cell = $(this).closest('.data-table-col');
-      const sortAction = getDefault($cell.attr('data-sort-action'), 'none');
+      let sortOrder = getDefault($cell.attr('data-sort-order'), 'none');
       const colIndex = $cell.attr('data-col-index');
       const col = self.getColumn(colIndex);
 
@@ -454,43 +457,39 @@ export default class DataTable {
 
       // reset sort indicator
       self.header.find('.sort-indicator').text('');
-      self.header.find('.data-table-col').attr('data-sort-action', 'none');
+      self.header.find('.data-table-col').attr('data-sort-order', 'none');
 
-      if (sortAction === 'none') {
+      if (sortOrder === 'none') {
-        $cell.attr('data-sort-action', 'asc');
+        $cell.attr('data-sort-order', 'asc');
         $cell.find('.sort-indicator').text('▲');
-      } else if (sortAction === 'asc') {
+      } else if (sortOrder === 'asc') {
-        $cell.attr('data-sort-action', 'desc');
+        $cell.attr('data-sort-order', 'desc');
         $cell.find('.sort-indicator').text('▼');
-      } else if (sortAction === 'desc') {
+      } else if (sortOrder === 'desc') {
-        $cell.attr('data-sort-action', 'none');
+        $cell.attr('data-sort-order', 'none');
         $cell.find('.sort-indicator').text('');
       }
 
       // sortWith this action
-      const sortWith = $cell.attr('data-sort-action');
+      sortOrder = $cell.attr('data-sort-order');
 
       if (self.events && self.events.onSort) {
-        self.events.onSort(colIndex, sortWith);
+        self.events.onSort(colIndex, sortOrder);
       } else {
-        self.sortRows(colIndex, sortWith);
+        self.sortRows(colIndex, sortOrder);
         self.refreshRows();
       }
     });
   }
 
-  sortRows(colIndex, sortAction = 'none') {
+  sortRows(colIndex, sortOrder) {
-    colIndex = +colIndex;
+    this.datamanager.sortRows(colIndex, sortOrder);
-    this.datamanager.sortRows(colIndex, sortAction);
   }
 
   bindCheckbox() {
-    if (!this.options.addCheckbox) return;
+    if (!this.options.addCheckboxColumn) return;
     const self = this;
 
-    // map of checked rows
-    this.checkMap = [];
-
     this.wrapper.on('click', '.data-table-col[data-col-index="0"] [type="checkbox"]', function () {
       const $checkbox = $(this);
       const $cell = $checkbox.closest('.data-table-col');
@@ -506,7 +505,6 @@ export default class DataTable {
   }
 
   getCheckedRows() {
-    this.checkMap = this.checkMap || [];
 
     return this.checkMap
       .map((c, rowIndex) => {
@@ -610,9 +608,10 @@ export default class DataTable {
       return;
     }
 
-    const deltaWidth = (availableWidth - headerWidth) / this.data.columns.length;
+    const columns = this.datamanager.getColumns();
+    const deltaWidth = (availableWidth - headerWidth) / this.datamanager.getColumnCount();
 
-    this.data.columns.map(col => {
+    columns.map(col => {
       const width = this.getColumnHeaderElement(col.colIndex).width();
       let finalWidth = width + deltaWidth - 16;
 
@@ -646,19 +645,15 @@ export default class DataTable {
   }
 
   getColumn(colIndex) {
-    colIndex = +colIndex;
+    return this.datamanager.getColumn(colIndex);
-    return this.data.columns.find(col => col.colIndex === colIndex);
   }
 
   getRow(rowIndex) {
-    rowIndex = +rowIndex;
+    return this.datamanager.getRow(rowIndex);
-    return this.data.rows.find(row => row[0].rowIndex === rowIndex);
   }
 
   getCell(rowIndex, colIndex) {
-    rowIndex = +rowIndex;
+    return this.datamanager.getCell(rowIndex, colIndex);
-    colIndex = +colIndex;
-    return this.data.rows.find(row => row[0].rowIndex === rowIndex)[colIndex];
   }
 
   getColumnHeaderElement(colIndex) {
@@ -679,7 +674,7 @@ export default class DataTable {
   }
 
   getTotalRows() {
-    return this.data.rows.length;
+    return this.datamanager.getRowCount();
   }
 
   log() {