setColumnWidth based on column property

lib/frappe-datatable.js

@@ -1779,9 +1779,7 @@ var ColumnManager = function () {
         var _$$data4 = _dom2.default.data($resizingCell),
             colIndex = _$$data4.colIndex;
 
-        var width = _dom2.default.style((0, _dom2.default)('.content', $resizingCell), 'width');
+        _this3.setColumnWidth(colIndex);
-
-        _this3.setColumnWidth(colIndex, width);
         _this3.instance.setBodyWidth();
         $resizingCell = null;
       });
@@ -1797,8 +1795,8 @@ var ColumnManager = function () {
           // don't resize past minWidth
           return;
         }
-
+        _this3.datamanager.updateColumn(colIndex, { width: finalWidth });
-        _this3.setColumnHeaderWidth(colIndex, finalWidth);
+        _this3.setColumnHeaderWidth(colIndex);
       });
     }
   }, {
@@ -1818,16 +1816,6 @@ var ColumnManager = function () {
 
         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) {
-            $target.classList.add('remove-column');
-          } else {
-            setTimeout(function () {
-              $target.classList.remove('remove-column');
-            }, 10);
-          }
-        }));
-
         _this4.sortable = _sortablejs2.default.create($parent, {
           onEnd: function onEnd(e) {
             var oldIndex = e.oldIndex,
@@ -1951,9 +1939,9 @@ var ColumnManager = function () {
     value: function setDimensions() {
       this.setHeaderStyle();
       this.setupMinWidth();
-      this.setNaturalColumnWidth();
+      this.setupNaturalColumnWidth();
       this.distributeRemainingWidth();
-      this.setColumnAlignments();
+      this.setColumnStyle();
     }
   }, {
     key: 'setHeaderStyle',
@@ -1972,7 +1960,7 @@ var ColumnManager = function () {
 
       // don't show resize cursor on nonResizable columns
       var nonResizableColumnsSelector = this.datamanager.getColumns().filter(function (col) {
-        return col.resizable !== undefined && !col.resizable;
+        return col.resizable === false;
       }).map(function (col) {
         return col.colIndex;
       }).map(function (i) {
@@ -1988,46 +1976,42 @@ var ColumnManager = function () {
     value: function setupMinWidth() {
       var _this9 = this;
 
-      // cache minWidth for each column
-      this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
-
       _dom2.default.each('.data-table-col', this.header).map(function (col) {
         var width = _dom2.default.style((0, _dom2.default)('.content', col), 'width');
 
         var _$$data8 = _dom2.default.data(col),
             colIndex = _$$data8.colIndex;
 
-        if (!_this9.minWidthMap[colIndex]) {
+        var column = _this9.getColumn(colIndex);
+
+        if (!column.minWidth) {
           // only set this once
-          _this9.minWidthMap[colIndex] = width;
+          _this9.datamanager.updateColumn(colIndex, { minWidth: width });
-          _this9.datamanager.updateColumn(colIndex, {
-            minWidth: width
-          });
         }
       });
     }
   }, {
-    key: 'setNaturalColumnWidth',
+    key: 'setupNaturalColumnWidth',
-    value: function setNaturalColumnWidth() {
+    value: function setupNaturalColumnWidth() {
       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) {
-
-        var width = _dom2.default.style((0, _dom2.default)('.content', $cell), 'width');
-        var height = _dom2.default.style((0, _dom2.default)('.content', $cell), 'height');
-
         var _$$data9 = _dom2.default.data($cell),
             colIndex = _$$data9.colIndex;
 
+        if (_this10.getColumn(colIndex).width > 0) {
+          // already set
+          return;
+        }
+
+        var width = _dom2.default.style((0, _dom2.default)('.content', $cell), 'width');
         var minWidth = _this10.getColumnMinWidth(colIndex);
 
         if (width < minWidth) {
           width = minWidth;
         }
         _this10.datamanager.updateColumn(colIndex, { width: width });
-        _this10.setColumnWidth(colIndex, width);
-        _this10.setDefaultCellHeight(height);
       });
     }
   }, {
@@ -2056,10 +2040,7 @@ var ColumnManager = function () {
         var finalWidth = Math.min(width + deltaWidth) - 2;
 
         _this11.datamanager.updateColumn(col.colIndex, { width: finalWidth });
-        _this11.setColumnHeaderWidth(col.colIndex, finalWidth);
-        _this11.setColumnWidth(col.colIndex, finalWidth);
       });
-      this.instance.setBodyWidth();
     }
   }, {
     key: 'setDefaultCellHeight',
@@ -2069,18 +2050,23 @@ var ColumnManager = function () {
       });
     }
   }, {
-    key: 'setColumnAlignments',
+    key: 'setColumnStyle',
-    value: function setColumnAlignments() {
+    value: function setColumnStyle() {
       var _this12 = this;
 
       // align columns
       this.getColumns().map(function (column) {
+        // alignment
         if (['left', 'center', 'right'].includes(column.align)) {
           _this12.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
             'text-align': column.align
           });
         }
+        // width
+        _this12.setColumnHeaderWidth(column.colIndex);
+        _this12.setColumnWidth(column.colIndex);
       });
+      this.instance.setBodyWidth();
     }
   }, {
     key: 'sortRows',
@@ -2099,13 +2085,12 @@ var ColumnManager = function () {
     }
   }, {
     key: 'setColumnWidth',
-    value: function setColumnWidth(colIndex, width) {
+    value: function setColumnWidth(colIndex) {
+      colIndex = +colIndex;
       this._columnWidthMap = this._columnWidthMap || [];
 
-      if (!width) {
+      var _getColumn = this.getColumn(colIndex),
-        var $headerContent = (0, _dom2.default)('.data-table-col[data-col-index="' + colIndex + '"] .content', this.header);
+          width = _getColumn.width;
-        width = _dom2.default.style($headerContent, 'width');
-      }
 
       var index = this._columnWidthMap[colIndex];
       var selector = '[data-col-index="' + colIndex + '"] .content, [data-col-index="' + colIndex + '"] .edit-cell';
@@ -2118,10 +2103,14 @@ var ColumnManager = function () {
     }
   }, {
     key: 'setColumnHeaderWidth',
-    value: function setColumnHeaderWidth(colIndex, width) {
+    value: function setColumnHeaderWidth(colIndex) {
+      colIndex = +colIndex;
       this.$columnMap = this.$columnMap || [];
       var selector = '[data-col-index="' + colIndex + '"][data-is-header] .content';
 
+      var _getColumn2 = this.getColumn(colIndex),
+          width = _getColumn2.width;
+
       var $column = this.$columnMap[colIndex];
       if (!$column) {
         $column = this.header.querySelector(selector);
@@ -2134,7 +2123,7 @@ var ColumnManager = function () {
     key: 'getColumnMinWidth',
     value: function getColumnMinWidth(colIndex) {
       colIndex = +colIndex;
-      return this.minWidthMap && this.minWidthMap[colIndex];
+      return this.getColumn(colIndex).minWidth || 24;
     }
   }, {
     key: 'getFirstColumnIndex',
@@ -2289,7 +2278,7 @@ var DataTable = function () {
       wrapper = document.querySelector(wrapper);
     }
     this.wrapper = wrapper;
-    if (!this.wrapper) {
+    if (!(this.wrapper instanceof HTMLElement)) {
       throw new Error('Invalid argument given for `wrapper`');
     }
 
@@ -3013,7 +3002,7 @@ function prepareCell(col, i) {
     align: 'left',
     sortOrder: 'none',
     colIndex: 0,
-    width: 40
+    width: 0
   };
 
   if (typeof col === 'string') {
@@ -3893,7 +3882,7 @@ module.exports = function (css) {
 /* 19 */
 /***/ (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-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"}}
+module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"start":"npm run dev","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"}}
 
 /***/ })
 /******/ ]);

package.json

@@ -4,6 +4,7 @@
   "description": "A modern datatable library for the web",
   "main": "lib/frappe-datatable.js",
   "scripts": {
+    "start": "npm run dev",
     "build": "webpack --env build",
     "dev": "webpack --progress --colors --watch --env dev",
     "test": "mocha --compilers js:babel-core/register --colors ./test/*.spec.js",

src/columnmanager.js

@@ -1,7 +1,7 @@
 import $ from './dom';
 import Sortable from 'sortablejs';
 import { getRowHTML } from './rowmanager';
-import { getDefault, throttle } from './utils';
+import { getDefault } from './utils';
 
 export default class ColumnManager {
   constructor(instance) {
@@ -125,9 +125,7 @@ export default class ColumnManager {
       isDragging = false;
 
       const { colIndex } = $.data($resizingCell);
-      const width = $.style($('.content', $resizingCell), 'width');
+      this.setColumnWidth(colIndex);
-
-      this.setColumnWidth(colIndex, width);
       this.instance.setBodyWidth();
       $resizingCell = null;
     });
@@ -141,8 +139,8 @@ export default class ColumnManager {
         // don't resize past minWidth
         return;
       }
-
+      this.datamanager.updateColumn(colIndex, { width: finalWidth });
-      this.setColumnHeaderWidth(colIndex, finalWidth);
+      this.setColumnHeaderWidth(colIndex);
     });
   }
 
@@ -159,16 +157,6 @@ export default class ColumnManager {
 
       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;
@@ -277,9 +265,9 @@ export default class ColumnManager {
   setDimensions() {
     this.setHeaderStyle();
     this.setupMinWidth();
-    this.setNaturalColumnWidth();
+    this.setupNaturalColumnWidth();
     this.distributeRemainingWidth();
-    this.setColumnAlignments();
+    this.setColumnStyle();
   }
 
   setHeaderStyle() {
@@ -297,7 +285,7 @@ export default class ColumnManager {
 
     // don't show resize cursor on nonResizable columns
     const nonResizableColumnsSelector = this.datamanager.getColumns()
-      .filter(col => col.resizable !== undefined && !col.resizable)
+      .filter(col => col.resizable === false)
       .map(col => col.colIndex)
       .map(i => `.data-table-header [data-col-index="${i}"]`)
       .join();
@@ -308,38 +296,35 @@ export default class ColumnManager {
   }
 
   setupMinWidth() {
-    // cache minWidth for each column
-    this.minWidthMap = getDefault(this.minWidthMap, []);
-
     $.each('.data-table-col', this.header).map(col => {
       const width = $.style($('.content', col), 'width');
       const { colIndex } = $.data(col);
+      const column = this.getColumn(colIndex);
 
-      if (!this.minWidthMap[colIndex]) {
+      if (!column.minWidth) {
         // only set this once
-        this.minWidthMap[colIndex] = width;
+        this.datamanager.updateColumn(colIndex, { minWidth: width });
-        this.datamanager.updateColumn(colIndex, {
-          minWidth: width
-        });
       }
     });
   }
 
-  setNaturalColumnWidth() {
+  setupNaturalColumnWidth() {
     // set initial width as naturally calculated by table's first row
     $.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map($cell => {
 
-      let width = $.style($('.content', $cell), 'width');
-      const height = $.style($('.content', $cell), 'height');
       const { colIndex } = $.data($cell);
+      if (this.getColumn(colIndex).width > 0) {
+        // already set
+        return;
+      }
+
+      let width = $.style($('.content', $cell), 'width');
       const minWidth = this.getColumnMinWidth(colIndex);
 
       if (width < minWidth) {
         width = minWidth;
       }
       this.datamanager.updateColumn(colIndex, { width });
-      this.setColumnWidth(colIndex, width);
-      this.setDefaultCellHeight(height);
     });
   }
 
@@ -365,10 +350,7 @@ export default class ColumnManager {
       let finalWidth = Math.min(width + deltaWidth) - 2;
 
       this.datamanager.updateColumn(col.colIndex, { width: finalWidth });
-      this.setColumnHeaderWidth(col.colIndex, finalWidth);
-      this.setColumnWidth(col.colIndex, finalWidth);
     });
-    this.instance.setBodyWidth();
   }
 
   setDefaultCellHeight(height) {
@@ -377,16 +359,21 @@ export default class ColumnManager {
     });
   }
 
-  setColumnAlignments() {
+  setColumnStyle() {
     // align columns
     this.getColumns()
       .map(column => {
+        // alignment
         if (['left', 'center', 'right'].includes(column.align)) {
           this.style.setStyle(`[data-col-index="${column.colIndex}"]`, {
             'text-align': column.align
           });
         }
+        // width
+        this.setColumnHeaderWidth(column.colIndex);
+        this.setColumnWidth(column.colIndex);
       });
+    this.instance.setBodyWidth();
   }
 
   sortRows(colIndex, sortOrder) {
@@ -401,13 +388,11 @@ export default class ColumnManager {
     return this.datamanager.getColumns();
   }
 
-  setColumnWidth(colIndex, width) {
+  setColumnWidth(colIndex) {
+    colIndex = +colIndex;
     this._columnWidthMap = this._columnWidthMap || [];
 
-    if (!width) {
+    const { width } = this.getColumn(colIndex);
-      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`;
@@ -419,9 +404,11 @@ export default class ColumnManager {
     this._columnWidthMap[colIndex] = index;
   }
 
-  setColumnHeaderWidth(colIndex, width) {
+  setColumnHeaderWidth(colIndex) {
+    colIndex = +colIndex;
     this.$columnMap = this.$columnMap || [];
     const selector = `[data-col-index="${colIndex}"][data-is-header] .content`;
+    const { width } = this.getColumn(colIndex);
 
     let $column = this.$columnMap[colIndex];
     if (!$column) {
@@ -434,7 +421,7 @@ export default class ColumnManager {
 
   getColumnMinWidth(colIndex) {
     colIndex = +colIndex;
-    return this.minWidthMap && this.minWidthMap[colIndex];
+    return this.getColumn(colIndex).minWidth || 24;
   }
 
   getFirstColumnIndex() {

src/datamanager.js

@@ -429,7 +429,7 @@ function prepareCell(col, i) {
     align: 'left',
     sortOrder: 'none',
     colIndex: 0,
-    width: 40
+    width: 0
   };
 
   if (typeof col === 'string') {

src/datatable.js

@@ -18,7 +18,7 @@ class DataTable {
       wrapper = document.querySelector(wrapper);
     }
     this.wrapper = wrapper;
-    if (!this.wrapper) {
+    if (!(this.wrapper instanceof HTMLElement)) {
       throw new Error('Invalid argument given for `wrapper`');
     }