Set initial width as naturally calculated by table, add refresh method, revert to old resize behaviour

lib/ReGrid.js

@@ -136,11 +136,8 @@ var ReGrid = function () {
     this.enableClusterize = (0, _utils.getDefault)(enableClusterize, false);
     this.enableLogs = (0, _utils.getDefault)(enableLogs, true);
 
-    this.makeDom();
-    this.bindEvents();
     if (data) {
-      this.data = this.prepareData(data);
+      this.refresh(data);
-      this.render();
     }
   }
 
@@ -154,11 +151,18 @@ var ReGrid = function () {
       // this.body = this.wrapper.find('.data-table-body');
       this.footer = this.wrapper.find('.data-table-footer');
     }
+  }, {
+    key: 'refresh',
+    value: function refresh(data) {
+      this.data = this.prepareData(data);
+      this.render();
+    }
   }, {
     key: 'render',
     value: function render() {
       if (this.wrapper.find('.data-table').length === 0) {
         this.makeDom();
+        this.makeStyle();
         this.bindEvents();
       }
 
@@ -345,18 +349,30 @@ var ReGrid = function () {
         margin: 0
       });
 
+      // cache minWidth for each column
       this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
-      // set the width for each column
       this.header.find('.data-table-col').each(function () {
         var col = $(this);
-        var width = col.find('.content').width();
+        var width = parseInt(col.find('.content').css('width'), 10);
         var colIndex = col.attr('data-col-index');
 
         if (!self.minWidthMap[colIndex]) {
           // only set this once
           self.minWidthMap[colIndex] = width;
         }
+      });
+
+      // set initial width as naturally calculated by table's first row
+      this.bodyScrollable.find('.data-table-row[data-row-index="0"] .data-table-col').each(function () {
+        var $cell = $(this);
+        var width = parseInt($cell.find('.content').css('width'), 10);
+        var height = parseInt($cell.find('.content').css('height'), 10);
+
+        var _self$getCellAttr = self.getCellAttr($cell),
+            colIndex = _self$getCellAttr.colIndex;
+
         self.setColumnWidth(colIndex, width);
+        self.setDefaultCellHeight(height);
       });
 
       this.setBodyWidth();
@@ -461,13 +477,13 @@ var ReGrid = function () {
       $('body').on('mouseup', function (e) {
         if (!$currCell) return;
         isDragging = false;
-        // const colIndex = $currCell.attr('data-col-index');
+        var colIndex = $currCell.attr('data-col-index');
 
         if ($currCell) {
-          // const width = $currCell.find('.content').css('width');
+          var width = parseInt($currCell.find('.content').css('width'), 10);
 
-          // self.setColumnWidth(colIndex, width);
+          self.setColumnWidth(colIndex, width);
-          // self.setBodyWidth();
+          self.setBodyWidth();
           $currCell = null;
         }
       });
@@ -482,9 +498,7 @@ var ReGrid = function () {
           return;
         }
 
-        self.setColumnWidth(colIndex, finalWidth);
+        self.setColumnHeaderWidth(colIndex, finalWidth);
-        self.setBodyWidth();
-        // self.setColumnHeaderWidth($currCell, finalWidth);
       });
     }
   }, {
@@ -562,6 +576,20 @@ var ReGrid = function () {
         width: width + 'px'
       });
     }
+  }, {
+    key: 'setColumnHeaderWidth',
+    value: function setColumnHeaderWidth(colIndex, width) {
+      this.setStyle('[data-col-index="' + colIndex + '"][data-is-header] .content', {
+        width: width + 'px'
+      });
+    }
+  }, {
+    key: 'setDefaultCellHeight',
+    value: function setDefaultCellHeight(height) {
+      this.setStyle('.data-table-col .content', {
+        height: height + 'px'
+      });
+    }
   }, {
     key: 'setRowHeight',
     value: function setRowHeight(rowIndex, height) {
@@ -569,21 +597,6 @@ var ReGrid = function () {
         height: height + 'px'
       });
     }
-  }, {
-    key: 'setColumnHeaderWidth',
-    value: function setColumnHeaderWidth(colIndex, width) {
-      colIndex = +colIndex;
-      var $cell = void 0;
-
-      if (typeof colIndex === 'number') {
-        $cell = this.getColumnHeaderElement(colIndex);
-      } else {
-        // directly element is passed
-        $cell = colIndex;
-      }
-
-      $cell.find('.content').width(width);
-    }
   }, {
     key: 'setColumnWidths',
     value: function setColumnWidths() {
@@ -620,20 +633,15 @@ var ReGrid = function () {
   }, {
     key: 'setStyle',
     value: function setStyle(rule, styleMap) {
-      this.getStyleEl();
       var styles = this.$style.text();
 
       styles = (0, _utils.buildCSSRule)(rule, styleMap, styles);
       this.$style.html(styles);
     }
   }, {
-    key: 'getStyleEl',
+    key: 'makeStyle',
-    value: function getStyleEl() {
+    value: function makeStyle() {
-      if (!this.$style) {
+      this.$style = $('<style data-id="regrid"></style>').prependTo(this.wrapper);
-        this.$style = $('<style data-id="regrid"></style>').prependTo(this.wrapper);
-      }
-
-      return this.$style;
     }
   }, {
     key: 'getColumn',

src/regrid.js

@@ -33,11 +33,8 @@ export default class ReGrid {
     this.enableClusterize = getDefault(enableClusterize, false);
     this.enableLogs = getDefault(enableLogs, true);
 
-    this.makeDom();
-    this.bindEvents();
     if (data) {
-      this.data = this.prepareData(data);
+      this.refresh(data);
-      this.render();
     }
   }
 
@@ -62,9 +59,15 @@ export default class ReGrid {
     this.footer = this.wrapper.find('.data-table-footer');
   }
 
+  refresh(data) {
+    this.data = this.prepareData(data);
+    this.render();
+  }
+
   render() {
     if (this.wrapper.find('.data-table').length === 0) {
       this.makeDom();
+      this.makeStyle();
       this.bindEvents();
     }
 
@@ -236,18 +239,28 @@ export default class ReGrid {
       margin: 0
     });
 
+    // cache minWidth for each column
     this.minWidthMap = getDefault(this.minWidthMap, []);
-    // set the width for each column
     this.header.find('.data-table-col').each(function () {
       const col = $(this);
-      const width = col.find('.content').width();
+      const width = parseInt(col.find('.content').css('width'), 10);
       const colIndex = col.attr('data-col-index');
 
       if (!self.minWidthMap[colIndex]) {
         // only set this once
         self.minWidthMap[colIndex] = width;
       }
+    });
+
+    // set initial width as naturally calculated by table's first row
+    this.bodyScrollable.find('.data-table-row[data-row-index="0"] .data-table-col').each(function () {
+      const $cell = $(this);
+      const width = parseInt($cell.find('.content').css('width'), 10);
+      const height = parseInt($cell.find('.content').css('height'), 10);
+      const { colIndex } = self.getCellAttr($cell);
+
       self.setColumnWidth(colIndex, width);
+      self.setDefaultCellHeight(height);
     });
 
     this.setBodyWidth();
@@ -344,13 +357,13 @@ export default class ReGrid {
     $('body').on('mouseup', function (e) {
       if (!$currCell) return;
       isDragging = false;
-      // const colIndex = $currCell.attr('data-col-index');
+      const colIndex = $currCell.attr('data-col-index');
 
       if ($currCell) {
-        // const width = $currCell.find('.content').css('width');
+        const width = parseInt($currCell.find('.content').css('width'), 10);
 
-        // self.setColumnWidth(colIndex, width);
+        self.setColumnWidth(colIndex, width);
-        // self.setBodyWidth();
+        self.setBodyWidth();
         $currCell = null;
       }
     });
@@ -365,9 +378,7 @@ export default class ReGrid {
         return;
       }
 
-      self.setColumnWidth(colIndex, finalWidth);
+      self.setColumnHeaderWidth(colIndex, finalWidth);
-      self.setBodyWidth();
-      // self.setColumnHeaderWidth($currCell, finalWidth);
     });
   }
 
@@ -441,24 +452,22 @@ export default class ReGrid {
     });
   }
 
-  setRowHeight(rowIndex, height) {
+  setColumnHeaderWidth(colIndex, width) {
-    this.setStyle(`[data-row-index="${rowIndex}"] .content`, {
+    this.setStyle(`[data-col-index="${colIndex}"][data-is-header] .content`, {
+      width: width + 'px'
+    });
+  }
+
+  setDefaultCellHeight(height) {
+    this.setStyle('.data-table-col .content', {
       height: height + 'px'
     });
   }
 
-  setColumnHeaderWidth(colIndex, width) {
+  setRowHeight(rowIndex, height) {
-    colIndex = +colIndex;
+    this.setStyle(`[data-row-index="${rowIndex}"] .content`, {
-    let $cell;
+      height: height + 'px'
-
+    });
-    if (typeof colIndex === 'number') {
-      $cell = this.getColumnHeaderElement(colIndex);
-    } else {
-      // directly element is passed
-      $cell = colIndex;
-    }
-
-    $cell.find('.content').width(width);
   }
 
   setColumnWidths() {
@@ -494,20 +503,15 @@ export default class ReGrid {
   }
 
   setStyle(rule, styleMap) {
-    this.getStyleEl();
     let styles = this.$style.text();
 
     styles = buildCSSRule(rule, styleMap, styles);
     this.$style.html(styles);
   }
 
-  getStyleEl() {
+  makeStyle() {
-    if (!this.$style) {
+    this.$style = $('<style data-id="regrid"></style>')
-      this.$style = $('<style data-id="regrid"></style>')
+      .prependTo(this.wrapper);
-        .prependTo(this.wrapper);
-    }
-
-    return this.$style;
   }
 
   getColumn(colIndex) {