Improvements

- setStyle adds style in-place
- smooth column resize

lib/frappe-datatable.js

@@ -2302,7 +2302,7 @@ var ColumnManager = function () {
 
       // align columns
       this.getColumns().map(function (column) {
-        if (column.align && ['left', 'center', 'right'].includes(column.align)) {
+        if (['left', 'center', 'right'].includes(column.align)) {
           _this6.style.setStyle('.data-table [data-col-index="' + column.colIndex + '"]', {
             'text-align': column.align
           });
@@ -2327,18 +2327,30 @@ var ColumnManager = function () {
   }, {
     key: 'setColumnWidth',
     value: function setColumnWidth(colIndex, width) {
-      var selector = '[data-col-index="' + colIndex + '"] .content, [data-col-index="' + colIndex + '"] .edit-cell';
+      this._columnWidthMap = this._columnWidthMap || [];
 
-      this.style.setStyle(selector, {
+      var index = this._columnWidthMap[colIndex];
+      var selector = '[data-col-index="' + colIndex + '"] .content, [data-col-index="' + colIndex + '"] .edit-cell';
+      var styles = {
         width: width + 'px'
-      });
+      };
+
+      index = this.style.setStyle(selector, styles, index);
+      this._columnWidthMap[colIndex] = index;
     }
   }, {
     key: 'setColumnHeaderWidth',
     value: function setColumnHeaderWidth(colIndex, width) {
-      this.style.setStyle('[data-col-index="' + colIndex + '"][data-is-header] .content', {
+      this.$columnMap = this.$columnMap || [];
-        width: width + 'px'
+      var selector = '[data-col-index="' + colIndex + '"][data-is-header] .content';
-      });
+
+      var $column = this.$columnMap[colIndex];
+      if (!$column) {
+        $column = this.header.querySelector(selector);
+        this.$columnMap[colIndex] = $column;
+      }
+
+      $column.style.width = width + 'px';
     }
   }, {
     key: 'getColumnMinWidth',
@@ -2418,6 +2430,8 @@ var Style = function () {
   _createClass(Style, [{
     key: 'setStyle',
     value: function setStyle(rule, styleMap) {
+      var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
+
       var styles = Object.keys(styleMap).map(function (prop) {
         if (!prop.includes('-')) {
           prop = (0, _utils.camelCaseToDash)(prop);
@@ -2426,7 +2440,14 @@ var Style = function () {
       }).join('');
       var ruleString = rule + ' { ' + styles + ' }';
 
-      this.styleSheet.insertRule(ruleString, this.styleSheet.cssRules.length);
+      var _index = this.styleSheet.cssRules.length;
+      if (index !== -1) {
+        this.styleSheet.removeRule(index);
+        _index = index;
+      }
+
+      this.styleSheet.insertRule(ruleString, _index);
+      return _index;
     }
   }]);
 
@@ -3021,7 +3042,7 @@ module.exports = function (css) {
 /* 16 */
 /***/ (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","puppeteer":"^0.13.0","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"}}
 
 /***/ })
 /******/ ]);

src/columnmanager.js

@@ -207,7 +207,7 @@ export default class ColumnManager {
     // align columns
     this.getColumns()
       .map(column => {
-        if (column.align && ['left', 'center', 'right'].includes(column.align)) {
+        if (['left', 'center', 'right'].includes(column.align)) {
           this.style.setStyle(`.data-table [data-col-index="${column.colIndex}"]`, {
             'text-align': column.align
           });
@@ -228,17 +228,29 @@ export default class ColumnManager {
   }
 
   setColumnWidth(colIndex, width) {
-    const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
+    this._columnWidthMap = this._columnWidthMap || [];
 
-    this.style.setStyle(selector, {
+    let index = this._columnWidthMap[colIndex];
+    const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
+    const styles = {
       width: width + 'px'
-    });
+    };
+
+    index = this.style.setStyle(selector, styles, index);
+    this._columnWidthMap[colIndex] = index;
   }
 
   setColumnHeaderWidth(colIndex, width) {
-    this.style.setStyle(`[data-col-index="${colIndex}"][data-is-header] .content`, {
+    this.$columnMap = this.$columnMap || [];
-      width: width + 'px'
+    const selector = `[data-col-index="${colIndex}"][data-is-header] .content`;
-    });
+
+    let $column = this.$columnMap[colIndex];
+    if (!$column) {
+      $column = this.header.querySelector(selector);
+      this.$columnMap[colIndex] = $column;
+    }
+
+    $column.style.width = width + 'px';
   }
 
   getColumnMinWidth(colIndex) {

src/style.js

@@ -9,7 +9,7 @@ export default class Style {
     this.styleSheet = styleEl.sheet;
   }
 
-  setStyle(rule, styleMap) {
+  setStyle(rule, styleMap, index = -1) {
     const styles = Object.keys(styleMap)
       .map(prop => {
         if (!prop.includes('-')) {
@@ -20,6 +20,13 @@ export default class Style {
       .join('');
     let ruleString = `${rule} { ${styles} }`;
 
-    this.styleSheet.insertRule(ruleString, this.styleSheet.cssRules.length);
+    let _index = this.styleSheet.cssRules.length;
+    if (index !== -1) {
+      this.styleSheet.removeRule(index);
+      _index = index;
+    }
+
+    this.styleSheet.insertRule(ruleString, _index);
+    return _index;
   }
 }