From 5e5156f92b3f62a5115b2ac2cdfb59f5d2573057 Mon Sep 17 00:00:00 2001
From: konuch <Radoslav.Konuch@anritsu.com>
Date: Tue, 4 Sep 2018 13:38:45 +0200
Subject: [PATCH 01/11] Update package.json

Removed files restriction from package.json file. This way the entire folder is checked out when installing via npm.
---
 package.json | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 7d90e03..99a44d3 100644
--- a/package.json
+++ b/package.json
@@ -32,9 +32,5 @@
         "resize table columns",
         "jquery"
 	],
-	"homepage" : "http://bacubacu.com/colresizable/",
-	"files" : [
-		"colResizable-1.6.min.js",
-		"./samples"
-	]
+	"homepage" : "http://bacubacu.com/colresizable/"
 }

From 1c02af35bc9d63adf8d4028405ac12ed99d41855 Mon Sep 17 00:00:00 2001
From: rado_konuch <reminqo88@gmail.com>
Date: Wed, 24 Jul 2019 14:11:59 +0200
Subject: [PATCH 02/11] Made the code more readable and added dragged column
 index and dragged column object to onResize and onDrag callbacks.

---
 colResizable-1.6.js | 715 +++++++++++++++++++++++++-------------------
 1 file changed, 410 insertions(+), 305 deletions(-)

diff --git a/colResizable-1.6.js b/colResizable-1.6.js
index ad5c61a..6bd94a4 100644
--- a/colResizable-1.6.js
+++ b/colResizable-1.6.js
@@ -1,73 +1,106 @@
 /**
-               _ _____           _          _     _      
-              | |  __ \         (_)        | |   | |     
-      ___ ___ | | |__) |___  ___ _ ______ _| |__ | | ___ 
+               _ _____           _          _     _
+              | |  __ \         (_)        | |   | |
+      ___ ___ | | |__) |___  ___ _ ______ _| |__ | | ___
      / __/ _ \| |  _  // _ \/ __| |_  / _` | '_ \| |/ _ \
     | (_| (_) | | | \ \  __/\__ \ |/ / (_| | |_) | |  __/
      \___\___/|_|_|  \_\___||___/_/___\__,_|_.__/|_|\___|
-	 
+
 	v1.7 - jQuery plugin created by Alvaro Prieto Lauroba
-	
+
 	Licences: MIT & GPL
-	Feel free to use or modify this plugin as far as my full name is kept	
+	Feel free to use or modify this plugin as far as my full name is kept
 */
 
-(function($){ 	
-	
+(function ($) {
+
 	//IE8 Polyfill
-	if(!Array.indexOf) { Array.prototype.indexOf = function(obj) { for(var i=0; i<this.length;i++){if(this[i]==obj){return i;}} return -1; }}
-	
+	if (!Array.indexOf) { Array.prototype.indexOf = function (obj) { for (var i = 0; i < this.length; i++) { if (this[i] == obj) { return i; } } return -1; } }
+
 	var d = $(document); 		//window object
 	var h = $("head");			//head object
 	var drag = null;			//reference to the current grip that is being dragged
 	var tables = {};			//object of the already processed tables (table.id as key)
-	var	count = 0;				//internal count to create unique IDs when needed.	
-	
+	var count = 0;				//internal count to create unique IDs when needed.
+
 	//common strings for packing
-	var ID = "id";	
+	var ID = "id";
 	var PX = "px";
-	var SIGNATURE ="JColResizer";
-    var FLEX = "JCLRFlex";
-	
+	var SIGNATURE = "JColResizer";
+	var FLEX = "JCLRFlex";
+
 	//short-cuts
 	var I = parseInt;
 	var M = Math;
-	var ie = navigator.userAgent.indexOf('Trident/4.0')>0;
+	var ie = navigator.userAgent.indexOf('Trident/4.0') > 0;
 	var S;
-    var pad = ""
-	try{S = sessionStorage;}catch(e){}	//Firefox crashes when executed as local file system
-    
-	
-	//append required CSS rules  
-    h.append("<style type='text/css'>  .JColResizer{table-layout:fixed;} .JColResizer > tbody > tr > td, .JColResizer > tbody > tr > th{overflow:hidden}  .JPadding > tbody > tr > td, .JPadding > tbody > tr > th{padding-left:0!important; padding-right:0!important;} .JCLRgrips{ height:0px; position:relative;} .JCLRgrip{margin-left:-5px; position:absolute; z-index:5; } .JCLRgrip .JColResizer{position:absolute;background-color:red;filter:alpha(opacity=1);opacity:0;width:10px;height:100%;cursor: col-resize;top:0px} .JCLRLastGrip{position:absolute; width:1px; } .JCLRgripDrag{ border-left:1px dotted black;	} .JCLRFlex{width:auto!important;} .JCLRgrip.JCLRdisabledGrip .JColResizer{cursor:default; display:none;}</style>");
-
-	
+	var pad = ""
+	try { S = sessionStorage; } catch (e) { }	//Firefox crashes when executed as local file system
+
+
+	//append required CSS rules
+	h.append("<style type='text/css'>  .JColResizer{table-layout:fixed;} .JColResizer > tbody > tr > td, .JColResizer > tbody > tr > th{overflow:hidden}  .JPadding > tbody > tr > td, .JPadding > tbody > tr > th{padding-left:0!important; padding-right:0!important;} .JCLRgrips{ height:0px; position:relative;} .JCLRgrip{margin-left:-5px; position:absolute; z-index:5; } .JCLRgrip .JColResizer{position:absolute;background-color:red;filter:alpha(opacity=1);opacity:0;width:10px;height:100%;cursor: col-resize;top:0px} .JCLRLastGrip{position:absolute; width:1px; } .JCLRgripDrag{ border-left:1px dotted black;	} .JCLRFlex{width:auto!important;} .JCLRgrip.JCLRdisabledGrip .JColResizer{cursor:default; display:none;}</style>");
+
+
 	/**
 	 * Function to allow column resizing for table objects. It is the starting point to apply the plugin.
 	 * @param {DOM node} tb - reference to the DOM table object to be enhanced
 	 * @param {Object} options	- some customization values
 	 */
-	var init = function( tb, options){	
-		var t = $(tb);				    //the table object is wrapped
-        t.opt = options;                //each table has its own options available at anytime
-        t.mode = options.resizeMode;    //shortcuts
-        t.dc = t.opt.disabledColumns;
-        if(t.opt.removePadding) t.addClass("JPadding");
-		if(t.opt.disable) return destroy(t);				//the user is asking to destroy a previously colResized table
-		var	id = t.id = t.attr(ID) || SIGNATURE+count++;	//its id is obtained, if null new one is generated		
-		t.p = t.opt.postbackSafe; 							//short-cut to detect postback safe 		
-		if(!t.is("table") || tables[id] && !t.opt.partialRefresh) return; 		//if the object is not a table or if it was already processed then it is ignored.
-		if (t.opt.hoverCursor !== 'col-resize') h.append("<style type='text/css'>.JCLRgrip .JColResizer:hover{cursor:"+ t.opt.hoverCursor +"!important}</style>");  //if hoverCursor has been set, append the style
-        t.addClass(SIGNATURE).attr(ID, id).before('<div class="JCLRgrips"/>');	//the grips container object is added. Signature class forces table rendering in fixed-layout mode to prevent column's min-width
-		t.g = []; t.c = []; t.w = t.width(); t.gc = t.prev(); t.f=t.opt.fixed;	//t.c and t.g are arrays of columns and grips respectively				
-		if(options.marginLeft) t.gc.css("marginLeft", options.marginLeft);  	//if the table contains margins, it must be specified
-		if(options.marginRight) t.gc.css("marginRight", options.marginRight);  	//since there is no (direct) way to obtain margin values in its original units (%, em, ...)
-		t.cs = I(ie? tb.cellSpacing || tb.currentStyle.borderSpacing :t.css('border-spacing'))||2;	//table cellspacing (not even jQuery is fully cross-browser)
-		t.b  = I(ie? tb.border || tb.currentStyle.borderLeftWidth :t.css('border-left-width'))||1;	//outer border width (again cross-browser issues)
+	var init = function (tb, options) {
+		var table = $(tb);				    //the table object is wrapped
+		table.opt = options;                //each table has its own options available at anytime
+		table.mode = options.resizeMode;    //shortcuts
+		table.disabledColumns = table.opt.disabledColumns;
+
+		if (table.opt.removePadding) {
+			table.addClass("JPadding");
+		}
+
+		//the user is asking to destroy a previously colResized table
+		if (table.opt.disable) {
+			return destroy(table);
+		}
+
+		var id = table.id = table.attr(ID) || SIGNATURE + count++;	//its id is obtained, if null new one is generated
+		table.postback = table.opt.postbackSafe; //short-cut to detect postback safe
+
+		//if the object is not a table or if it was already processed then it is ignored.
+		if (!table.is("table") || tables[id] && !table.opt.partialRefresh) {
+			return;
+		}
+
+		if (table.opt.hoverCursor !== 'col-resize') {
+			//if hoverCursor has been set, append the style
+			h.append("<style type='text/css'>.JCLRgrip .JColResizer:hover{cursor:" + table.opt.hoverCursor + "!important}</style>");
+		}
+
+		//the grips container object is added. Signature class forces table rendering in fixed-layout mode to prevent column's min-width
+		table.addClass(SIGNATURE).attr(ID, id).before('<div class="JCLRgrips"/>');
+
+		//table.c and table.g are arrays of columns and grips respectively
+		table.g = [];
+		table.c = [];
+		table.w = table.width();
+		table.gc = table.prev();
+		table.fixed = table.opt.fixed;
+
+		if (options.marginLeft) {
+			//if the table contains margins, it must be specified
+			table.gc.css("marginLeft", options.marginLeft);
+		}
+
+		if (options.marginRight) {
+			//since there is no (direct) way to obtain margin values in its original units (%, em, ...)
+			table.gc.css("marginRight", options.marginRight);
+		}
+		//table cellspacing (not even jQuery is fully cross-browser)
+		table.cs = I(ie ? tb.cellSpacing || tb.currentStyle.borderSpacing : table.css('border-spacing')) || 2;
+		//outer border width (again cross-browser issues)
+		table.b = I(ie ? tb.border || tb.currentStyle.borderLeftWidth : table.css('border-left-width')) || 1;
 		// if(!(tb.style.width || tb.width)) t.width(t.width()); //I am not an IE fan at all, but it is a pity that only IE has the currentStyle attribute working as expected. For this reason I can not check easily if the table has an explicit width or if it is rendered as "auto"
-		tables[id] = t; 	//the table object is stored using its id as key	
-		createGrips(t);		//grips are created 
-	
+		tables[id] = table; 	//the table object is stored using its id as key
+		createGrips(table);	//grips are created
 	};
 
 
@@ -75,344 +108,416 @@
 	 * This function allows to remove any enhancements performed by this plugin on a previously processed table.
 	 * @param {jQuery ref} t - table object
 	 */
-	var destroy = function(t){
-		var id=t.attr(ID), t=tables[id];		//its table object is found
-		if(!t||!t.is("table")) return;			//if none, then it wasn't processed	 
-		t.removeClass(SIGNATURE+" "+FLEX).gc.remove();	//class and grips are removed
+	var destroy = function (t) {
+		var id = t.attr(ID), t = tables[id];		//its table object is found
+		if (!t || !t.is("table")) return;			//if none, then it wasn't processed
+		t.removeClass(SIGNATURE + " " + FLEX).gc.remove();	//class and grips are removed
 		delete tables[id];						//clean up data
 	};
 
 
 	/**
-	 * Function to create all the grips associated with the table given by parameters 
-	 * @param {jQuery ref} t - table object
+	 * Function to create all the grips associated with the table given by parameters
+	 * @param {jQuery ref} table - table object
 	 */
-	var createGrips = function(t){	
-	
-        var th = t.find(">thead>tr:first>th,>thead>tr:first>td"); //table headers are obtained
-		if(!th.length) th = t.find(">tbody>tr:first>th,>tr:first>th,>tbody>tr:first>td, >tr:first>td");	 //but headers can also be included in different ways
-		th = th.filter(":visible");					//filter invisible columns
-		t.cg = t.find("col"); 						//a table can also contain a colgroup with col elements		
-		t.ln = th.length;							//table length is stored	
-		if(t.p && S && S[t.id])memento(t,th);		//if 'postbackSafe' is enabled and there is data for the current table, its coloumn layout is restored
-		th.each(function(i){						//iterate through the table column headers			
-			var c = $(this); 						//jquery wrap for the current column		
-            var dc = t.dc.indexOf(i)!=-1;           //is this a disabled column?
-			var g = $(t.gc.append('<div class="JCLRgrip"></div>')[0].lastChild); //add the visual node to be used as grip
-            g.append(dc ? "": t.opt.gripInnerHtml).append('<div class="'+SIGNATURE+'"></div>');
-            if(i == t.ln-1){                        //if the current grip is the las one 
-                g.addClass("JCLRLastGrip");         //add a different css class to stlye it in a different way if needed
-                if(t.f) g.html("");                 //if the table resizing mode is set to fixed, the last grip is removed since table with can not change
-            }
-            g.bind('touchstart mousedown', onGripMouseDown); //bind the mousedown event to start dragging 
-            
-            if (!dc){ 
-                //if normal column bind the mousedown event to start dragging, if disabled then apply its css class
-                g.removeClass('JCLRdisabledGrip').bind('touchstart mousedown', onGripMouseDown);      
-            }else{
-                g.addClass('JCLRdisabledGrip'); 
-            }
-
-			g.t = t; g.i = i; g.c = c;	c.w =c.width();		//some values are stored in the grip's node data as shortcut
-			t.g.push(g); t.c.push(c);						//the current grip and column are added to its table object
+	var createGrips = function (table) {
+
+		//table headers are obtained
+		var th = table.find(">thead>tr:first>th,>thead>tr:first>td");
+
+		//but headers can also be included in different ways
+		if (!th.length) {
+			th = table.find(">tbody>tr:first>th,>tr:first>th,>tbody>tr:first>td, >tr:first>td");
+		}
+
+		//filter invisible columns
+		th = th.filter(":visible");
+
+		//a table can also contain a colgroup with col elements
+		table.cg = table.find("col");
+
+		//table length is stored
+		table.ln = th.length;
+
+		//if 'postbackSafe' is enabled and there is data for the current table, its coloumn layout is restored
+		if (table.p && S && S[table.id]) {
+			memento(table, th);
+		}
+
+		th.each(function (i) {						//iterate through the table column headers
+			var c = $(this); 						//jquery wrap for the current column
+			var disabledColumns = table.disabledColumns.indexOf(i) != -1;           //is this a disabled column?
+			var grip = $(table.gc.append('<div class="JCLRgrip"></div>')[0].lastChild); //add the visual node to be used as grip
+			grip.append(disabledColumns ? "" : table.opt.gripInnerHtml).append('<div class="' + SIGNATURE + '"></div>');
+
+			//if the current grip is the las one
+			if (i == table.ln - 1) {
+				grip.addClass("JCLRLastGrip"); //add a different css class to stlye it in a different way if needed
+
+				//if the table resizing mode is set to fixed, the last grip is removed since table with can not change
+				if (table.fixed) {
+					grip.html("");
+				}
+			}
+			grip.bind('touchstart mousedown', onGripMouseDown); //bind the mousedown event to start dragging
+
+			if (!disabledColumns) {
+				//if normal column bind the mousedown event to start dragging, if disabled then apply its css class
+				grip.removeClass('JCLRdisabledGrip').bind('touchstart mousedown', onGripMouseDown);
+			} else {
+				grip.addClass('JCLRdisabledGrip');
+			}
+
+			//some values are stored in the grip's node data as shortcut
+			grip.t = table;
+			grip.i = i;
+			grip.c = c;
+			c.w = c.width();
+			//the current grip and column are added to its table object
+			table.g.push(grip);
+			table.c.push(c);
 			c.width(c.w).removeAttr("width");				//the width of the column is converted into pixel-based measurements
-			g.data(SIGNATURE, {i:i, t:t.attr(ID), last: i == t.ln-1});	 //grip index and its table name are stored in the HTML 												
-		}); 	
-		t.cg.removeAttr("width");	//remove the width attribute from elements in the colgroup 
+			grip.data(SIGNATURE, { i: i, t: table.attr(ID), last: i == table.ln - 1 });	 //grip index and its table name are stored in the HTML
+		});
+		table.cg.removeAttr("width");	//remove the width attribute from elements in the colgroup
 
-		t.find('td, th').not(th).not('table th, table td').each(function(){  
+		table.find('td, th').not(th).not('table th, table td').each(function () {
 			$(this).removeAttr('width');	//the width attribute is removed from all table cells which are not nested in other tables and dont belong to the header
-		});		
-        if(!t.f){
-            t.removeAttr('width').addClass(FLEX); //if not fixed, let the table grow as needed
-        }
-        syncGrips(t); 				//the grips are positioned according to the current table layout			
-        //there is a small problem, some cells in the table could contain dimension values interfering with the 
-        //width value set by this plugin. Those values are removed
-		
+		});
+
+		if (!table.fixed) {
+			table.removeAttr('width').addClass(FLEX); //if not fixed, let the table grow as needed
+		}
+		//the grips are positioned according to the current table layout
+		syncGrips(table);
+		//there is a small problem, some cells in the table could contain dimension values interfering with the
+		//width value set by this plugin. Those values are removed
+
 	};
-	
-    
+
+
 	/**
 	 * Function to allow the persistence of columns dimensions after a browser postback. It is based in
 	 * the HTML5 sessionStorage object, which can be emulated for older browsers using sessionstorage.js
 	 * @param {jQuery ref} t - table object
 	 * @param {jQuery ref} th - reference to the first row elements (only set in deserialization)
 	 */
-	var memento = function(t, th){ 
-		var w,m=0,i=0,aux =[],tw;
-		if(th){										//in deserialization mode (after a postback)
+	var memento = function (t, th) {
+		var w, m = 0, i = 0, aux = [], tw;
+		if (th) {										//in deserialization mode (after a postback)
 			t.cg.removeAttr("width");
-			if(t.opt.flush){ S[t.id] =""; return;} 	//if flush is activated, stored data is removed
+			if (t.opt.flush) { S[t.id] = ""; return; } 	//if flush is activated, stored data is removed
 			w = S[t.id].split(";");					//column widths is obtained
-			tw = w[t.ln+1];
-            if(!t.f && tw){							//if not fixed and table width data available its size is restored
-                t.width(tw*=1);
-                if(t.opt.overflow) {				//if overfolw flag is set, restore table width also as table min-width
-                    t.css('min-width', tw + PX);
-                    t.w = tw;
-                }
-            }
-			for(;i<t.ln;i++){						//for each column
-				aux.push(100*w[i]/w[t.ln]+"%"); 	//width is stored in an array since it will be required again a couple of lines ahead
-				th.eq(i).css("width", aux[i] ); 	//each column width in % is restored
-			}			
-			for(i=0;i<t.ln;i++)
+			tw = w[t.ln + 1];
+			if (!t.fixed && tw) {							//if not fixed and table width data available its size is restored
+				t.width(tw *= 1);
+				if (t.opt.overflow) {				//if overfolw flag is set, restore table width also as table min-width
+					t.css('min-width', tw + PX);
+					t.w = tw;
+				}
+			}
+			for (; i < t.ln; i++) {						//for each column
+				aux.push(100 * w[i] / w[t.ln] + "%"); 	//width is stored in an array since it will be required again a couple of lines ahead
+				th.eq(i).css("width", aux[i]); 	//each column width in % is restored
+			}
+			for (i = 0; i < t.ln; i++)
 				t.cg.eq(i).css("width", aux[i]);	//this code is required in order to create an inline CSS rule with higher precedence than an existing CSS class in the "col" elements
-		}else{							//in serialization mode (after resizing a column)
-			S[t.id] ="";				//clean up previous data
-			for(;i < t.c.length; i++){	//iterate through columns
+		} else {							//in serialization mode (after resizing a column)
+			S[t.id] = "";				//clean up previous data
+			for (; i < t.c.length; i++) {	//iterate through columns
 				w = t.c[i].width();		//width is obtained
-				S[t.id] += w+";";		//width is appended to the sessionStorage object using ID as key
-				m+=w;					//carriage is updated to obtain the full size used by columns
+				S[t.id] += w + ";";		//width is appended to the sessionStorage object using ID as key
+				m += w;					//carriage is updated to obtain the full size used by columns
 			}
-			S[t.id]+=m;							//the last item of the serialized string is the table's active area (width), 
-												//to be able to obtain % width value of each columns while deserializing
-			if(!t.f) S[t.id] += ";"+t.width(); 	//if not fixed, table width is stored
-		}	
+			S[t.id] += m;							//the last item of the serialized string is the table's active area (width),
+			//to be able to obtain % width value of each columns while deserializing
+			if (!t.fixed) S[t.id] += ";" + t.width(); 	//if not fixed, table width is stored
+		}
 	};
-	
-	
+
+
 	/**
-	 * Function that places each grip in the correct position according to the current table layout	 
+	 * Function that places each grip in the correct position according to the current table layout
 	 * @param {jQuery ref} t - table object
 	 */
-	var syncGrips = function (t){	
-		t.gc.width(t.w);			//the grip's container width is updated				
-		for(var i=0; i<t.ln; i++){	//for each column
-			var c = t.c[i]; 			
+	var syncGrips = function (t) {
+		t.gc.width(t.w);			//the grip's container width is updated
+		for (var i = 0; i < t.ln; i++) {	//for each column
+			var c = t.c[i];
 			t.g[i].css({			//height and position of the grip is updated according to the table layout
 				left: c.offset().left - t.offset().left + c.outerWidth(false) + t.cs / 2 + PX,
-				height: t.opt.headerOnly? t.c[0].outerHeight(false) : t.outerHeight(false)				
-			});			
-		} 	
+				height: t.opt.headerOnly ? t.c[0].outerHeight(false) : t.outerHeight(false)
+			});
+		}
 	};
-	
-	
-	
+
+
+
 	/**
 	* This function updates column's width according to the horizontal position increment of the grip being
 	* dragged. The function can be called while dragging if liveDragging is enabled and also from the onGripDragOver
 	* event handler to synchronize grip's position with their related columns.
 	* @param {jQuery ref} t - table object
 	* @param {number} i - index of the grip being dragged
-	* @param {bool} isOver - to identify when the function is being called from the onGripDragOver event	
+	* @param {bool} isOver - to identify when the function is being called from the onGripDragOver event
 	*/
-	var syncCols = function(t,i,isOver){
-		var inc = drag.x-drag.l, c = t.c[i], c2 = t.c[i+1]; 			
-		var w = c.w + inc;	var w2= c2.w- inc;	//their new width is obtained					
-		c.width( w + PX);			
-		t.cg.eq(i).width( w + PX); 
-        if(t.f){ //if fixed mode
-            c2.width(w2 + PX);
-            t.cg.eq(i+1).width( w2 + PX);
-        }else if(t.opt.overflow) {				//if overflow is set, incriment min-width to force overflow
-            t.css('min-width', t.w + inc);
-        }
-		if(isOver){
-            c.w=w; 
-            c2.w= t.f ? w2 : c2.w;
-        }
+	var syncCols = function (table, i, isOver) {
+		var inc = drag.x - drag.l;
+		// retrieve dragged and next column
+		var draggedCol = table.c[i];
+		var nextCol = table.c[i + 1];
+		//their new width is obtained
+		var width = draggedCol.w + inc;
+		var width2 = nextCol.w - inc;
+		draggedCol.width(width + PX);
+		table.cg.eq(i).width(width + PX);
+
+		if (table.fixed) { //if fixed mode
+			nextCol.width(width2 + PX);
+			table.cg.eq(i + 1).width(width2 + PX);
+		} else if (table.opt.overflow) {				//if overflow is set, incriment min-width to force overflow
+			table.css('min-width', table.w + inc);
+		}
+
+		if (isOver) {
+			draggedCol.w = width;
+			nextCol.w = table.fixed ? width2 : nextCol.w;
+		}
 	};
 
-	
+
 	/**
-	* This function updates all columns width according to its real width. It must be taken into account that the 
-	* sum of all columns can exceed the table width in some cases (if fixed is set to false and table has some kind 
+	* This function updates all columns width according to its real width. It must be taken into account that the
+	* sum of all columns can exceed the table width in some cases (if fixed is set to false and table has some kind
 	* of max-width).
-	* @param {jQuery ref} t - table object	
+	* @param {jQuery ref} t - table object
 	*/
-	var applyBounds = function(t){
-        var w = $.map(t.c, function(c){			//obtain real widths
-            return c.width();
-        });
-        t.width(t.w = t.width()).removeClass(FLEX);	//prevent table width changes
-        $.each(t.c, function(i,c){
-            c.width(w[i]).w = w[i];				//set column widths applying bounds (table's max-width)
-        });
+	var applyBounds = function (t) {
+		var w = $.map(t.c, function (c) {			//obtain real widths
+			return c.width();
+		});
+		t.width(t.w = t.width()).removeClass(FLEX);	//prevent table width changes
+		$.each(t.c, function (i, c) {
+			c.width(w[i]).w = w[i];				//set column widths applying bounds (table's max-width)
+		});
 		t.addClass(FLEX);						//allow table width changes
 	};
-	
-	
+
+
 	/**
-	 * Event handler used while dragging a grip. It checks if the next grip's position is valid and updates it. 
+	 * Event handler used while dragging a grip. It checks if the next grip's position is valid and updates it.
 	 * @param {event} e - mousemove event binded to the window object
 	 */
-	var onGripDrag = function(e){	
-		if(!drag) return; 
-        var t = drag.t;		//table object reference 
-        var oe = e.originalEvent.touches;
-        var ox = oe ? oe[0].pageX : e.pageX;    //original position (touch or mouse)
-        var x =  ox - drag.ox + drag.l;	        //next position according to horizontal mouse position increment
-		var mw = t.opt.minWidth, i = drag.i ;	//cell's min width
-		var l = t.cs*1.5 + mw + t.b;
-        var last = i == t.ln-1;                 			//check if it is the last column's grip (usually hidden)
-        var min = i? t.g[i-1].position().left+t.cs+mw: l;	//min position according to the contiguous cells
-		var max = t.f ? 	//fixed mode?
-			i == t.ln-1? 
-				t.w-l: 
-				t.g[i+1].position().left-t.cs-mw:
-			Infinity; 								//max position according to the contiguous cells 
-		x = M.max(min, M.min(max, x));				//apply bounding		
-		drag.x = x;	 drag.css("left",  x + PX); 	//apply position increment	
-        if(last){									//if it is the last grip
-            var c = t.c[drag.i];					//width of the last column is obtained
-			drag.w = c.w + x- drag.l;         
-        }              
-		if(t.opt.liveDrag){ 			//if liveDrag is enabled
-			if(last){
-			    c.width(drag.w);
-                if(!t.f && t.opt.overflow){			//if overflow is set, incriment min-width to force overflow
-                   t.css('min-width', t.w + x - drag.l);
-                }else {
-                    t.w = t.width();
-                }
-			}else{
-				syncCols(t,i); 			//columns are synchronized
+	var onGripDrag = function (e) {
+
+		if (!drag) {
+			return;
+		}
+
+		var table = drag.t;		//table object reference
+		var oe = e.originalEvent.touches;
+		var ox = oe ? oe[0].pageX : e.pageX;    //original position (touch or mouse)
+		var x = ox - drag.ox + drag.l;	        //next position according to horizontal mouse position increment
+		var mw = table.opt.minWidth; //cell's min width
+		var i = drag.i;
+		var l = table.cs * 1.5 + mw + table.b;
+		var last = i == table.ln - 1;                 			//check if it is the last column's grip (usually hidden)
+		var min = i ? table.g[i - 1].position().left + table.cs + mw : l;	//min position according to the contiguous cells
+		var max = table.fixed ? 	//fixed mode?
+			i == table.ln - 1 ?
+				table.w - l :
+				table.g[i + 1].position().left - table.cs - mw :
+			Infinity; 								//max position according to the contiguous cells
+		x = M.max(min, M.min(max, x));				//apply bounding
+		drag.x = x; drag.css("left", x + PX); 	//apply position increment
+
+		//if it is the last grip
+		if (last) {
+			var c = table.c[drag.i]; //width of the last column is obtained
+			drag.w = c.w + x - drag.l;
+		}
+
+		//if liveDrag is enabled
+		if (table.opt.liveDrag) {
+
+			if (last) {
+				c.width(drag.w);
+
+				if (!table.fixed && table.opt.overflow) {			//if overflow is set, incriment min-width to force overflow
+					table.css('min-width', table.w + x - drag.l);
+				} else {
+					table.w = table.width();
+				}
+			} else {
+				syncCols(table, i); 			//columns are synchronized
+			}
+			syncGrips(table);
+			var cb = table.opt.onDrag;							//check if there is an onDrag callback
+
+			if (cb) {
+				e.currentTarget = table[0];
+				var draggedCol = table.c[i];
+				//if any, it is fired
+				cb(e, i, draggedCol);
 			}
-			syncGrips(t);
-			var cb = t.opt.onDrag;							//check if there is an onDrag callback
-			if (cb) { e.currentTarget = t[0]; cb(e); }		//if any, it is fired			
 		}
-		return false; 	//prevent text selection while dragging				
+		return false; 	//prevent text selection while dragging
 	};
-	
+
 
 	/**
 	 * Event handler fired when the dragging is over, updating table layout
      * @param {event} e - grip's drag over event
 	 */
-	var onGripDragOver = function(e){	
-		
-		d.unbind('touchend.'+SIGNATURE+' mouseup.'+SIGNATURE).unbind('touchmove.'+SIGNATURE+' mousemove.'+SIGNATURE);
-		$("head :last-child").remove(); 				//remove the dragging cursor style	
-		if(!drag) return;
-		drag.removeClass(drag.t.opt.draggingClass);		//remove the grip's dragging css-class
-        if (!(drag.x - drag.l == 0)) {
-            var t = drag.t;
-            var cb = t.opt.onResize; 	    //get some values	
-            var i = drag.i;                 //column index
-            var last = i == t.ln-1;         //check if it is the last column's grip (usually hidden)
-            var c = t.g[i].c;               //the column being dragged
-            if(last){
-                c.width(drag.w);
-                c.w = drag.w;
-            }else{
-                syncCols(t, i, true);	//the columns are updated
-            }
-            if(!t.f) applyBounds(t);	//if not fixed mode, then apply bounds to obtain real width values
-            syncGrips(t);				//the grips are updated
-            if (cb) { e.currentTarget = t[0]; cb(e); }	//if there is a callback function, it is fired
-            if(t.p && S) memento(t); 	//if postbackSafe is enabled and there is sessionStorage support, the new layout is serialized and stored
-        }
-		drag = null;   //since the grip's dragging is over									
-	};	
-	
-	
+	var onGripDragOver = function (e) {
+
+		d.unbind('touchend.' + SIGNATURE + ' mouseup.' + SIGNATURE).unbind('touchmove.' + SIGNATURE + ' mousemove.' + SIGNATURE);
+		$("head :last-child").remove(); 				//remove the dragging cursor style
+
+		if (!drag) {
+			return;
+		}
+		//remove the grip's dragging css-class
+		drag.removeClass(drag.t.opt.draggingClass);
+
+		if (!(drag.x - drag.l == 0)) {
+			var table = drag.t;
+			var cb = table.opt.onResize; 	    //get some values
+			var i = drag.i;                 //column index
+			var last = i == table.ln - 1;         //check if it is the last column's grip (usually hidden)
+			var draggedCol = table.g[i].c;  //the column being dragged
+
+			if (last) {
+				draggedCol.width(drag.w);
+				draggedCol.w = drag.w;
+			} else {
+				syncCols(table, i, true);	//the columns are updated
+			}
+
+			//if not fixed mode, then apply bounds to obtain real width values
+			if (!table.fixed) {
+				applyBounds(table);
+			}
+			syncGrips(table);				//the grips are updated
+
+			//if there is a callback function, it is fired
+			if (cb) {
+				e.currentTarget = table[0];
+				cb(e, i, draggedCol);
+			}
+
+			//if postbackSafe is enabled and there is sessionStorage support, the new layout is serialized and stored
+			if (table.p && S) {
+				memento(table);
+			}
+		}
+		drag = null;   //since the grip's dragging is over
+	};
+
+
 	/**
-	 * Event handler fired when the grip's dragging is about to start. Its main goal is to set up events 
+	 * Event handler fired when the grip's dragging is about to start. Its main goal is to set up events
 	 * and store some values used while dragging.
      * @param {event} e - grip's mousedown event
 	 */
-	var onGripMouseDown = function(e){
+	var onGripMouseDown = function (e) {
 		var o = $(this).data(SIGNATURE);			//retrieve grip's data
-		var t = tables[o.t],  g = t.g[o.i];			//shortcuts for the table and grip objects
-        var oe = e.originalEvent.touches;           //touch or mouse event?
-        g.ox = oe? oe[0].pageX: e.pageX;            //the initial position is kept
+		var t = tables[o.t], g = t.g[o.i];			//shortcuts for the table and grip objects
+		var oe = e.originalEvent.touches;           //touch or mouse event?
+		g.ox = oe ? oe[0].pageX : e.pageX;            //the initial position is kept
 		g.l = g.position().left;
-        g.x = g.l;
-        
-		d.bind('touchmove.'+SIGNATURE+' mousemove.'+SIGNATURE, onGripDrag ).bind('touchend.'+SIGNATURE+' mouseup.'+SIGNATURE, onGripDragOver);	//mousemove and mouseup events are bound
-		h.append("<style type='text/css'>*{cursor:"+ t.opt.dragCursor +"!important}</style>"); 	//change the mouse cursor
-		g.addClass(t.opt.draggingClass); 	//add the dragging class (to allow some visual feedback)				
+		g.x = g.l;
+
+		d.bind('touchmove.' + SIGNATURE + ' mousemove.' + SIGNATURE, onGripDrag).bind('touchend.' + SIGNATURE + ' mouseup.' + SIGNATURE, onGripDragOver);	//mousemove and mouseup events are bound
+		h.append("<style type='text/css'>*{cursor:" + t.opt.dragCursor + "!important}</style>"); 	//change the mouse cursor
+		g.addClass(t.opt.draggingClass); 	//add the dragging class (to allow some visual feedback)
 		drag = g;							//the current grip is stored as the current dragging object
-		if(t.c[o.i].l) for(var i=0,c; i<t.ln; i++){ c=t.c[i]; c.l = false; c.w= c.width(); } 	//if the colum is locked (after browser resize), then c.w must be updated		
+		if (t.c[o.i].l) for (var i = 0, c; i < t.ln; i++) { c = t.c[i]; c.l = false; c.w = c.width(); } 	//if the colum is locked (after browser resize), then c.w must be updated
 		return false; 	//prevent text selection
 	};
-    
-    
+
+
 	/**
 	 * Event handler fired when the browser is resized. The main purpose of this function is to update
-	 * table layout according to the browser's size synchronizing related grips 
+	 * table layout according to the browser's size synchronizing related grips
 	 */
-	var onResize = function(){
-		for(var t in tables){
-            if( tables.hasOwnProperty( t ) ) {
-                t = tables[t];
-                var i, mw=0;
-                t.removeClass(SIGNATURE);   //firefox doesn't like layout-fixed in some cases
-                if (t.f) {                  //in fixed mode
-                    t.w = t.width();        //its new width is kept
-                    for(i=0; i<t.ln; i++) mw+= t.c[i].w;		
-                    //cell rendering is not as trivial as it might seem, and it is slightly different for
-                    //each browser. In the beginning i had a big switch for each browser, but since the code
-                    //was extremely ugly now I use a different approach with several re-flows. This works 
-                    //pretty well but it's a bit slower. For now, lets keep things simple...   
-                    for(i=0; i<t.ln; i++) t.c[i].css("width", M.round(1000*t.c[i].w/mw)/10 + "%").l=true; 
-                    //c.l locks the column, telling us that its c.w is outdated									
-                }else{     //in non fixed-sized tables
-                    applyBounds(t);         //apply the new bounds 
-                    if(t.mode == 'flex' && t.p && S){   //if postbackSafe is enabled and there is sessionStorage support,
-                        memento(t);                     //the new layout is serialized and stored for 'flex' tables
-                    }
-                }
-                syncGrips(t.addClass(SIGNATURE));
-            }
-		} 
-		
-	};		
-
-
-	//bind resize event, to update grips position 
-	$(window).bind('resize.'+SIGNATURE, onResize); 
+	var onResize = function () {
+		for (var t in tables) {
+			if (tables.hasOwnProperty(t)) {
+				t = tables[t];
+				var i, mw = 0;
+				t.removeClass(SIGNATURE);   //firefox doesn't like layout-fixed in some cases
+				if (t.fixed) {                  //in fixed mode
+					t.w = t.width();        //its new width is kept
+					for (i = 0; i < t.ln; i++) mw += t.c[i].w;
+					//cell rendering is not as trivial as it might seem, and it is slightly different for
+					//each browser. In the beginning i had a big switch for each browser, but since the code
+					//was extremely ugly now I use a different approach with several re-flows. This works
+					//pretty well but it's a bit slower. For now, lets keep things simple...
+					for (i = 0; i < t.ln; i++) t.c[i].css("width", M.round(1000 * t.c[i].w / mw) / 10 + "%").l = true;
+					//c.l locks the column, telling us that its c.w is outdated
+				} else {     //in non fixed-sized tables
+					applyBounds(t);         //apply the new bounds
+					if (t.mode == 'flex' && t.p && S) {   //if postbackSafe is enabled and there is sessionStorage support,
+						memento(t);                     //the new layout is serialized and stored for 'flex' tables
+					}
+				}
+				syncGrips(t.addClass(SIGNATURE));
+			}
+		}
+
+	};
+
+
+	//bind resize event, to update grips position
+	$(window).bind('resize.' + SIGNATURE, onResize);
 
 
 	/**
 	 * The plugin is added to the jQuery library
-	 * @param {Object} options -  an object that holds some basic customization values 
+	 * @param {Object} options -  an object that holds some basic customization values
 	 */
-    $.fn.extend({  
-        colResizable: function(options) {           
-            var defaults = {
-			
+	$.fn.extend({
+		colResizable: function (options) {
+			var defaults = {
+
 				//attributes:
-                
-                resizeMode: 'fit',                    //mode can be 'fit', 'flex' or 'overflow'
-                draggingClass: 'JCLRgripDrag',	//css-class used when a grip is being dragged (for visual feedback purposes)
-				gripInnerHtml: '',				//if it is required to use a custom grip it can be done using some custom HTML				
-				liveDrag: false,				//enables table-layout updating while dragging	
-				minWidth: 15, 					//minimum width value in pixels allowed for a column 
-				headerOnly: false,				//specifies that the size of the the column resizing anchors will be bounded to the size of the first row 
+
+				resizeMode: 'fit',                    //mode can be 'fit', 'flex' or 'overflow'
+				draggingClass: 'JCLRgripDrag',	//css-class used when a grip is being dragged (for visual feedback purposes)
+				gripInnerHtml: '',				//if it is required to use a custom grip it can be done using some custom HTML
+				liveDrag: false,				//enables table-layout updating while dragging
+				minWidth: 15, 					//minimum width value in pixels allowed for a column
+				headerOnly: false,				//specifies that the size of the the column resizing anchors will be bounded to the size of the first row
 				hoverCursor: "col-resize",  		//cursor to be used on grip hover
 				dragCursor: "col-resize",  		//cursor to be used while dragging
-				postbackSafe: false, 			//when it is enabled, table layout can persist after postback or page refresh. It requires browsers with sessionStorage support (it can be emulated with sessionStorage.js). 
-				flush: false, 					//when postbakSafe is enabled, and it is required to prevent layout restoration after postback, 'flush' will remove its associated layout data 
+				postbackSafe: false, 			//when it is enabled, table layout can persist after postback or page refresh. It requires browsers with sessionStorage support (it can be emulated with sessionStorage.js).
+				flush: false, 					//when postbakSafe is enabled, and it is required to prevent layout restoration after postback, 'flush' will remove its associated layout data
 				marginLeft: null,				//in case the table contains any margins, colResizable needs to know the values used, e.g. "10%", "15em", "5px" ...
 				marginRight: null, 				//in case the table contains any margins, colResizable needs to know the values used, e.g. "10%", "15em", "5px" ...
-				disable: false,					//disables all the enhancements performed in a previously colResized table	
+				disable: false,					//disables all the enhancements performed in a previously colResized table
 				partialRefresh: false,			//can be used in combination with postbackSafe when the table is inside of an updatePanel,
-                disabledColumns: [],            //column indexes to be excluded
-                removePadding: true,           //for some uses (such as multiple range slider), it is advised to set this modifier to true, it will remove padding from the header cells.
+				disabledColumns: [],            //column indexes to be excluded
+				removePadding: true,           //for some uses (such as multiple range slider), it is advised to set this modifier to true, it will remove padding from the header cells.
 
 				//events:
 				onDrag: null, 					//callback function to be fired during the column resizing process if liveDrag is enabled
 				onResize: null					//callback function fired when the dragging process is over
-            }			
-			var options =  $.extend(defaults, options);		
-            
-            //since now there are 3 different ways of resizing columns, I changed the external interface to make it clear
-            //calling it 'resizeMode' but also to remove the "fixed" attribute which was confusing for many people
-            options.fixed = true;
-            options.overflow = false;
-            switch(options.resizeMode){
-                case 'flex': options.fixed = false; break;
-                case 'overflow': options.fixed = false; options.overflow = true; break;
-            }
-
-            return this.each(function() {				
-             	init( this, options);             
-            });
-        }
-    });
-})(jQuery);
+			}
+			var options = $.extend(defaults, options);
+
+			//since now there are 3 different ways of resizing columns, I changed the external interface to make it clear
+			//calling it 'resizeMode' but also to remove the "fixed" attribute which was confusing for many people
+			options.fixed = true;
+			options.overflow = false;
+			switch (options.resizeMode) {
+				case 'flex': options.fixed = false; break;
+				case 'overflow': options.fixed = false; options.overflow = true; break;
+			}
 
+			return this.each(function () {
+				init(this, options);
+			});
+		}
+	});
+})(jQuery);

From c4c77231a3cbc0b7b738a72e81c24d024c015295 Mon Sep 17 00:00:00 2001
From: rado_konuch <reminqo88@gmail.com>
Date: Tue, 30 Jul 2019 16:50:25 +0200
Subject: [PATCH 03/11] Add mirrorTables option which allows mirroring column
 width changes to other tables.

---
 colResizable-1.6.js | 184 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 160 insertions(+), 24 deletions(-)

diff --git a/colResizable-1.6.js b/colResizable-1.6.js
index 6bd94a4..533d5a3 100644
--- a/colResizable-1.6.js
+++ b/colResizable-1.6.js
@@ -52,6 +52,7 @@
 		table.opt = options;                //each table has its own options available at anytime
 		table.mode = options.resizeMode;    //shortcuts
 		table.disabledColumns = table.opt.disabledColumns;
+		table.mirroredTables = table.opt.mirroredTables;
 
 		if (table.opt.removePadding) {
 			table.addClass("JPadding");
@@ -63,7 +64,7 @@
 		}
 
 		var id = table.id = table.attr(ID) || SIGNATURE + count++;	//its id is obtained, if null new one is generated
-		table.postback = table.opt.postbackSafe; //short-cut to detect postback safe
+		table.p = table.opt.postbackSafe; //short-cut to detect postback safe
 
 		//if the object is not a table or if it was already processed then it is ignored.
 		if (!table.is("table") || tables[id] && !table.opt.partialRefresh) {
@@ -78,6 +79,12 @@
 		//the grips container object is added. Signature class forces table rendering in fixed-layout mode to prevent column's min-width
 		table.addClass(SIGNATURE).attr(ID, id).before('<div class="JCLRgrips"/>');
 
+		// we also iterate through the mirrored tables
+		for (let index = 0; index < table.mirroredTables.length; index++) {
+			var mTable = table.mirroredTables[index];
+			mTable.addClass(SIGNATURE);
+		}
+
 		//table.c and table.g are arrays of columns and grips respectively
 		table.g = [];
 		table.c = [];
@@ -123,15 +130,7 @@
 	var createGrips = function (table) {
 
 		//table headers are obtained
-		var th = table.find(">thead>tr:first>th,>thead>tr:first>td");
-
-		//but headers can also be included in different ways
-		if (!th.length) {
-			th = table.find(">tbody>tr:first>th,>tr:first>th,>tbody>tr:first>td, >tr:first>td");
-		}
-
-		//filter invisible columns
-		th = th.filter(":visible");
+		var th = getHeaders(table);
 
 		//a table can also contain a colgroup with col elements
 		table.cg = table.find("col");
@@ -140,7 +139,7 @@
 		table.ln = th.length;
 
 		//if 'postbackSafe' is enabled and there is data for the current table, its coloumn layout is restored
-		if (table.p && S && S[table.id]) {
+		if (table.p && (table.opt.initialStoredWidth || S && S[table.id])) {
 			memento(table, th);
 		}
 
@@ -187,6 +186,12 @@
 
 		if (!table.fixed) {
 			table.removeAttr('width').addClass(FLEX); //if not fixed, let the table grow as needed
+
+			// we also iterate through the mirrored tables
+			for (let index = 0; index < table.mirroredTables.length; index++) {
+				var mTable = table.mirroredTables[index];
+				mTable.addClass(FLEX); //if not fixed, let the table grow as needed
+			}
 		}
 		//the grips are positioned according to the current table layout
 		syncGrips(table);
@@ -195,6 +200,21 @@
 
 	};
 
+	var getHeaders = function(table, onlyVisible = true) {
+		var th = table.find(">thead>tr:first>th,>thead>tr:first>td");
+
+		//but headers can also be included in different ways
+		if (!th.length) {
+			th = table.find(">tbody>tr:first>th,>tr:first>th,>tbody>tr:first>td, >tr:first>td");
+		}
+
+		if (onlyVisible) {
+			//filter invisible columns
+			th = th.filter(":visible");
+		}
+
+		return th;
+	}
 
 	/**
 	 * Function to allow the persistence of columns dimensions after a browser postback. It is based in
@@ -203,38 +223,89 @@
 	 * @param {jQuery ref} th - reference to the first row elements (only set in deserialization)
 	 */
 	var memento = function (t, th) {
-		var w, m = 0, i = 0, aux = [], tw;
+		var w;
+		var m = 0;
+		var i = 0;
+		var aux = [];
+		var tw;
+
 		if (th) {										//in deserialization mode (after a postback)
 			t.cg.removeAttr("width");
-			if (t.opt.flush) { S[t.id] = ""; return; } 	//if flush is activated, stored data is removed
-			w = S[t.id].split(";");					//column widths is obtained
+
+			//if flush is activated, stored data is removed
+			if (t.opt.flush) {
+				S[t.id] = "";
+
+				return;
+			}
+
+			w = t.opt.initialStoredWidth ? t.opt.initialStoredWidth.split(";") : S[t.id].split(";");					//column widths is obtained
 			tw = w[t.ln + 1];
+			var mth = [];
+
+			if (t.mirroredTables && $.isArray(t.mirroredTables)) {
+				for (var index = 0; index < t.mirroredTables.length; index++) {
+					var header = getHeaders(t.mirroredTables[index]);
+					mth.push(header);
+				}
+			}
+
 			if (!t.fixed && tw) {							//if not fixed and table width data available its size is restored
 				t.width(tw *= 1);
+
 				if (t.opt.overflow) {				//if overfolw flag is set, restore table width also as table min-width
 					t.css('min-width', tw + PX);
 					t.w = tw;
 				}
+
+				for (var index = 0; index < t.mirroredTables.length; index++) {
+					var mTable = t.mirroredTables[index]
+
+					mTable.width(tw *= 1);
+
+					if (t.opt.overflow) {				//if overfolw flag is set, restore table width also as table min-width
+						mTable.css('min-width', tw + PX);
+					}
+				}
 			}
 			for (; i < t.ln; i++) {						//for each column
 				aux.push(100 * w[i] / w[t.ln] + "%"); 	//width is stored in an array since it will be required again a couple of lines ahead
 				th.eq(i).css("width", aux[i]); 	//each column width in % is restored
+
+				for (var index = 0; index < mth.length; index++) {
+					var mHeader = mth[index];
+					mHeader.eq(i).css("width", aux[i]);
+				}
 			}
 			for (i = 0; i < t.ln; i++)
 				t.cg.eq(i).css("width", aux[i]);	//this code is required in order to create an inline CSS rule with higher precedence than an existing CSS class in the "col" elements
 		} else {							//in serialization mode (after resizing a column)
-			S[t.id] = "";				//clean up previous data
-			for (; i < t.c.length; i++) {	//iterate through columns
-				w = t.c[i].width();		//width is obtained
-				S[t.id] += w + ";";		//width is appended to the sessionStorage object using ID as key
-				m += w;					//carriage is updated to obtain the full size used by columns
-			}
-			S[t.id] += m;							//the last item of the serialized string is the table's active area (width),
-			//to be able to obtain % width value of each columns while deserializing
-			if (!t.fixed) S[t.id] += ";" + t.width(); 	//if not fixed, table width is stored
+			S[t.id] = getSerializedColsWidth(t);
 		}
 	};
 
+	var getSerializedColsWidth = function(t) {
+		var w;
+		var m = 0;
+		var i = 0;
+		var result = '';
+
+		for (; i < t.c.length; i++) {	//iterate through columns
+			w = t.c[i].width();		//width is obtained
+			result += w + ";";		//width is appended to the sessionStorage object using ID as key
+			m += w;					//carriage is updated to obtain the full size used by columns
+		}
+		result += m;
+
+		//to be able to obtain % width value of each columns while deserializing
+		//if not fixed, table width is stored
+		if (!t.fixed) {
+			result += ";" + t.width();
+		}
+
+		return result;
+	}
+
 
 	/**
 	 * Function that places each grip in the correct position according to the current table layout
@@ -283,6 +354,30 @@
 			draggedCol.w = width;
 			nextCol.w = table.fixed ? width2 : nextCol.w;
 		}
+
+		// we also iterate through the mirrored tables
+		for (let index = 0; index < table.mirroredTables.length; index++) {
+			var mTable = table.mirroredTables[index];
+			var ths = getHeaders(mTable);
+			var draggedMirrorCol = $(ths[i]);
+			var nextMirrorCol = $(ths[i + 1]);
+			//their new width is set
+			draggedMirrorCol.width(width + PX);
+			var colMirrorGroup = mTable.find("col");
+			colMirrorGroup.eq(i).width(width + PX);
+
+			if (table.fixed) { //if fixed mode
+				nextMirrorCol.width(width2 + PX);
+				colMirrorGroup.eq(i + 1).width(width2 + PX);
+			} else if (table.opt.overflow) {				//if overflow is set, incriment min-width to force overflow
+				mTable.css('min-width', table.w + inc);
+			}
+
+			if (isOver) {
+				draggedMirrorCol.w = width;
+				nextMirrorCol.w = table.fixed ? width2 : nextCol.w;
+			}
+		}
 	};
 
 
@@ -301,6 +396,21 @@
 			c.width(w[i]).w = w[i];				//set column widths applying bounds (table's max-width)
 		});
 		t.addClass(FLEX);						//allow table width changes
+
+		// we also iterate through the mirrored tables
+		for (let index = 0; index < t.mirroredTables.length; index++) {
+			var mTable = t.mirroredTables[index];
+			var ths = getHeaders(mTable);
+			mTable.c = $.map(ths, function (th) {			//obtain mirrored table header cells
+				return $(th);
+			});
+			mTable.width(t.width()).removeClass(FLEX);	//prevent mirrored table width changes
+			$.each(mTable.c, function (i, c) {
+				//set column widths applying bounds (table's max-width)
+				c.width(w[i]).w = w[i];	// use original table column widths
+			});
+			mTable.addClass(FLEX); //allow table width changes
+		}
 	};
 
 
@@ -348,6 +458,20 @@
 				} else {
 					table.w = table.width();
 				}
+
+				// we also iterate through the mirrored tables
+				for (let index = 0; index < t.mirroredTables.length; index++) {
+					var mTable = t.mirroredTables[index];
+					var ths = getHeaders(mTable);
+					var mirrorCol = $(ths[i]);
+					mirrorCol.width(drag.w);
+
+					if (!table.fixed && table.opt.overflow) {			//if overflow is set, incriment min-width to force overflow
+						mTable.css('min-width', table.w + x - drag.l);
+					} else {
+						mTable.w = table.width();
+					}
+				}
 			} else {
 				syncCols(table, i); 			//columns are synchronized
 			}
@@ -390,6 +514,15 @@
 			if (last) {
 				draggedCol.width(drag.w);
 				draggedCol.w = drag.w;
+
+				// we also iterate through the mirrored tables
+				for (let index = 0; index < t.mirroredTables.length; index++) {
+					var mTable = t.mirroredTables[index];
+					var ths = getHeaders(mTable);
+					var draggedMirrorCol = $(ths[i]);
+					draggedMirrorCol.width(drag.w);
+					draggedMirrorCol.w = drag.w;
+				}
 			} else {
 				syncCols(table, i, true);	//the columns are updated
 			}
@@ -403,7 +536,8 @@
 			//if there is a callback function, it is fired
 			if (cb) {
 				e.currentTarget = table[0];
-				cb(e, i, draggedCol);
+				var serializedCols = table.p ? getSerializedColsWidth(table) : null;
+				cb(e, i, draggedCol, serializedCols);
 			}
 
 			//if postbackSafe is enabled and there is sessionStorage support, the new layout is serialized and stored
@@ -499,6 +633,8 @@
 				partialRefresh: false,			//can be used in combination with postbackSafe when the table is inside of an updatePanel,
 				disabledColumns: [],            //column indexes to be excluded
 				removePadding: true,           //for some uses (such as multiple range slider), it is advised to set this modifier to true, it will remove padding from the header cells.
+				initialStoredWidth: null,
+				mirroredTables: null,
 
 				//events:
 				onDrag: null, 					//callback function to be fired during the column resizing process if liveDrag is enabled

From 176d8c081b7ba3fc9b27609d958bb649d503ebe0 Mon Sep 17 00:00:00 2001
From: rado_konuch <reminqo88@gmail.com>
Date: Wed, 31 Jul 2019 13:15:40 +0200
Subject: [PATCH 04/11] Fixed some code errors.

---
 colResizable-1.6.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/colResizable-1.6.js b/colResizable-1.6.js
index 533d5a3..d43b3d7 100644
--- a/colResizable-1.6.js
+++ b/colResizable-1.6.js
@@ -200,7 +200,7 @@
 
 	};
 
-	var getHeaders = function(table, onlyVisible = true) {
+	var getHeaders = function(table, onlyVisible) {
 		var th = table.find(">thead>tr:first>th,>thead>tr:first>td");
 
 		//but headers can also be included in different ways
@@ -460,8 +460,8 @@
 				}
 
 				// we also iterate through the mirrored tables
-				for (let index = 0; index < t.mirroredTables.length; index++) {
-					var mTable = t.mirroredTables[index];
+				for (let index = 0; index < table.mirroredTables.length; index++) {
+					var mTable = table.mirroredTables[index];
 					var ths = getHeaders(mTable);
 					var mirrorCol = $(ths[i]);
 					mirrorCol.width(drag.w);

From 52761c5dde961ae2abd81c0ce3e31037720a3b35 Mon Sep 17 00:00:00 2001
From: rado_konuch <reminqo88@gmail.com>
Date: Thu, 1 Aug 2019 10:32:51 +0200
Subject: [PATCH 05/11] Fixed some code errors. #2

---
 colResizable-1.6.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/colResizable-1.6.js b/colResizable-1.6.js
index d43b3d7..92c04c4 100644
--- a/colResizable-1.6.js
+++ b/colResizable-1.6.js
@@ -516,8 +516,8 @@
 				draggedCol.w = drag.w;
 
 				// we also iterate through the mirrored tables
-				for (let index = 0; index < t.mirroredTables.length; index++) {
-					var mTable = t.mirroredTables[index];
+				for (let index = 0; index < table.mirroredTables.length; index++) {
+					var mTable = table.mirroredTables[index];
 					var ths = getHeaders(mTable);
 					var draggedMirrorCol = $(ths[i]);
 					draggedMirrorCol.width(drag.w);

From 316bbac030f5b21bd2bf4d4b168a331204990c83 Mon Sep 17 00:00:00 2001
From: rado_konuch <reminqo88@gmail.com>
Date: Mon, 5 Aug 2019 08:34:25 +0200
Subject: [PATCH 06/11] Added checks if mirrorTables option is set.

---
 colResizable-1.6.js | 130 ++++++++++++++++++++++++--------------------
 1 file changed, 72 insertions(+), 58 deletions(-)

diff --git a/colResizable-1.6.js b/colResizable-1.6.js
index 92c04c4..4be5982 100644
--- a/colResizable-1.6.js
+++ b/colResizable-1.6.js
@@ -80,9 +80,11 @@
 		table.addClass(SIGNATURE).attr(ID, id).before('<div class="JCLRgrips"/>');
 
 		// we also iterate through the mirrored tables
-		for (let index = 0; index < table.mirroredTables.length; index++) {
-			var mTable = table.mirroredTables[index];
-			mTable.addClass(SIGNATURE);
+		if (table.mirroredTables && $.isArray(table.mirroredTables)) {
+			for (let index = 0; index < table.mirroredTables.length; index++) {
+				var mTable = table.mirroredTables[index];
+				mTable.addClass(SIGNATURE);
+			}
 		}
 
 		//table.c and table.g are arrays of columns and grips respectively
@@ -188,9 +190,11 @@
 			table.removeAttr('width').addClass(FLEX); //if not fixed, let the table grow as needed
 
 			// we also iterate through the mirrored tables
-			for (let index = 0; index < table.mirroredTables.length; index++) {
-				var mTable = table.mirroredTables[index];
-				mTable.addClass(FLEX); //if not fixed, let the table grow as needed
+			if (table.mirroredTables && $.isArray(table.mirroredTables)) {
+				for (let index = 0; index < table.mirroredTables.length; index++) {
+					var mTable = table.mirroredTables[index];
+					mTable.addClass(FLEX); //if not fixed, let the table grow as needed
+				}
 			}
 		}
 		//the grips are positioned according to the current table layout
@@ -258,13 +262,15 @@
 					t.w = tw;
 				}
 
-				for (var index = 0; index < t.mirroredTables.length; index++) {
-					var mTable = t.mirroredTables[index]
+				if (t.mirroredTables && $.isArray(t.mirroredTables)) {
+					for (var index = 0; index < t.mirroredTables.length; index++) {
+						var mTable = t.mirroredTables[index]
 
-					mTable.width(tw *= 1);
+						mTable.width(tw *= 1);
 
-					if (t.opt.overflow) {				//if overfolw flag is set, restore table width also as table min-width
-						mTable.css('min-width', tw + PX);
+						if (t.opt.overflow) {				//if overfolw flag is set, restore table width also as table min-width
+							mTable.css('min-width', tw + PX);
+						}
 					}
 				}
 			}
@@ -356,26 +362,28 @@
 		}
 
 		// we also iterate through the mirrored tables
-		for (let index = 0; index < table.mirroredTables.length; index++) {
-			var mTable = table.mirroredTables[index];
-			var ths = getHeaders(mTable);
-			var draggedMirrorCol = $(ths[i]);
-			var nextMirrorCol = $(ths[i + 1]);
-			//their new width is set
-			draggedMirrorCol.width(width + PX);
-			var colMirrorGroup = mTable.find("col");
-			colMirrorGroup.eq(i).width(width + PX);
-
-			if (table.fixed) { //if fixed mode
-				nextMirrorCol.width(width2 + PX);
-				colMirrorGroup.eq(i + 1).width(width2 + PX);
-			} else if (table.opt.overflow) {				//if overflow is set, incriment min-width to force overflow
-				mTable.css('min-width', table.w + inc);
-			}
+		if (table.mirroredTables && $.isArray(table.mirroredTables)) {
+			for (let index = 0; index < table.mirroredTables.length; index++) {
+				var mTable = table.mirroredTables[index];
+				var ths = getHeaders(mTable);
+				var draggedMirrorCol = $(ths[i]);
+				var nextMirrorCol = $(ths[i + 1]);
+				//their new width is set
+				draggedMirrorCol.width(width + PX);
+				var colMirrorGroup = mTable.find("col");
+				colMirrorGroup.eq(i).width(width + PX);
+
+				if (table.fixed) { //if fixed mode
+					nextMirrorCol.width(width2 + PX);
+					colMirrorGroup.eq(i + 1).width(width2 + PX);
+				} else if (table.opt.overflow) {				//if overflow is set, incriment min-width to force overflow
+					mTable.css('min-width', table.w + inc);
+				}
 
-			if (isOver) {
-				draggedMirrorCol.w = width;
-				nextMirrorCol.w = table.fixed ? width2 : nextCol.w;
+				if (isOver) {
+					draggedMirrorCol.w = width;
+					nextMirrorCol.w = table.fixed ? width2 : nextCol.w;
+				}
 			}
 		}
 	};
@@ -398,18 +406,20 @@
 		t.addClass(FLEX);						//allow table width changes
 
 		// we also iterate through the mirrored tables
-		for (let index = 0; index < t.mirroredTables.length; index++) {
-			var mTable = t.mirroredTables[index];
-			var ths = getHeaders(mTable);
-			mTable.c = $.map(ths, function (th) {			//obtain mirrored table header cells
-				return $(th);
-			});
-			mTable.width(t.width()).removeClass(FLEX);	//prevent mirrored table width changes
-			$.each(mTable.c, function (i, c) {
-				//set column widths applying bounds (table's max-width)
-				c.width(w[i]).w = w[i];	// use original table column widths
-			});
-			mTable.addClass(FLEX); //allow table width changes
+		if (t.mirroredTables && $.isArray(t.mirroredTables)) {
+			for (let index = 0; index < t.mirroredTables.length; index++) {
+				var mTable = t.mirroredTables[index];
+				var ths = getHeaders(mTable);
+				mTable.c = $.map(ths, function (th) {			//obtain mirrored table header cells
+					return $(th);
+				});
+				mTable.width(t.width()).removeClass(FLEX);	//prevent mirrored table width changes
+				$.each(mTable.c, function (i, c) {
+					//set column widths applying bounds (table's max-width)
+					c.width(w[i]).w = w[i];	// use original table column widths
+				});
+				mTable.addClass(FLEX); //allow table width changes
+			}
 		}
 	};
 
@@ -460,16 +470,18 @@
 				}
 
 				// we also iterate through the mirrored tables
-				for (let index = 0; index < table.mirroredTables.length; index++) {
-					var mTable = table.mirroredTables[index];
-					var ths = getHeaders(mTable);
-					var mirrorCol = $(ths[i]);
-					mirrorCol.width(drag.w);
-
-					if (!table.fixed && table.opt.overflow) {			//if overflow is set, incriment min-width to force overflow
-						mTable.css('min-width', table.w + x - drag.l);
-					} else {
-						mTable.w = table.width();
+				if (table.mirroredTables && $.isArray(table.mirroredTables)) {
+					for (let index = 0; index < table.mirroredTables.length; index++) {
+						var mTable = table.mirroredTables[index];
+						var ths = getHeaders(mTable);
+						var mirrorCol = $(ths[i]);
+						mirrorCol.width(drag.w);
+
+						if (!table.fixed && table.opt.overflow) {			//if overflow is set, incriment min-width to force overflow
+							mTable.css('min-width', table.w + x - drag.l);
+						} else {
+							mTable.w = table.width();
+						}
 					}
 				}
 			} else {
@@ -516,12 +528,14 @@
 				draggedCol.w = drag.w;
 
 				// we also iterate through the mirrored tables
-				for (let index = 0; index < table.mirroredTables.length; index++) {
-					var mTable = table.mirroredTables[index];
-					var ths = getHeaders(mTable);
-					var draggedMirrorCol = $(ths[i]);
-					draggedMirrorCol.width(drag.w);
-					draggedMirrorCol.w = drag.w;
+				if (table.mirroredTables && $.isArray(table.mirroredTables)) {
+					for (let index = 0; index < table.mirroredTables.length; index++) {
+						var mTable = table.mirroredTables[index];
+						var ths = getHeaders(mTable);
+						var draggedMirrorCol = $(ths[i]);
+						draggedMirrorCol.width(drag.w);
+						draggedMirrorCol.w = drag.w;
+					}
 				}
 			} else {
 				syncCols(table, i, true);	//the columns are updated

From 461c014d0af4821ead14c948200db9c91ee92018 Mon Sep 17 00:00:00 2001
From: rado_konuch <reminqo88@gmail.com>
Date: Wed, 7 Aug 2019 14:43:38 +0200
Subject: [PATCH 07/11] Changed getHeaders method optional parameter.

---
 colResizable-1.6.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/colResizable-1.6.js b/colResizable-1.6.js
index 4be5982..54a0baf 100644
--- a/colResizable-1.6.js
+++ b/colResizable-1.6.js
@@ -204,7 +204,7 @@
 
 	};
 
-	var getHeaders = function(table, onlyVisible) {
+	var getHeaders = function(table, allColumns) {
 		var th = table.find(">thead>tr:first>th,>thead>tr:first>td");
 
 		//but headers can also be included in different ways
@@ -212,7 +212,7 @@
 			th = table.find(">tbody>tr:first>th,>tr:first>th,>tbody>tr:first>td, >tr:first>td");
 		}
 
-		if (onlyVisible) {
+		if (!allColumns) {
 			//filter invisible columns
 			th = th.filter(":visible");
 		}

From b9142e0c399c43e0a4cc19709a69841ebce81f05 Mon Sep 17 00:00:00 2001
From: rado_konuch <reminqo88@gmail.com>
Date: Mon, 2 Sep 2019 08:32:58 +0200
Subject: [PATCH 08/11] Added if checks.

---
 colResizable-1.6.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/colResizable-1.6.js b/colResizable-1.6.js
index 54a0baf..83ebffa 100644
--- a/colResizable-1.6.js
+++ b/colResizable-1.6.js
@@ -301,11 +301,14 @@
 			result += w + ";";		//width is appended to the sessionStorage object using ID as key
 			m += w;					//carriage is updated to obtain the full size used by columns
 		}
-		result += m;
+
+		if (result) {
+			result += m;
+		}
 
 		//to be able to obtain % width value of each columns while deserializing
 		//if not fixed, table width is stored
-		if (!t.fixed) {
+		if (!t.fixed && result) {
 			result += ";" + t.width();
 		}
 

From fe4488c41347f296dc605f013913a2702ded38e3 Mon Sep 17 00:00:00 2001
From: rado_konuch <reminqo88@gmail.com>
Date: Tue, 3 Sep 2019 13:04:52 +0200
Subject: [PATCH 09/11] Added onInit callback option.

---
 colResizable-1.6.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/colResizable-1.6.js b/colResizable-1.6.js
index 83ebffa..9373318 100644
--- a/colResizable-1.6.js
+++ b/colResizable-1.6.js
@@ -110,6 +110,11 @@
 		// if(!(tb.style.width || tb.width)) t.width(t.width()); //I am not an IE fan at all, but it is a pity that only IE has the currentStyle attribute working as expected. For this reason I can not check easily if the table has an explicit width or if it is rendered as "auto"
 		tables[id] = table; 	//the table object is stored using its id as key
 		createGrips(table);	//grips are created
+		var initCb = table.opt.onInit;
+
+		if (initCb && typeof initCb === 'function') {
+			initCb(table);
+		}
 	};
 
 
@@ -655,7 +660,8 @@
 
 				//events:
 				onDrag: null, 					//callback function to be fired during the column resizing process if liveDrag is enabled
-				onResize: null					//callback function fired when the dragging process is over
+				onResize: null,					//callback function fired when the dragging process is over
+				onInit: null					//callback function fired when init is complete
 			}
 			var options = $.extend(defaults, options);
 

From 8e9f7257fb0c49a5edb3ea09bd1f80460f39fbf2 Mon Sep 17 00:00:00 2001
From: rado_konuch <reminqo88@gmail.com>
Date: Wed, 4 Sep 2019 08:25:36 +0200
Subject: [PATCH 10/11] Added congfigurable column width restoration type.

---
 colResizable-1.6.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/colResizable-1.6.js b/colResizable-1.6.js
index 9373318..c1c10d7 100644
--- a/colResizable-1.6.js
+++ b/colResizable-1.6.js
@@ -110,6 +110,7 @@
 		// if(!(tb.style.width || tb.width)) t.width(t.width()); //I am not an IE fan at all, but it is a pity that only IE has the currentStyle attribute working as expected. For this reason I can not check easily if the table has an explicit width or if it is rendered as "auto"
 		tables[id] = table; 	//the table object is stored using its id as key
 		createGrips(table);	//grips are created
+
 		var initCb = table.opt.onInit;
 
 		if (initCb && typeof initCb === 'function') {
@@ -198,7 +199,6 @@
 			if (table.mirroredTables && $.isArray(table.mirroredTables)) {
 				for (let index = 0; index < table.mirroredTables.length; index++) {
 					var mTable = table.mirroredTables[index];
-					mTable.addClass(FLEX); //if not fixed, let the table grow as needed
 				}
 			}
 		}
@@ -280,7 +280,13 @@
 				}
 			}
 			for (; i < t.ln; i++) {						//for each column
-				aux.push(100 * w[i] / w[t.ln] + "%"); 	//width is stored in an array since it will be required again a couple of lines ahead
+				//width is stored in an array since it will be required again a couple of lines ahead
+				if (t.opt.exactWidth) {
+					aux.push(w[i]);
+				} else {
+					aux.push(100 * w[i] / w[t.ln] + "%");
+				}
+
 				th.eq(i).css("width", aux[i]); 	//each column width in % is restored
 
 				for (var index = 0; index < mth.length; index++) {
@@ -421,12 +427,10 @@
 				mTable.c = $.map(ths, function (th) {			//obtain mirrored table header cells
 					return $(th);
 				});
-				mTable.width(t.width()).removeClass(FLEX);	//prevent mirrored table width changes
 				$.each(mTable.c, function (i, c) {
 					//set column widths applying bounds (table's max-width)
 					c.width(w[i]).w = w[i];	// use original table column widths
 				});
-				mTable.addClass(FLEX); //allow table width changes
 			}
 		}
 	};
@@ -654,9 +658,10 @@
 				disable: false,					//disables all the enhancements performed in a previously colResized table
 				partialRefresh: false,			//can be used in combination with postbackSafe when the table is inside of an updatePanel,
 				disabledColumns: [],            //column indexes to be excluded
-				removePadding: true,           //for some uses (such as multiple range slider), it is advised to set this modifier to true, it will remove padding from the header cells.
+				removePadding: true,           	//for some uses (such as multiple range slider), it is advised to set this modifier to true, it will remove padding from the header cells.
 				initialStoredWidth: null,
 				mirroredTables: null,
+				exactWidth: false,				//whether we restore exact width in px or percentage
 
 				//events:
 				onDrag: null, 					//callback function to be fired during the column resizing process if liveDrag is enabled

From 5714f7b60a0b22f34fd64e7ce615db7292a4c017 Mon Sep 17 00:00:00 2001
From: rado_konuch <reminqo88@gmail.com>
Date: Mon, 30 Sep 2019 12:42:47 +0200
Subject: [PATCH 11/11] Call apply bounds after init.

---
 colResizable-1.6.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/colResizable-1.6.js b/colResizable-1.6.js
index c1c10d7..14d14d2 100644
--- a/colResizable-1.6.js
+++ b/colResizable-1.6.js
@@ -110,6 +110,7 @@
 		// if(!(tb.style.width || tb.width)) t.width(t.width()); //I am not an IE fan at all, but it is a pity that only IE has the currentStyle attribute working as expected. For this reason I can not check easily if the table has an explicit width or if it is rendered as "auto"
 		tables[id] = table; 	//the table object is stored using its id as key
 		createGrips(table);	//grips are created
+		applyBounds(table);
 
 		var initCb = table.opt.onInit;