Move column and Delete column working

index.html

@@ -27,6 +27,7 @@
 	</section>
 
 	<script src="./node_modules/clusterize.js/clusterize.js"></script>
+	<script src="./node_modules/sortablejs/Sortable.js"></script>
 	<script src="./lib/frappe-datatable.js"></script>
 	<script>
 		document.addEventListener('DOMContentLoaded', () => {

lib/frappe-datatable.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory();
+		module.exports = factory(require("clusterize.js"), require("sortablejs"));
 	else if(typeof define === 'function' && define.amd)
-		define("DataTable", [], factory);
+		define("DataTable", [, ], factory);
 	else if(typeof exports === 'object')
-		exports["DataTable"] = factory();
+		exports["DataTable"] = factory(require("clusterize.js"), require("sortablejs"));
 	else
-		root["DataTable"] = factory();
+		root["DataTable"] = factory(root["Clusterize"], root["Sortable"]);
-})(this, function() {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_10__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -136,6 +136,10 @@ $.on = function (element, event, selector, callback) {
   }
 };
 
+$.off = function (element, event, handler) {
+  element.removeEventListener(event, handler);
+};
+
 $.bind = function (element, event, callback) {
   event.split(/\s+/).forEach(function (event) {
     element.addEventListener(event, callback);
@@ -508,7 +512,7 @@ exports.getEditCellHTML = getEditCellHTML;
 
 var _utils = __webpack_require__(1);
 
-var _keyboard = __webpack_require__(7);
+var _keyboard = __webpack_require__(8);
 
 var _keyboard2 = _interopRequireDefault(_keyboard);
 
@@ -1474,7 +1478,7 @@ var _datatable = __webpack_require__(5);
 
 var _datatable2 = _interopRequireDefault(_datatable);
 
-var _package = __webpack_require__(15);
+var _package = __webpack_require__(22);
 
 var _package2 = _interopRequireDefault(_package);
 
@@ -1504,7 +1508,11 @@ var _dom = __webpack_require__(0);
 
 var _dom2 = _interopRequireDefault(_dom);
 
-var _datamanager = __webpack_require__(6);
+var _clusterize = __webpack_require__(6);
+
+var _clusterize2 = _interopRequireDefault(_clusterize);
+
+var _datamanager = __webpack_require__(7);
 
 var _datamanager2 = _interopRequireDefault(_datamanager);
 
@@ -1512,7 +1520,7 @@ var _cellmanager = __webpack_require__(2);
 
 var _cellmanager2 = _interopRequireDefault(_cellmanager);
 
-var _columnmanager = __webpack_require__(8);
+var _columnmanager = __webpack_require__(9);
 
 var _columnmanager2 = _interopRequireDefault(_columnmanager);
 
@@ -1520,11 +1528,11 @@ var _rowmanager = __webpack_require__(3);
 
 var _rowmanager2 = _interopRequireDefault(_rowmanager);
 
-var _style = __webpack_require__(9);
+var _style = __webpack_require__(16);
 
 var _style2 = _interopRequireDefault(_style);
 
-__webpack_require__(10);
+__webpack_require__(17);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -1656,7 +1664,7 @@ var DataTable = function () {
       var rows = this.datamanager.getRows(this.start, this.end);
       var initialData = this.getDataForClusterize(rows);
 
-      this.clusterize = new Clusterize({
+      this.clusterize = new _clusterize2.default({
         rows: initialData,
         scrollElem: this.bodyScrollable,
         contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
@@ -1807,6 +1815,12 @@ function getBodyHTML(rows) {
 
 /***/ }),
 /* 6 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
+
+/***/ }),
+/* 7 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1816,8 +1830,6 @@ 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; }; }();
 
 var _utils = __webpack_require__(1);
@@ -1834,6 +1846,8 @@ var DataManager = function () {
       sortOrder: 'none' // asc, desc, none
     };
     this.sortRows = (0, _utils.promisify)(this.sortRows, this);
+    this.switchColumn = (0, _utils.promisify)(this.switchColumn, this);
+    this.removeColumn = (0, _utils.promisify)(this.removeColumn, this);
   }
 
   _createClass(DataManager, [{
@@ -1885,19 +1899,11 @@ var DataManager = function () {
         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
+        isHeader: 1,
+        format: function format(value) {
+          return '<span class="column-title">' + value + '</span>';
+        }
       });
     }
   }, {
@@ -2008,6 +2014,53 @@ var DataManager = function () {
         array[right] = temporary;
       }
     }
+  }, {
+    key: 'switchColumn',
+    value: function switchColumn(index1, index2) {
+      // update columns
+      var temp = this.columns[index1];
+      this.columns[index1] = this.columns[index2];
+      this.columns[index2] = temp;
+
+      this.columns[index1].colIndex = index1;
+      this.columns[index2].colIndex = index2;
+
+      // update rows
+      this.rows = this.rows.map(function (row) {
+        var newCell1 = Object.assign({}, row[index1], { colIndex: index2 });
+        var newCell2 = Object.assign({}, row[index2], { colIndex: index1 });
+
+        var newRow = row.map(function (cell) {
+          // make object copy
+          return Object.assign({}, cell);
+        });
+
+        newRow[index2] = newCell1;
+        newRow[index1] = newCell2;
+
+        return newRow;
+      });
+    }
+  }, {
+    key: 'removeColumn',
+    value: function removeColumn(index) {
+      index = +index;
+      var filter = function filter(cell) {
+        return cell.colIndex !== index;
+      };
+      var map = function map(cell, i) {
+        return Object.assign({}, cell, { colIndex: i });
+      };
+      // update columns
+      this.columns = this.columns.filter(filter).map(map);
+
+      // update rows
+      this.rows = this.rows.map(function (row) {
+        var newRow = row.filter(filter).map(map);
+
+        return newRow;
+      });
+    }
   }, {
     key: 'getRowCount',
     value: function getRowCount() {
@@ -2131,7 +2184,7 @@ function prepareCell(col, i) {
 module.exports = exports['default'];
 
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2209,7 +2262,7 @@ exports.default = {
 module.exports = exports['default'];
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2225,6 +2278,10 @@ var _dom = __webpack_require__(0);
 
 var _dom2 = _interopRequireDefault(_dom);
 
+var _sortablejs = __webpack_require__(10);
+
+var _sortablejs2 = _interopRequireDefault(_sortablejs);
+
 var _rowmanager = __webpack_require__(3);
 
 var _utils = __webpack_require__(1);
@@ -2251,15 +2308,43 @@ var ColumnManager = function () {
   _createClass(ColumnManager, [{
     key: 'renderHeader',
     value: function renderHeader() {
+      this.header.innerHTML = '<thead></thead>';
+      this.refreshHeader();
+    }
+  }, {
+    key: 'refreshHeader',
+    value: function refreshHeader() {
       var columns = this.datamanager.getColumns();
 
-      this.header.innerHTML = '\n      <thead>\n        ' + (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 }) + '\n      </thead>\n    ';
+      if (!(0, _dom2.default)('.data-table-col', this.header)) {
+        // insert html
+        (0, _dom2.default)('thead', this.header).innerHTML = (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 });
+      } else {
+
+        var $cols = _dom2.default.each('.data-table-col', this.header);
+
+        if (columns.length < $cols.length) {
+          // deleted column
+          (0, _dom2.default)('thead', this.header).innerHTML = (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 });
+          return;
+        }
+
+        // update colIndex of each header cell
+        $cols.map(function ($col, i) {
+          _dom2.default.data($col, {
+            colIndex: columns[i].colIndex
+          });
+        });
+      }
+      // reset columnMap
+      this.$columnMap = [];
     }
   }, {
     key: 'bindEvents',
     value: function bindEvents() {
       this.bindResizeColumn();
       this.bindSortColumn();
+      this.bindMoveColumn();
     }
   }, {
     key: 'bindResizeColumn',
@@ -2267,15 +2352,15 @@ var ColumnManager = function () {
       var _this = this;
 
       var isDragging = false;
-      var $currCell = void 0,
+      var $resizingCell = void 0,
           startWidth = void 0,
           startX = void 0;
 
       _dom2.default.on(this.header, 'mousedown', '.data-table-col .column-resizer', function (e, $handle) {
         var $cell = $handle.parentNode.parentNode;
-        $currCell = $cell;
+        $resizingCell = $cell;
 
-        var _$$data = _dom2.default.data($currCell),
+        var _$$data = _dom2.default.data($resizingCell),
             colIndex = _$$data.colIndex;
 
         var col = _this.getColumn(colIndex);
@@ -2285,29 +2370,29 @@ var ColumnManager = function () {
         }
 
         isDragging = true;
-        startWidth = _dom2.default.style((0, _dom2.default)('.content', $currCell), 'width');
+        startWidth = _dom2.default.style((0, _dom2.default)('.content', $resizingCell), 'width');
         startX = e.pageX;
       });
 
       _dom2.default.on(document.body, 'mouseup', function (e) {
-        if (!$currCell) return;
+        if (!$resizingCell) return;
         isDragging = false;
 
-        var _$$data2 = _dom2.default.data($currCell),
+        var _$$data2 = _dom2.default.data($resizingCell),
             colIndex = _$$data2.colIndex;
 
-        var width = _dom2.default.style((0, _dom2.default)('.content', $currCell), 'width');
+        var width = _dom2.default.style((0, _dom2.default)('.content', $resizingCell), 'width');
 
         _this.setColumnWidth(colIndex, width);
         _this.instance.setBodyWidth();
-        $currCell = null;
+        $resizingCell = null;
       });
 
       _dom2.default.on(document.body, 'mousemove', function (e) {
         if (!isDragging) return;
         var finalWidth = startWidth + (e.pageX - startX);
 
-        var _$$data3 = _dom2.default.data($currCell),
+        var _$$data3 = _dom2.default.data($resizingCell),
             colIndex = _$$data3.colIndex;
 
         if (_this.getColumnMinWidth(colIndex) > finalWidth) {
@@ -2319,27 +2404,98 @@ var ColumnManager = function () {
       });
     }
   }, {
-    key: 'bindSortColumn',
+    key: 'bindMoveColumn',
-    value: function bindSortColumn() {
+    value: function bindMoveColumn() {
       var _this2 = this;
 
-      _dom2.default.on(this.header, 'click', '.data-table-col .content span:first-child', function (e, span) {
+      var initialized = void 0;
+
+      var initialize = function initialize() {
+        if (initialized) {
+          _dom2.default.off(document.body, 'mousemove', initialize);
+          return;
+        }
+        var ready = (0, _dom2.default)('.data-table-col', _this2.header);
+        if (!ready) return;
+
+        var $parent = (0, _dom2.default)('.data-table-row', _this2.header);
+
+        _dom2.default.on(document, 'drag', '.data-table-col', (0, _utils.throttle)(function (e, $target) {
+          if (e.offsetY > 200) {
+            $target.classList.add('remove-column');
+          } else {
+            setTimeout(function () {
+              $target.classList.remove('remove-column');
+            }, 10);
+          }
+        }));
+
+        _this2.sortable = _sortablejs2.default.create($parent, {
+          onEnd: function onEnd(e) {
+            var oldIndex = e.oldIndex,
+                newIndex = e.newIndex;
+
+            var $draggedCell = e.item;
+
+            var _$$data4 = _dom2.default.data($draggedCell),
+                colIndex = _$$data4.colIndex;
+
+            // debugger;
+
+            if ($draggedCell.classList.contains('remove-column')) {
+              _this2.instance.freeze();
+              _this2.datamanager.removeColumn(colIndex).then(function () {
+                _this2.refreshHeader();
+                return _this2.rowmanager.refreshRows();
+              }).then(function () {
+                return _this2.instance.unfreeze();
+              });
+              return;
+            }
+
+            if (+colIndex === newIndex) return;
+
+            _this2.instance.freeze();
+            _this2.datamanager.switchColumn(oldIndex, newIndex).then(function () {
+              _this2.refreshHeader();
+              return _this2.rowmanager.refreshRows();
+            }).then(function () {
+              _this2.setColumnWidth(oldIndex);
+              _this2.setColumnWidth(newIndex);
+            }).then(function () {
+              return _this2.instance.unfreeze();
+            });
+          },
+          preventOnFilter: false,
+          filter: '.column-resizer, .sort-indicator',
+          animation: 150
+        });
+      };
+
+      _dom2.default.on(document.body, 'mousemove', initialize);
+    }
+  }, {
+    key: 'bindSortColumn',
+    value: function bindSortColumn() {
+      var _this3 = this;
+
+      _dom2.default.on(this.header, 'click', '.data-table-col .column-title', function (e, span) {
         var $cell = span.closest('.data-table-col');
 
-        var _$$data4 = _dom2.default.data($cell),
+        var _$$data5 = _dom2.default.data($cell),
-            colIndex = _$$data4.colIndex,
+            colIndex = _$$data5.colIndex,
-            sortOrder = _$$data4.sortOrder;
+            sortOrder = _$$data5.sortOrder;
 
         sortOrder = (0, _utils.getDefault)(sortOrder, 'none');
-        var col = _this2.getColumn(colIndex);
+        var col = _this3.getColumn(colIndex);
 
         if (col && col.sortable === false) {
           return;
         }
 
         // reset sort indicator
-        (0, _dom2.default)('.sort-indicator', _this2.header).textContent = '';
+        (0, _dom2.default)('.sort-indicator', _this3.header).textContent = '';
-        _dom2.default.each('.data-table-col', _this2.header).map(function ($cell) {
+        _dom2.default.each('.data-table-col', _this3.header).map(function ($cell) {
           _dom2.default.data($cell, {
             sortOrder: 'none'
           });
@@ -2363,14 +2519,14 @@ var ColumnManager = function () {
         });
         (0, _dom2.default)('.sort-indicator', $cell).textContent = textContent;
 
-        if (_this2.events && _this2.events.onSort) {
+        if (_this3.events && _this3.events.onSort) {
-          _this2.events.onSort(colIndex, nextSortOrder);
+          _this3.events.onSort(colIndex, nextSortOrder);
         } else {
-          _this2.instance.freeze();
+          _this3.instance.freeze();
-          _this2.sortRows(colIndex, nextSortOrder).then(function () {
+          _this3.sortRows(colIndex, nextSortOrder).then(function () {
-            return _this2.rowmanager.refreshRows();
+            return _this3.rowmanager.refreshRows();
           }).then(function () {
-            return _this2.instance.unfreeze();
+            return _this3.instance.unfreeze();
           });
         }
       });
@@ -2415,7 +2571,7 @@ var ColumnManager = function () {
   }, {
     key: 'setupMinWidth',
     value: function setupMinWidth() {
-      var _this3 = this;
+      var _this4 = this;
 
       // cache minWidth for each column
       this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
@@ -2423,19 +2579,19 @@ var ColumnManager = function () {
       _dom2.default.each('.data-table-col', this.header).map(function (col) {
         var width = _dom2.default.style((0, _dom2.default)('.content', col), 'width');
 
-        var _$$data5 = _dom2.default.data(col),
+        var _$$data6 = _dom2.default.data(col),
-            colIndex = _$$data5.colIndex;
+            colIndex = _$$data6.colIndex;
 
-        if (!_this3.minWidthMap[colIndex]) {
+        if (!_this4.minWidthMap[colIndex]) {
           // only set this once
-          _this3.minWidthMap[colIndex] = width;
+          _this4.minWidthMap[colIndex] = width;
         }
       });
     }
   }, {
     key: 'setNaturalColumnWidth',
     value: function setNaturalColumnWidth() {
-      var _this4 = this;
+      var _this5 = 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) {
@@ -2443,22 +2599,22 @@ var ColumnManager = function () {
         var width = _dom2.default.style((0, _dom2.default)('.content', $cell), 'width');
         var height = _dom2.default.style((0, _dom2.default)('.content', $cell), 'height');
 
-        var _$$data6 = _dom2.default.data($cell),
+        var _$$data7 = _dom2.default.data($cell),
-            colIndex = _$$data6.colIndex;
+            colIndex = _$$data7.colIndex;
 
-        var minWidth = _this4.getColumnMinWidth(colIndex);
+        var minWidth = _this5.getColumnMinWidth(colIndex);
 
         if (width < minWidth) {
           width = minWidth;
         }
-        _this4.setColumnWidth(colIndex, width);
+        _this5.setColumnWidth(colIndex, width);
-        _this4.setDefaultCellHeight(height);
+        _this5.setDefaultCellHeight(height);
       });
     }
   }, {
     key: 'distributeRemainingWidth',
     value: function distributeRemainingWidth() {
-      var _this5 = this;
+      var _this6 = this;
 
       if (!this.options.takeAvailableSpace) return;
 
@@ -2477,11 +2633,11 @@ var ColumnManager = function () {
       var deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
 
       resizableColumns.map(function (col) {
-        var width = _dom2.default.style(_this5.getColumnHeaderElement(col.colIndex), 'width');
+        var width = _dom2.default.style(_this6.getColumnHeaderElement(col.colIndex), 'width');
         var finalWidth = Math.min(width + deltaWidth) - 2;
 
-        _this5.setColumnHeaderWidth(col.colIndex, finalWidth);
+        _this6.setColumnHeaderWidth(col.colIndex, finalWidth);
-        _this5.setColumnWidth(col.colIndex, finalWidth);
+        _this6.setColumnWidth(col.colIndex, finalWidth);
       });
       this.instance.setBodyWidth();
     }
@@ -2495,12 +2651,12 @@ var ColumnManager = function () {
   }, {
     key: 'setColumnAlignments',
     value: function setColumnAlignments() {
-      var _this6 = this;
+      var _this7 = this;
 
       // align columns
       this.getColumns().map(function (column) {
         if (['left', 'center', 'right'].includes(column.align)) {
-          _this6.style.setStyle('.data-table [data-col-index="' + column.colIndex + '"]', {
+          _this7.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
             'text-align': column.align
           });
         }
@@ -2526,6 +2682,11 @@ var ColumnManager = function () {
     value: function setColumnWidth(colIndex, width) {
       this._columnWidthMap = this._columnWidthMap || [];
 
+      if (!width) {
+        var $headerContent = (0, _dom2.default)('.data-table-col[data-col-index="' + colIndex + '"] .content', this.header);
+        width = _dom2.default.style($headerContent, 'width');
+      }
+
       var index = this._columnWidthMap[colIndex];
       var selector = '[data-col-index="' + colIndex + '"] .content, [data-col-index="' + colIndex + '"] .edit-cell';
       var styles = {
@@ -2568,6 +2729,11 @@ var ColumnManager = function () {
 
       return 0;
     }
+  }, {
+    key: 'getHeaderCell$',
+    value: function getHeaderCell$(colIndex) {
+      return (0, _dom2.default)('.data-table-col[data-col-index="' + colIndex + '"]', this.header);
+    }
   }, {
     key: 'getLastColumnIndex',
     value: function getLastColumnIndex() {
@@ -2598,7 +2764,18 @@ exports.default = ColumnManager;
 module.exports = exports['default'];
 
 /***/ }),
-/* 9 */
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
+
+/***/ }),
+/* 11 */,
+/* 12 */,
+/* 13 */,
+/* 14 */,
+/* 15 */,
+/* 16 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2664,13 +2841,13 @@ exports.default = Style;
 module.exports = exports['default'];
 
 /***/ }),
-/* 10 */
+/* 17 */
 /***/ (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__(11);
+var content = __webpack_require__(18);
 if(typeof content === 'string') content = [[module.i, content, '']];
 // Prepare cssTransformation
 var transform;
@@ -2678,7 +2855,7 @@ var transform;
 var options = {}
 options.transform = transform
 // add the styles to the DOM
-var update = __webpack_require__(13)(content, options);
+var update = __webpack_require__(20)(content, options);
 if(content.locals) module.exports = content.locals;
 // Hot Module Replacement
 if(false) {
@@ -2695,21 +2872,21 @@ if(false) {
 }
 
 /***/ }),
-/* 11 */
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(12)(undefined);
+exports = module.exports = __webpack_require__(19)(undefined);
 // imports
 
 
 // module
-exports.push([module.i, "/* variables */\n.data-table {\n  --border-color: #d1d8dd;\n  --primary-color: #5292f7;\n  --light-bg: #f5f7fa; }\n\n/* resets */\n*, *::after, *::before {\n  box-sizing: border-box; }\n\nbutton, input {\n  overflow: visible;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0; }\n\n/* styling */\n.data-table * {\n  outline: none; }\n\n.data-table {\n  width: 100%;\n  position: relative;\n  overflow: auto; }\n  .data-table table {\n    border-collapse: collapse; }\n  .data-table table td {\n    padding: 0;\n    border: 1px solid var(--border-color); }\n  .data-table thead td {\n    border-bottom-width: 2px; }\n  .data-table .freeze-container {\n    display: flex;\n    justify-content: center;\n    align-content: center;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background-color: var(--light-bg);\n    opacity: 0.5;\n    font-size: 2em; }\n    .data-table .freeze-container span {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%); }\n\n.body-scrollable {\n  max-height: 500px;\n  overflow: auto;\n  border-bottom: 1px solid var(--border-color); }\n  .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n    background-color: var(--light-bg); }\n\n.data-table-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: white;\n  font-weight: bold; }\n  .data-table-header .content span:not(.column-resizer) {\n    cursor: pointer; }\n  .data-table-header .sort-indicator {\n    position: absolute;\n    right: 8px;\n    top: 9px; }\n  .data-table-header .column-resizer {\n    display: none;\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 4px;\n    height: 100%;\n    background-color: var(--primary-color);\n    cursor: col-resize; }\n\n.data-table-col {\n  position: relative; }\n  .data-table-col .content {\n    padding: 8px;\n    border: 2px solid transparent; }\n    .data-table-col .content.ellipsis {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden; }\n  .data-table-col .edit-cell {\n    display: none;\n    padding: 8px;\n    background: #fff;\n    z-index: 1;\n    height: 100%; }\n    .data-table-col .edit-cell input {\n      outline: none;\n      width: 100%;\n      border: none;\n      height: 1em; }\n  .data-table-col.selected .content {\n    border: 2px solid var(--primary-color); }\n  .data-table-col.editing .content {\n    display: none; }\n  .data-table-col.editing .edit-cell {\n    border: 2px solid var(--primary-color);\n    display: block; }\n  .data-table-col.highlight {\n    background-color: var(--light-bg); }\n  .data-table-col:hover .column-resizer {\n    display: inline-block; }\n\n.data-table-row.row-highlight {\n  background-color: var(--light-bg); }\n\n.noselect {\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none; }\n", ""]);
+exports.push([module.i, "/* variables */\n.data-table {\n  --border-color: #d1d8dd;\n  --primary-color: #5292f7;\n  --light-bg: #f5f7fa;\n  --light-red: #FD8B8B; }\n\n/* resets */\n*, *::after, *::before {\n  box-sizing: border-box; }\n\nbutton, input {\n  overflow: visible;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0; }\n\n/* styling */\n.data-table * {\n  outline: none; }\n\n.data-table {\n  width: 100%;\n  position: relative;\n  overflow: auto; }\n  .data-table table {\n    border-collapse: collapse; }\n  .data-table table td {\n    padding: 0;\n    border: 1px solid var(--border-color); }\n  .data-table thead td {\n    border-bottom-width: 2px; }\n  .data-table .freeze-container {\n    display: flex;\n    justify-content: center;\n    align-content: center;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background-color: var(--light-bg);\n    opacity: 0.5;\n    font-size: 2em; }\n    .data-table .freeze-container span {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%); }\n  .data-table .trash-container {\n    position: absolute;\n    bottom: 0;\n    left: 30%;\n    right: 30%;\n    height: 70px;\n    background: palevioletred;\n    opacity: 0.5; }\n\n.body-scrollable {\n  max-height: 500px;\n  overflow: auto;\n  border-bottom: 1px solid var(--border-color); }\n  .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n    background-color: var(--light-bg); }\n\n.data-table-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: white;\n  font-weight: bold; }\n  .data-table-header .content span:not(.column-resizer) {\n    cursor: pointer; }\n  .data-table-header .sort-indicator {\n    position: absolute;\n    right: 8px;\n    top: 9px; }\n  .data-table-header .column-resizer {\n    display: none;\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 4px;\n    height: 100%;\n    background-color: var(--primary-color);\n    cursor: col-resize; }\n  .data-table-header .data-table-col.remove-column {\n    background-color: var(--light-red);\n    transition: 300ms background-color ease-in-out; }\n\n.data-table-col {\n  position: relative; }\n  .data-table-col .content {\n    padding: 8px;\n    border: 2px solid transparent; }\n    .data-table-col .content.ellipsis {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden; }\n  .data-table-col .edit-cell {\n    display: none;\n    padding: 8px;\n    background: #fff;\n    z-index: 1;\n    height: 100%; }\n    .data-table-col .edit-cell input {\n      outline: none;\n      width: 100%;\n      border: none;\n      height: 1em; }\n  .data-table-col.selected .content {\n    border: 2px solid var(--primary-color); }\n  .data-table-col.editing .content {\n    display: none; }\n  .data-table-col.editing .edit-cell {\n    border: 2px solid var(--primary-color);\n    display: block; }\n  .data-table-col.highlight {\n    background-color: var(--light-bg); }\n  .data-table-col:hover .column-resizer {\n    display: inline-block; }\n\n.data-table-row.row-highlight {\n  background-color: var(--light-bg); }\n\n.noselect {\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none; }\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 12 */
+/* 19 */
 /***/ (function(module, exports) {
 
 /*
@@ -2791,7 +2968,7 @@ function toComment(sourceMap) {
 
 
 /***/ }),
-/* 13 */
+/* 20 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /*
@@ -2837,7 +3014,7 @@ var singleton = null;
 var	singletonCounter = 0;
 var	stylesInsertedAtTop = [];
 
-var	fixUrls = __webpack_require__(14);
+var	fixUrls = __webpack_require__(21);
 
 module.exports = function(list, options) {
 	if (typeof DEBUG !== "undefined" && DEBUG) {
@@ -3150,7 +3327,7 @@ function updateLink (link, options, obj) {
 
 
 /***/ }),
-/* 14 */
+/* 21 */
 /***/ (function(module, exports) {
 
 
@@ -3245,10 +3422,10 @@ module.exports = function (css) {
 
 
 /***/ }),
-/* 15 */
+/* 22 */
 /***/ (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-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"}}
+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-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"}}
 
 /***/ })
 /******/ ]);

package.json

@@ -47,6 +47,7 @@
   },
   "homepage": "https://frappe.github.io/datatable",
   "dependencies": {
-    "clusterize.js": "^0.18.0"
+    "clusterize.js": "^0.18.0",
+    "sortablejs": "^1.7.0"
   }
 }

src/columnmanager.js

@@ -1,6 +1,7 @@
 import $ from './dom';
+import Sortable from 'sortablejs';
 import { getRowHTML } from './rowmanager';
-import { getDefault } from './utils';
+import { getDefault, throttle } from './utils';
 
 export default class ColumnManager {
   constructor(instance) {
@@ -16,28 +17,51 @@ export default class ColumnManager {
   }
 
   renderHeader() {
+    this.header.innerHTML = '<thead></thead>';
+    this.refreshHeader();
+  }
+
+  refreshHeader() {
     const columns = this.datamanager.getColumns();
 
-    this.header.innerHTML = `
+    if (!$('.data-table-col', this.header)) {
-      <thead>
+      // insert html
-        ${getRowHTML(columns, { isHeader: 1 })}
+      $('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
-      </thead>
+    } else {
-    `;
+
+      const $cols = $.each('.data-table-col', this.header);
+
+      if (columns.length < $cols.length) {
+        // deleted column
+        $('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
+        return;
+      }
+
+      // update colIndex of each header cell
+      $cols.map(($col, i) => {
+        $.data($col, {
+          colIndex: columns[i].colIndex
+        });
+      });
+    }
+    // reset columnMap
+    this.$columnMap = [];
   }
 
   bindEvents() {
     this.bindResizeColumn();
     this.bindSortColumn();
+    this.bindMoveColumn();
   }
 
   bindResizeColumn() {
     let isDragging = false;
-    let $currCell, startWidth, startX;
+    let $resizingCell, startWidth, startX;
 
     $.on(this.header, 'mousedown', '.data-table-col .column-resizer', (e, $handle) => {
       const $cell = $handle.parentNode.parentNode;
-      $currCell = $cell;
+      $resizingCell = $cell;
-      const { colIndex } = $.data($currCell);
+      const { colIndex } = $.data($resizingCell);
       const col = this.getColumn(colIndex);
 
       if (col && col.resizable === false) {
@@ -45,26 +69,26 @@ export default class ColumnManager {
       }
 
       isDragging = true;
-      startWidth = $.style($('.content', $currCell), 'width');
+      startWidth = $.style($('.content', $resizingCell), 'width');
       startX = e.pageX;
     });
 
     $.on(document.body, 'mouseup', (e) => {
-      if (!$currCell) return;
+      if (!$resizingCell) return;
       isDragging = false;
 
-      const { colIndex } = $.data($currCell);
+      const { colIndex } = $.data($resizingCell);
-      const width = $.style($('.content', $currCell), 'width');
+      const width = $.style($('.content', $resizingCell), 'width');
 
       this.setColumnWidth(colIndex, width);
       this.instance.setBodyWidth();
-      $currCell = null;
+      $resizingCell = null;
     });
 
     $.on(document.body, 'mousemove', (e) => {
       if (!isDragging) return;
       const finalWidth = startWidth + (e.pageX - startX);
-      const { colIndex } = $.data($currCell);
+      const { colIndex } = $.data($resizingCell);
 
       if (this.getColumnMinWidth(colIndex) > finalWidth) {
         // don't resize past minWidth
@@ -75,9 +99,74 @@ export default class ColumnManager {
     });
   }
 
+  bindMoveColumn() {
+    let initialized;
+
+    const initialize = () => {
+      if (initialized) {
+        $.off(document.body, 'mousemove', initialize);
+        return;
+      }
+      const ready = $('.data-table-col', this.header);
+      if (!ready) return;
+
+      const $parent = $('.data-table-row', this.header);
+
+      $.on(document, 'drag', '.data-table-col', throttle((e, $target) => {
+        if (e.offsetY > 200) {
+          $target.classList.add('remove-column');
+        } else {
+          setTimeout(() => {
+            $target.classList.remove('remove-column');
+          }, 10);
+        }
+      }));
+
+      this.sortable = Sortable.create($parent, {
+        onEnd: (e) => {
+          const { oldIndex, newIndex } = e;
+          const $draggedCell = e.item;
+          const { colIndex } = $.data($draggedCell);
+
+          // debugger;
+
+          if ($draggedCell.classList.contains('remove-column')) {
+            this.instance.freeze();
+            this.datamanager.removeColumn(colIndex)
+              .then(() => {
+                this.refreshHeader();
+                return this.rowmanager.refreshRows();
+              })
+              .then(() => this.instance.unfreeze());
+            return;
+          }
+
+          if (+colIndex === newIndex) return;
+
+          this.instance.freeze();
+          this.datamanager.switchColumn(oldIndex, newIndex)
+            .then(() => {
+              this.refreshHeader();
+              return this.rowmanager.refreshRows();
+            })
+            .then(() => {
+              this.setColumnWidth(oldIndex);
+              this.setColumnWidth(newIndex);
+            })
+            .then(() => this.instance.unfreeze());
+        },
+        preventOnFilter: false,
+        filter: '.column-resizer, .sort-indicator',
+        animation: 150
+      });
+    };
+
+    $.on(document.body, 'mousemove', initialize);
+  }
+
   bindSortColumn() {
 
-    $.on(this.header, 'click', '.data-table-col .content span:first-child', (e, span) => {
+    $.on(this.header, 'click', '.data-table-col .column-title', (e, span) => {
       const $cell = span.closest('.data-table-col');
       let { colIndex, sortOrder } = $.data($cell);
       sortOrder = getDefault(sortOrder, 'none');
@@ -226,7 +315,7 @@ export default class ColumnManager {
     this.getColumns()
       .map(column => {
         if (['left', 'center', 'right'].includes(column.align)) {
-          this.style.setStyle(`.data-table [data-col-index="${column.colIndex}"]`, {
+          this.style.setStyle(`[data-col-index="${column.colIndex}"]`, {
             'text-align': column.align
           });
         }
@@ -248,6 +337,11 @@ export default class ColumnManager {
   setColumnWidth(colIndex, width) {
     this._columnWidthMap = this._columnWidthMap || [];
 
+    if (!width) {
+      const $headerContent = $(`.data-table-col[data-col-index="${colIndex}"] .content`, this.header);
+      width = $.style($headerContent, 'width');
+    }
+
     let index = this._columnWidthMap[colIndex];
     const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
     const styles = {
@@ -288,6 +382,10 @@ export default class ColumnManager {
     return 0;
   }
 
+  getHeaderCell$(colIndex) {
+    return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
+  }
+
   getLastColumnIndex() {
     return this.datamanager.getColumnCount() - 1;
   }

src/datamanager.js

@@ -8,6 +8,8 @@ export default class DataManager {
       sortOrder: 'none' // asc, desc, none
     };
     this.sortRows = promisify(this.sortRows, this);
+    this.switchColumn = promisify(this.switchColumn, this);
+    this.removeColumn = promisify(this.removeColumn, this);
   }
 
   init(data) {
@@ -54,19 +56,9 @@ export default class DataManager {
       this._checkboxColumnAdded = true;
     }
 
-    // wrap the title in span
-    columns = columns.map(column => {
-      if (typeof column === 'string') {
-        column = `<span>${column}</span>`;
-      } else if (typeof column === 'object') {
-        column.content = `<span>${column.content}</span>`;
-      }
-
-      return column;
-    });
-
     return prepareColumns(columns, {
-      isHeader: 1
+      isHeader: 1,
+      format: value => `<span class="column-title">${value}</span>`
     });
   }
 
@@ -172,6 +164,51 @@ export default class DataManager {
     }
   }
 
+  switchColumn(index1, index2) {
+    // update columns
+    const temp = this.columns[index1];
+    this.columns[index1] = this.columns[index2];
+    this.columns[index2] = temp;
+
+    this.columns[index1].colIndex = index1;
+    this.columns[index2].colIndex = index2;
+
+    // update rows
+    this.rows = this.rows.map(row => {
+      const newCell1 = Object.assign({}, row[index1], { colIndex: index2 });
+      const newCell2 = Object.assign({}, row[index2], { colIndex: index1 });
+
+      let newRow = row.map(cell => {
+        // make object copy
+        return Object.assign({}, cell);
+      });
+
+      newRow[index2] = newCell1;
+      newRow[index1] = newCell2;
+
+      return newRow;
+    });
+  }
+
+  removeColumn(index) {
+    index = +index;
+    const filter = cell => cell.colIndex !== index;
+    const map = (cell, i) => Object.assign({}, cell, { colIndex: i });
+    // update columns
+    this.columns = this.columns
+      .filter(filter)
+      .map(map);
+
+    // update rows
+    this.rows = this.rows.map(row => {
+      const newRow = row
+        .filter(filter)
+        .map(map);
+
+      return newRow;
+    });
+  }
+
   getRowCount() {
     return this.rowCount;
   }

src/datatable.js

@@ -1,5 +1,5 @@
 import $ from './dom';
-
+import Clusterize from 'clusterize.js';
 import DataManager from './datamanager';
 import CellManager from './cellmanager';
 import ColumnManager from './columnmanager';

src/dom.js

@@ -20,23 +20,23 @@ $.create = (tag, o) => {
     if (i === 'inside') {
       $(val).appendChild(element);
     } else
-    if (i === 'around') {
+      if (i === 'around') {
-      let ref = $(val);
+        let ref = $(val);
-      ref.parentNode.insertBefore(element, ref);
+        ref.parentNode.insertBefore(element, ref);
-      element.appendChild(ref);
+        element.appendChild(ref);
-    } else
+      } else
-    if (i === 'styles') {
+        if (i === 'styles') {
-      if (typeof val === 'object') {
+          if (typeof val === 'object') {
-        Object.keys(val).map(prop => {
+            Object.keys(val).map(prop => {
-          element.style[prop] = val[prop];
+              element.style[prop] = val[prop];
-        });
+            });
-      }
+          }
-    } else
+        } else
-    if (i in element) {
+          if (i in element) {
-      element[i] = val;
+            element[i] = val;
-    } else {
+          } else {
-      element.setAttribute(i, val);
+            element.setAttribute(i, val);
-    }
+          }
   }
 
   return element;
@@ -51,6 +51,10 @@ $.on = (element, event, selector, callback) => {
   }
 };
 
+$.off = (element, event, handler) => {
+  element.removeEventListener(event, handler);
+};
+
 $.bind = (element, event, callback) => {
   event.split(/\s+/).forEach(function (event) {
     element.addEventListener(event, callback);

src/style.scss

@@ -4,6 +4,7 @@
 	--border-color: #d1d8dd;
 	--primary-color: rgb(82, 146, 247);
 	--light-bg: #f5f7fa;
+	--light-red: #FD8B8B;
 }
 
 /* resets */
@@ -62,6 +63,16 @@ button, input {
 			transform: translateY(-50%);
 		}
 	}
+
+	.trash-container {
+		position: absolute;
+		bottom: 0;
+		left: 30%;
+		right: 30%;
+		height: 70px;
+		background: palevioletred;
+		opacity: 0.5;
+	}
 }
 
 .body-scrollable {
@@ -101,6 +112,11 @@ button, input {
 		background-color: var(--primary-color);
 		cursor: col-resize;
 	}
+
+	.data-table-col.remove-column {
+		background-color: var(--light-red);
+		transition: 300ms background-color ease-in-out;
+	}
 }
 
 .data-table-col {

webpack.config.js

@@ -56,7 +56,16 @@ const config = {
   },
   plugins: plugins,
   externals: {
-    jquery: 'jQuery'
+    'clusterize.js': {
+      commonjs: 'clusterize.js',
+      commonjs2: 'clusterize.js',
+      root: 'Clusterize'
+    },
+    sortablejs: {
+      commonjs: 'sortablejs',
+      commonjs2: 'sortablejs',
+      root: 'Sortable'
+    }
   }
 };