Handy setStyle method to update style tag on the fly, resize column using style tag

lib/ReGrid.js

@@ -237,7 +237,10 @@ var ReGrid = function () {
 
 
       if (this.addSerialNoColumn) {
-        var serialNoColumn = 'Sr. No';
+        var serialNoColumn = {
+          content: 'Sr. No',
+          resizable: false
+        };
 
         columns = [serialNoColumn].concat(columns);
 
@@ -363,7 +366,8 @@ var ReGrid = function () {
 
       this.header.on('mousedown', '.data-table-col', function (e) {
         $currCell = (0, _jQuery2.default)(this);
-        var col = self.getColumn($currCell.attr('data-col-index'));
+        var colIndex = $currCell.attr('data-col-index');
+        var col = self.getColumn(colIndex);
 
         if (col && col.resizable === false) {
           return;
@@ -377,13 +381,13 @@ var ReGrid = function () {
       (0, _jQuery2.default)('body').on('mouseup', function (e) {
         if (!$currCell) return;
         isDragging = false;
-        var colIndex = $currCell.attr('data-col-index');
+        // const colIndex = $currCell.attr('data-col-index');
 
         if ($currCell) {
-          var width = $currCell.find('.content').css('width');
+          // const width = $currCell.find('.content').css('width');
 
-          self.setColumnWidth(colIndex, width);
-          self.setBodyWidth();
+          // self.setColumnWidth(colIndex, width);
+          // self.setBodyWidth();
           $currCell = null;
         }
       });
@@ -391,8 +395,11 @@ var ReGrid = function () {
       (0, _jQuery2.default)('body').on('mousemove', function (e) {
         if (!isDragging) return;
         var finalWidth = startWidth + (e.pageX - startX);
+        var colIndex = $currCell.attr('data-col-index');
 
-        self.setColumnHeaderWidth($currCell, finalWidth);
+        self.setStyle('[data-col-index="' + colIndex + '"] .content', 'width: ' + finalWidth + 'px;');
+        self.setBodyWidth();
+        // self.setColumnHeaderWidth($currCell, finalWidth);
       });
     }
   }, {
@@ -469,6 +476,7 @@ var ReGrid = function () {
   }, {
     key: 'setColumnHeaderWidth',
     value: function setColumnHeaderWidth(colIndex, width) {
+      colIndex = +colIndex;
       var $cell = void 0;
 
       if (typeof colIndex === 'number') {
@@ -527,9 +535,33 @@ var ReGrid = function () {
       styles += style;
       $style.html(styles);
     }
+  }, {
+    key: 'setStyle',
+    value: function setStyle(rule, style) {
+      var $style = this.wrapper.find('style[data-id="regrid"]');
+
+      if ($style.length === 0) {
+        $style = (0, _jQuery2.default)('<style data-id="regrid"></style>').prependTo(this.wrapper);
+      }
+
+      var styles = $style.text();
+      var patternStr = (0, _utils.escapeRegExp)(rule) + ' {([^}]*)}';
+      var pattern = new RegExp(patternStr, 'g');
+
+      var property = style.split(':')[0];
+      var propPattern = new RegExp((0, _utils.escapeRegExp)(property) + '[^;]*;');
+
+      styles = styles.replace(pattern, function (match, p1) {
+        var replacer = rule + ' {' + p1.trim() + style + '}';
+
+        return replacer.replace(propPattern, '');
+      });
+      $style.html(styles);
+    }
   }, {
     key: 'getColumn',
     value: function getColumn(colIndex) {
+      colIndex = +colIndex;
       return this.data.columns.find(function (col) {
         return col.colIndex === colIndex;
       });
@@ -537,6 +569,7 @@ var ReGrid = function () {
   }, {
     key: 'getRow',
     value: function getRow(rowIndex) {
+      rowIndex = +rowIndex;
       return this.data.rows.find(function (row) {
         return row[0].rowIndex === rowIndex;
       });
@@ -544,6 +577,7 @@ var ReGrid = function () {
   }, {
     key: 'getColumnHeaderElement',
     value: function getColumnHeaderElement(colIndex) {
+      colIndex = +colIndex;
       if (colIndex < 0) return null;
       return this.wrapper.find('.data-table-col[data-is-header][data-col-index="' + colIndex + '"]');
     }
@@ -669,6 +703,11 @@ function getDefault(a, b) {
   return a !== undefined ? a : b;
 }
 
+function escapeRegExp(str) {
+  // https://stackoverflow.com/a/6969486
+  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+}
+
 exports.default = {
   getHeaderHTML: getHeaderHTML,
   getBodyHTML: getBodyHTML,
@@ -677,7 +716,8 @@ exports.default = {
   prepareRowHeader: prepareRowHeader,
   prepareRows: prepareRows,
   makeDataAttributeString: makeDataAttributeString,
-  getDefault: getDefault
+  getDefault: getDefault,
+  escapeRegExp: escapeRegExp
 };
 module.exports = exports['default'];
 

src/regrid.js

@@ -5,7 +5,8 @@ import {
   getColumnHTML,
   prepareRowHeader,
   prepareRows,
-  getDefault
+  getDefault,
+  escapeRegExp
 } from './utils.js';
 import $ from 'jQuery';
 import Clusterize from 'clusterize.js';
@@ -125,7 +126,10 @@ export default class ReGrid {
     let { columns, rows } = data;
 
     if (this.addSerialNoColumn) {
-      const serialNoColumn = 'Sr. No';
+      const serialNoColumn = {
+        content: 'Sr. No',
+        resizable: false
+      };
 
       columns = [serialNoColumn].concat(columns);
 
@@ -248,7 +252,8 @@ export default class ReGrid {
 
     this.header.on('mousedown', '.data-table-col', function (e) {
       $currCell = $(this);
-      const col = self.getColumn($currCell.attr('data-col-index'));
+      const colIndex = $currCell.attr('data-col-index');
+      const col = self.getColumn(colIndex);
 
       if (col && col.resizable === false) {
         return;
@@ -262,13 +267,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 = $currCell.find('.content').css('width');
 
-        self.setColumnWidth(colIndex, width);
-        self.setBodyWidth();
+        // self.setColumnWidth(colIndex, width);
+        // self.setBodyWidth();
         $currCell = null;
       }
     });
@@ -276,8 +281,11 @@ export default class ReGrid {
     $('body').on('mousemove', function (e) {
       if (!isDragging) return;
       const finalWidth = startWidth + (e.pageX - startX);
+      const colIndex = $currCell.attr('data-col-index');
 
-      self.setColumnHeaderWidth($currCell, finalWidth);
+      self.setStyle(`[data-col-index="${colIndex}"] .content`, `width: ${finalWidth}px;`);
+      self.setBodyWidth();
+      // self.setColumnHeaderWidth($currCell, finalWidth);
     });
   }
 
@@ -351,6 +359,7 @@ export default class ReGrid {
   }
 
   setColumnHeaderWidth(colIndex, width) {
+    colIndex = +colIndex;
     let $cell;
 
     if (typeof colIndex === 'number') {
@@ -408,15 +417,41 @@ export default class ReGrid {
     $style.html(styles);
   }
 
+  setStyle(rule, style) {
+    let $style = this.wrapper.find('style[data-id="regrid"]');
+
+    if ($style.length === 0) {
+      $style = $('<style data-id="regrid"></style>').prependTo(this.wrapper);
+    }
+
+    let styles = $style.text();
+    const patternStr = `${escapeRegExp(rule)} {([^}]*)}`;
+    const pattern = new RegExp(patternStr, 'g');
+
+    const property = style.split(':')[0];
+    const propPattern = new RegExp(`${escapeRegExp(property)}[^;]*;`);
+
+    styles = styles.replace(pattern, function (match, p1) {
+      const replacer =
+        `${rule} {${p1.trim()}${style}}`;
+
+      return replacer.replace(propPattern, '');
+    });
+    $style.html(styles);
+  }
+
   getColumn(colIndex) {
+    colIndex = +colIndex;
     return this.data.columns.find(col => col.colIndex === colIndex);
   }
 
   getRow(rowIndex) {
+    rowIndex = +rowIndex;
     return this.data.rows.find(row => row[0].rowIndex === rowIndex);
   }
 
   getColumnHeaderElement(colIndex) {
+    colIndex = +colIndex;
     if (colIndex < 0) return null;
     return this.wrapper.find(
       `.data-table-col[data-is-header][data-col-index="${colIndex}"]`

src/utils.js

@@ -110,6 +110,11 @@ function getDefault(a, b) {
   return a !== undefined ? a : b;
 }
 
+function escapeRegExp(str) {
+  // https://stackoverflow.com/a/6969486
+  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+}
+
 export default {
   getHeaderHTML,
   getBodyHTML,
@@ -118,5 +123,6 @@ export default {
   prepareRowHeader,
   prepareRows,
   makeDataAttributeString,
-  getDefault
+  getDefault,
+  escapeRegExp
 };