tabulator-tables 5.3.4 → 5.4.1

package/dist/js/tabulator_esm.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.3.4 (c) Oliver Folkerd 2022 */
+/* Tabulator v5.4.1 (c) Oliver Folkerd 2022 */
 class CoreFeature{
 
 	constructor(table){
@@ -190,60 +190,61 @@ class Helpers{
 class Popup extends CoreFeature{
 	constructor(table, element, parent){
 		super(table);
-        
+		
 		this.element = element;
 		this.container = this._lookupContainer();
-        
+		
 		this.parent = parent;
-        
+		
 		this.reversedX = false;
 		this.childPopup = null;
 		this.blurable = false;
 		this.blurCallback = null;
+		this.blurEventsBound = false;
 		this.renderedCallback = null;
-        
+		
 		this.visible = false;
 		this.hideable = true;
-        
+		
 		this.element.classList.add("tabulator-popup-container");
-        
+		
 		this.blurEvent = this.hide.bind(this, false);
 		this.escEvent = this._escapeCheck.bind(this);
-
+		
 		this.destroyBinding = this.tableDestroyed;
 		this.destroyed = false;
 	}
-
+	
 	tableDestroyed(){
 		this.destroyed = true;
 		this.hide(true);
 	}
-    
+	
 	_lookupContainer(){
 		var container = this.table.options.popupContainer;
-        
+		
 		if(typeof container === "string"){
 			container = document.querySelector(container);
-            
+			
 			if(!container){
 				console.warn("Menu Error - no container element found matching selector:",  this.table.options.popupContainer , "(defaulting to document body)");
 			}
 		}else if (container === true){
 			container = this.table.element;
 		}
-        
+		
 		if(container && !this._checkContainerIsParent(container)){
 			container = false;
 			console.warn("Menu Error - container element does not contain this table:",  this.table.options.popupContainer , "(defaulting to document body)");
 		}
-        
+		
 		if(!container){
 			container = document.body;
 		}
-        
+		
 		return container;
 	}
-    
+	
 	_checkContainerIsParent(container, element = this.table.element){
 		if(container === element){
 			return true;
@@ -251,119 +252,135 @@ class Popup extends CoreFeature{
 			return element.parentNode ? this._checkContainerIsParent(container, element.parentNode) : false;
 		}
 	}
-    
+	
 	renderCallback(callback){
 		this.renderedCallback = callback;
 	}
-    
+	
 	containerEventCoords(e){
 		var touch = !(e instanceof MouseEvent);
-        
+		
 		var x = touch ? e.touches[0].pageX : e.pageX;
 		var y = touch ? e.touches[0].pageY : e.pageY;
-        
+		
 		if(this.container !== document.body){
 			let parentOffset = Helpers.elOffset(this.container);
-            
+			
 			x -= parentOffset.left;
 			y -= parentOffset.top;
 		}
-        
+		
 		return {x, y};
 	}
-    
+	
 	elementPositionCoords(element, position = "right"){
 		var offset = Helpers.elOffset(element),
 		containerOffset, x, y;
-        
+		
 		if(this.container !== document.body){
 			containerOffset = Helpers.elOffset(this.container);
-            
+			
 			offset.left -= containerOffset.left;
 			offset.top -= containerOffset.top;
 		}
-        
+		
 		switch(position){
 			case "right":
 				x = offset.left + element.offsetWidth;
 				y = offset.top - 1;
 				break;
-            
+			
 			case "bottom":
 				x = offset.left;
 				y = offset.top + element.offsetHeight;
 				break;
+			
+			case "left":
+				x = offset.left;
+				y = offset.top - 1;
+				break;
+			
+			case "top":
+				x = offset.left;
+				y = offset.top;
+				break;
+			
+			case "center":
+				x = offset.left + (element.offsetWidth / 2);
+				y = offset.top + (element.offsetHeight / 2);
+				break;
+			
 		}
-        
+		
 		return {x, y, offset};
 	}
-    
+	
 	show(origin, position){
 		var x, y, parentEl, parentOffset, coords;
-
+		
 		if(this.destroyed || this.table.destroyed){
 			return this;
 		}
-        
+		
 		if(origin instanceof HTMLElement){
 			parentEl = origin;
 			coords = this.elementPositionCoords(origin, position);
-            
+			
 			parentOffset = coords.offset;
 			x = coords.x;
 			y = coords.y;
-            
+			
 		}else if(typeof origin === "number"){
 			parentOffset = {top:0, left:0};
 			x = origin;
 			y = position;
 		}else {
 			coords = this.containerEventCoords(origin);
-            
+			
 			x = coords.x;
 			y = coords.y;
-            
+			
 			this.reversedX = false;
 		}
-        
+		
 		this.element.style.top = y + "px";
 		this.element.style.left = x + "px";
-        
+		
 		this.container.appendChild(this.element);
-        
+		
 		if(typeof this.renderedCallback === "function"){
 			this.renderedCallback();
 		}
-        
+		
 		this._fitToScreen(x, y, parentEl, parentOffset, position);
-        
+		
 		this.visible = true;
-
+		
 		this.subscribe("table-destroy", this.destroyBinding);
-
+		
 		this.element.addEventListener("mousedown", (e) => {
 			e.stopPropagation();
 		});
-        
+		
 		return this;
 	}
-    
+	
 	_fitToScreen(x, y, parentEl, parentOffset, position){
 		var scrollTop = this.container === document.body ? document.documentElement.scrollTop : this.container.scrollTop;
-
+		
 		//move menu to start on right edge if it is too close to the edge of the screen
 		if((x + this.element.offsetWidth) >= this.container.offsetWidth || this.reversedX){
 			this.element.style.left = "";
-            
+			
 			if(parentEl){
 				this.element.style.right = (this.container.offsetWidth - parentOffset.left) + "px";
 			}else {
 				this.element.style.right = (this.container.offsetWidth - x) + "px";
 			}
-            
+			
 			this.reversedX = true;
 		}
-
+		
 		//move menu to start on bottom edge if it is too close to the edge of the screen
 		if((y + this.element.offsetHeight) > Math.max(this.container.offsetHeight, scrollTop ? this.container.scrollHeight : 0)) {
 			if(parentEl){
@@ -371,59 +388,62 @@ class Popup extends CoreFeature{
 					case "bottom":
 						this.element.style.top = (parseInt(this.element.style.top) - this.element.offsetHeight - parentEl.offsetHeight - 1) + "px";
 						break;
-
+					
 					default:
 						this.element.style.top = (parseInt(this.element.style.top) - this.element.offsetHeight + parentEl.offsetHeight + 1) + "px";
 				}
-                
+				
 			}else {
 				this.element.style.top = (parseInt(this.element.style.top) - this.element.offsetHeight) + "px";
 			}
 		}
 	}
-    
+	
 	isVisible(){
 		return this.visible;
 	}
-    
+	
 	hideOnBlur(callback){
 		this.blurable = true;
-        
+		
 		if(this.visible){
 			setTimeout(() => {
-				this.table.rowManager.element.addEventListener("scroll", this.blurEvent);
-				this.subscribe("cell-editing", this.blurEvent);
-				document.body.addEventListener("click", this.blurEvent);
-				document.body.addEventListener("contextmenu", this.blurEvent);
-				document.body.addEventListener("mousedown", this.blurEvent);
-				window.addEventListener("resize", this.blurEvent);
-				document.body.addEventListener("keydown", this.escEvent);
+				if(this.visible){
+					this.table.rowManager.element.addEventListener("scroll", this.blurEvent);
+					this.subscribe("cell-editing", this.blurEvent);
+					document.body.addEventListener("click", this.blurEvent);
+					document.body.addEventListener("contextmenu", this.blurEvent);
+					document.body.addEventListener("mousedown", this.blurEvent);
+					window.addEventListener("resize", this.blurEvent);
+					document.body.addEventListener("keydown", this.escEvent);
 
+					this.blurEventsBound = true;
+				}
 			}, 100);
-            
+			
 			this.blurCallback = callback;
 		}
-        
+		
 		return this;
 	}
-    
+	
 	_escapeCheck(e){
 		if(e.keyCode == 27){
 			this.hide();
 		}
 	}
-
+	
 	blockHide(){
 		this.hideable = false;
 	}
-
+	
 	restoreHide(){
 		this.hideable = true;
 	}
-    
+	
 	hide(silent = false){
 		if(this.visible && this.hideable){
-			if(this.blurable){
+			if(this.blurable && this.blurEventsBound){
 				document.body.removeEventListener("keydown", this.escEvent);
 				document.body.removeEventListener("click", this.blurEvent);
 				document.body.removeEventListener("contextmenu", this.blurEvent);
@@ -431,39 +451,41 @@ class Popup extends CoreFeature{
 				window.removeEventListener("resize", this.blurEvent);
 				this.table.rowManager.element.removeEventListener("scroll", this.blurEvent);
 				this.unsubscribe("cell-editing", this.blurEvent);
+
+				this.blurEventsBound = false;
 			}
-            
+			
 			if(this.childPopup){
 				this.childPopup.hide();
 			}
-            
+			
 			if(this.parent){
 				this.parent.childPopup = null;
 			}
-            
+			
 			if(this.element.parentNode){
 				this.element.parentNode.removeChild(this.element);
 			}
-
+			
 			this.visible = false;
-
+			
 			if(this.blurCallback && !silent){
 				this.blurCallback();
 			}
-
+			
 			this.unsubscribe("table-destroy", this.destroyBinding);
 		}
-        
+		
 		return this;
 	}
-    
+	
 	child(element){
 		if(this.childPopup){
 			this.childPopup.hide();
 		}
-        
+		
 		this.childPopup = new Popup(this.table, element, this);
-        
+		
 		return this.childPopup;
 	}
 }
@@ -1984,6 +2006,7 @@ var defaultColumnOptions = {
 	"variableHeight": undefined,
 	"headerVertical": undefined,
 	"headerHozAlign": undefined,
+	"headerWordWrap": false,
 	"editableTitle": undefined,
 };
 
@@ -2226,6 +2249,10 @@ class Column extends CoreFeature{
 
 		var titleHolderElement = document.createElement("div");
 		titleHolderElement.classList.add("tabulator-col-title");
+		
+		if(def.headerWordWrap){
+			titleHolderElement.classList.add("tabulator-col-title-wrap");
+		}
 
 		if(def.editableTitle){
 			var titleElement = document.createElement("input");
@@ -3272,7 +3299,7 @@ class Row extends CoreFeature{
 					
 					if(cell){
 						let value = column.getFieldValue(newRowData);
-						if(cell.getValue() != value){
+						if(cell.getValue() !== value){
 							cell.setValueProcessData(value);
 							
 							if(visible){
@@ -3552,10 +3579,10 @@ var defaultCalculations = {
 };
 
 class ColumnCalcs extends Module{
-
+	
 	constructor(table){
 		super(table);
-
+		
 		this.topCalcs = [];
 		this.botCalcs = [];
 		this.genColumn = false;
@@ -3565,9 +3592,12 @@ class ColumnCalcs extends Module{
 		this.botRow = false;
 		this.topInitialized = false;
 		this.botInitialized = false;
-
+		
+		this.blocked = false;
+		this.recalcAfterBlock = false;
+		
 		this.registerTableOption("columnCalcs", true);
-
+		
 		this.registerColumnOption("topCalc");
 		this.registerColumnOption("topCalcParams");
 		this.registerColumnOption("topCalcFormatter");
@@ -3577,16 +3607,16 @@ class ColumnCalcs extends Module{
 		this.registerColumnOption("bottomCalcFormatter");
 		this.registerColumnOption("bottomCalcFormatterParams");
 	}
-
+	
 	createElement (){
 		var el = document.createElement("div");
 		el.classList.add("tabulator-calcs-holder");
 		return el;
 	}
-
+	
 	initialize(){
 		this.genColumn = new Column({field:"value"}, this);
-
+		
 		this.subscribe("cell-value-changed", this.cellValueChanged.bind(this));
 		this.subscribe("column-init", this.initializeColumnCheck.bind(this));
 		this.subscribe("row-deleted", this.rowsUpdated.bind(this));
@@ -3597,43 +3627,69 @@ class ColumnCalcs extends Module{
 		this.subscribe("data-refreshed", this.recalcActiveRowsRefresh.bind(this));
 		this.subscribe("table-redraw", this.tableRedraw.bind(this));
 		this.subscribe("rows-visible", this.visibleRows.bind(this));
-
+		this.subscribe("scrollbar-vertical", this.adjustForScrollbar.bind(this));
+		
+		this.subscribe("redraw-blocked", this.blockRedraw.bind(this));
+		this.subscribe("redraw-restored", this.restoreRedraw.bind(this));
+		
 		this.registerTableFunction("getCalcResults", this.getResults.bind(this));
 		this.registerTableFunction("recalc", this.userRecalc.bind(this));
 	}
-
+	
 	tableRedraw(force){
 		this.recalc(this.table.rowManager.activeRows);
-
+		
 		if(force){
 			this.redraw();
 		}
 	}
-
-
+	
+	blockRedraw(){
+		this.blocked = true;
+		this.recalcAfterBlock = false;
+	}
+	
+	
+	restoreRedraw(){
+		this.blocked = false;
+		
+		if(this.recalcAfterBlock){
+			this.recalcAfterBlock = false;
+			this.recalcActiveRowsRefresh();
+		}
+	}
+	
 	///////////////////////////////////
 	///////// Table Functions /////////
 	///////////////////////////////////
 	userRecalc(){
 		this.recalc(this.table.rowManager.activeRows);
 	}
-
+	
 	///////////////////////////////////
 	///////// Internal Logic //////////
 	///////////////////////////////////
-
+	
+	blockCheck(){
+		if(this.blocked){
+			this.recalcAfterBlock = true;
+		}
+		
+		return this.blocked;
+	}
+	
 	visibleRows(viewable, rows){
 		if(this.topRow){
 			rows.unshift(this.topRow);
 		}
-
+		
 		if(this.botRow){
 			rows.push(this.botRow);
 		}
-	
+		
 		return rows;
 	}
-
+	
 	rowsUpdated(row){
 		if(this.table.options.groupBy){
 			this.recalcRowGroup(row);
@@ -3641,7 +3697,7 @@ class ColumnCalcs extends Module{
 			this.recalcActiveRows();
 		}
 	}
-
+	
 	recalcActiveRowsRefresh(){
 		if(this.table.options.groupBy && this.table.options.dataTreeStartExpanded && this.table.options.dataTree){
 			this.recalcAll();
@@ -3649,18 +3705,18 @@ class ColumnCalcs extends Module{
 			this.recalcActiveRows();
 		}
 	}
-
+	
 	recalcActiveRows(){
 		this.recalc(this.table.rowManager.activeRows);
 	}
-
+	
 	cellValueChanged(cell){
 		if(cell.column.definition.topCalc || cell.column.definition.bottomCalc){
 			if(this.table.options.groupBy){
 				if(this.table.options.columnCalcs == "table" || this.table.options.columnCalcs == "both"){
 					this.recalcActiveRows();
 				}
-
+				
 				if(this.table.options.columnCalcs != "table"){
 					this.recalcRowGroup(cell.row);
 				}
@@ -3669,24 +3725,24 @@ class ColumnCalcs extends Module{
 			}
 		}
 	}
-
+	
 	initializeColumnCheck(column){
 		if(column.definition.topCalc || column.definition.bottomCalc){
 			this.initializeColumn(column);
 		}
 	}
-
+	
 	//initialize column calcs
 	initializeColumn(column){
 		var def = column.definition;
-
+		
 		var config = {
 			topCalcParams:def.topCalcParams || {},
 			botCalcParams:def.bottomCalcParams || {},
 		};
-
+		
 		if(def.topCalc){
-
+			
 			switch(typeof def.topCalc){
 				case "string":
 					if(ColumnCalcs.calculations[def.topCalc]){
@@ -3695,24 +3751,24 @@ class ColumnCalcs extends Module{
 						console.warn("Column Calc Error - No such calculation found, ignoring: ", def.topCalc);
 					}
 					break;
-
+				
 				case "function":
 					config.topCalc = def.topCalc;
 					break;
-
+				
 			}
-
+			
 			if(config.topCalc){
 				column.modules.columnCalcs = config;
 				this.topCalcs.push(column);
-
+				
 				if(this.table.options.columnCalcs != "group"){
 					this.initializeTopRow();
 				}
 			}
-
+			
 		}
-
+		
 		if(def.bottomCalc){
 			switch(typeof def.bottomCalc){
 				case "string":
@@ -3722,156 +3778,156 @@ class ColumnCalcs extends Module{
 						console.warn("Column Calc Error - No such calculation found, ignoring: ", def.bottomCalc);
 					}
 					break;
-
+				
 				case "function":
 					config.botCalc = def.bottomCalc;
 					break;
-
+				
 			}
-
+			
 			if(config.botCalc){
 				column.modules.columnCalcs = config;
 				this.botCalcs.push(column);
-
+				
 				if(this.table.options.columnCalcs != "group"){
 					this.initializeBottomRow();
 				}
 			}
 		}
-
+		
 	}
-
+	
 	//dummy functions to handle being mock column manager
 	registerColumnField(){}
-
+	
 	removeCalcs(){
 		var changed = false;
-
+		
 		if(this.topInitialized){
 			this.topInitialized = false;
 			this.topElement.parentNode.removeChild(this.topElement);
 			changed = true;
 		}
-
+		
 		if(this.botInitialized){
 			this.botInitialized = false;
 			this.footerRemove(this.botElement);
 			changed = true;
 		}
-
+		
 		if(changed){
 			this.table.rowManager.adjustTableSize();
 		}
 	}
-
+	
 	initializeTopRow(){
 		if(!this.topInitialized){
-			this.table.columnManager.getElement().insertBefore(this.topElement, this.table.columnManager.headersElement.nextSibling);
+			this.table.columnManager.getContentsElement().insertBefore(this.topElement, this.table.columnManager.headersElement.nextSibling);
 			this.topInitialized = true;
 		}
 	}
-
+	
 	initializeBottomRow(){
 		if(!this.botInitialized){
 			this.footerPrepend(this.botElement);
 			this.botInitialized = true;
 		}
 	}
-
+	
 	scrollHorizontal(left){
 		if(this.botInitialized && this.botRow){
-			if(this.table.rtl){
-				this.botRow.getElement().style.marginRight = (left) + "px";
-			}else {
-				this.botRow.getElement().style.marginLeft = (-left) + "px";
-			}	
+			this.botElement.scrollLeft = left;
 		}
 	}
-
+	
 	recalc(rows){
 		var data, row;
-
-		if(this.topInitialized || this.botInitialized){
-			data = this.rowsToData(rows);
-
-			if(this.topInitialized){
-				if(this.topRow){
-					this.topRow.deleteCells();
+		
+		if(!this.blockCheck()){
+			if(this.topInitialized || this.botInitialized){
+				data = this.rowsToData(rows);
+				
+				if(this.topInitialized){
+					if(this.topRow){
+						this.topRow.deleteCells();
+					}
+					
+					row = this.generateRow("top", data);
+					this.topRow = row;
+					while(this.topElement.firstChild) this.topElement.removeChild(this.topElement.firstChild);
+					this.topElement.appendChild(row.getElement());
+					row.initialize(true);
 				}
-
-				row = this.generateRow("top", data);
-				this.topRow = row;
-				while(this.topElement.firstChild) this.topElement.removeChild(this.topElement.firstChild);
-				this.topElement.appendChild(row.getElement());
-				row.initialize(true);
-			}
-
-			if(this.botInitialized){
-				if(this.botRow){
-					this.botRow.deleteCells();
+				
+				if(this.botInitialized){
+					if(this.botRow){
+						this.botRow.deleteCells();
+					}
+					
+					row = this.generateRow("bottom", data);
+					this.botRow = row;
+					while(this.botElement.firstChild) this.botElement.removeChild(this.botElement.firstChild);
+					this.botElement.appendChild(row.getElement());
+					row.initialize(true);
+				}
+				
+				this.table.rowManager.adjustTableSize();
+				
+				//set resizable handles
+				if(this.table.modExists("frozenColumns")){
+					this.table.modules.frozenColumns.layout();
 				}
-
-				row = this.generateRow("bottom", data);
-				this.botRow = row;
-				while(this.botElement.firstChild) this.botElement.removeChild(this.botElement.firstChild);
-				this.botElement.appendChild(row.getElement());
-				row.initialize(true);
-			}
-
-			this.table.rowManager.adjustTableSize();
-
-			//set resizable handles
-			if(this.table.modExists("frozenColumns")){
-				this.table.modules.frozenColumns.layout();
 			}
 		}
 	}
-
+	
 	recalcRowGroup(row){
 		this.recalcGroup(this.table.modules.groupRows.getRowGroup(row));
 	}
-
+	
 	recalcAll(){
 		if(this.topCalcs.length || this.botCalcs.length){
 			if(this.table.options.columnCalcs !== "group"){
 				this.recalcActiveRows();
 			}
-
+			
 			if(this.table.options.groupBy && this.table.options.columnCalcs !== "table"){
-
+				
 				var groups = this.table.modules.groupRows.getChildGroups();
-
+				
 				groups.forEach((group) => {
 					this.recalcGroup(group);
 				});
 			}
 		}
 	}
-
+	
 	recalcGroup(group){
 		var data, rowData;
-
-		if(group){
-			if(group.calcs){
-				if(group.calcs.bottom){
-					data = this.rowsToData(group.rows);
-					rowData = this.generateRowData("bottom", data);
-
-					group.calcs.bottom.updateData(rowData);
-					group.calcs.bottom.reinitialize();
-				}
-
-				if(group.calcs.top){
-					data = this.rowsToData(group.rows);
-					rowData = this.generateRowData("top", data);
-
-					group.calcs.top.updateData(rowData);
-					group.calcs.top.reinitialize();
+		
+		if(!this.blockCheck()){
+			if(group){
+				if(group.calcs){
+					if(group.calcs.bottom){
+						data = this.rowsToData(group.rows);
+						rowData = this.generateRowData("bottom", data);
+						
+						group.calcs.bottom.updateData(rowData);
+						group.calcs.bottom.reinitialize();
+					}
+					
+					if(group.calcs.top){
+						data = this.rowsToData(group.rows);
+						rowData = this.generateRowData("top", data);
+						
+						group.calcs.top.updateData(rowData);
+						group.calcs.top.reinitialize();
+					}
 				}
 			}
 		}
 	}
-
+	
 	//generate top stats row
 	generateTopRow(rows){
 		return this.generateRow("top", this.rowsToData(rows));
@@ -3880,13 +3936,13 @@ class ColumnCalcs extends Module{
 	generateBottomRow(rows){
 		return this.generateRow("bottom", this.rowsToData(rows));
 	}
-
+	
 	rowsToData(rows){
 		var data = [];
 		
 		rows.forEach((row) => {
 			data.push(row.getData());
-
+			
 			if(this.table.options.dataTree && this.table.options.dataTreeChildColumnCalcs){
 				if(row.modules.dataTree && row.modules.dataTree.open){
 					var children = this.rowsToData(this.table.modules.dataTree.getFilteredTreeChildren(row));
@@ -3894,47 +3950,47 @@ class ColumnCalcs extends Module{
 				}
 			}
 		});
-
+		
 		return data;
 	}
-
+	
 	//generate stats row
 	generateRow(pos, data){
 		var rowData = this.generateRowData(pos, data),
 		row;
-
+		
 		if(this.table.modExists("mutator")){
 			this.table.modules.mutator.disable();
 		}
-
+		
 		row = new Row(rowData, this, "calc");
-
+		
 		if(this.table.modExists("mutator")){
 			this.table.modules.mutator.enable();
 		}
-
+		
 		row.getElement().classList.add("tabulator-calcs", "tabulator-calcs-" + pos);
-
+		
 		row.component = false;
-
+		
 		row.getComponent = () => {
 			if(!row.component){
 				row.component = new CalcComponent(row);
 			}
-
+			
 			return row.component;
 		};
-
+		
 		row.generateCells = () => {
-
+			
 			var cells = [];
-
+			
 			this.table.columnManager.columnsByIndex.forEach((column) => {
-
+				
 				//set field name of mock column
 				this.genColumn.setField(column.getField());
 				this.genColumn.hozAlign = column.hozAlign;
-
+				
 				if(column.definition[pos + "CalcFormatter"] && this.table.modExists("format")){
 					this.genColumn.modules.format = {
 						formatter: this.table.modules.format.getFormatter(column.definition[pos + "CalcFormatter"]),
@@ -3946,63 +4002,63 @@ class ColumnCalcs extends Module{
 						params:{}
 					};
 				}
-
+				
 				//ensure css class definition is replicated to calculation cell
 				this.genColumn.definition.cssClass = column.definition.cssClass;
-
+				
 				//generate cell and assign to correct column
 				var cell = new Cell(this.genColumn, row);
 				cell.getElement();
 				cell.column = column;
 				cell.setWidth();
-
+				
 				column.cells.push(cell);
 				cells.push(cell);
-
+				
 				if(!column.visible){
 					cell.hide();
 				}
 			});
-
+			
 			row.cells = cells;
 		};
-
+		
 		return row;
 	}
-
+	
 	//generate stats row
 	generateRowData(pos, data){
 		var rowData = {},
 		calcs = pos == "top" ? this.topCalcs : this.botCalcs,
 		type = pos == "top" ? "topCalc" : "botCalc",
 		params, paramKey;
-
+		
 		calcs.forEach(function(column){
 			var values = [];
-
+			
 			if(column.modules.columnCalcs && column.modules.columnCalcs[type]){
 				data.forEach(function(item){
 					values.push(column.getFieldValue(item));
 				});
-
+				
 				paramKey = type + "Params";
 				params = typeof column.modules.columnCalcs[paramKey] === "function" ? column.modules.columnCalcs[paramKey](values, data) : column.modules.columnCalcs[paramKey];
-
+				
 				column.setFieldValue(rowData, column.modules.columnCalcs[type](values, data, params));
 			}
 		});
-
+		
 		return rowData;
 	}
-
+	
 	hasTopCalcs(){
 		return	!!(this.topCalcs.length);
 	}
-
+	
 	hasBottomCalcs(){
 		return	!!(this.botCalcs.length);
 	}
-
+	
 	//handle table redraw
 	redraw(){
 		if(this.topRow){
@@ -4012,15 +4068,15 @@ class ColumnCalcs extends Module{
 			this.botRow.normalizeHeight(true);
 		}
 	}
-
+	
 	//return the calculated
 	getResults(){
 		var results = {},
 		groups;
-
+		
 		if(this.table.options.groupBy && this.table.modExists("groupRows")){
 			groups = this.table.modules.groupRows.getGroups(true);
-
+			
 			groups.forEach((group) => {
 				results[group.getKey()] = this.getGroupResults(group);
 			});
@@ -4030,29 +4086,39 @@ class ColumnCalcs extends Module{
 				bottom: this.botRow ? this.botRow.getData() : {},
 			};
 		}
-
+		
 		return results;
 	}
-
+	
 	//get results from a group
 	getGroupResults(group){
 		var groupObj = group._getSelf(),
 		subGroups = group.getSubGroups(),
 		subGroupResults = {},
 		results = {};
-
+		
 		subGroups.forEach((subgroup) => {
 			subGroupResults[subgroup.getKey()] = this.getGroupResults(subgroup);
 		});
-
+		
 		results = {
 			top: groupObj.calcs.top ? groupObj.calcs.top.getData() : {},
 			bottom: groupObj.calcs.bottom ? groupObj.calcs.bottom.getData() : {},
 			groups: subGroupResults,
 		};
-
+		
 		return results;
 	}
+	
+	adjustForScrollbar(width){
+		if(this.botRow){
+			if(this.table.rtl){
+				this.botElement.style.paddingLeft = width + "px";
+			}else {
+				this.botElement.style.paddingRight = width + "px";
+			}
+		}
+	}
 }
 
 ColumnCalcs.moduleName = "columnCalcs";
@@ -4871,6 +4937,7 @@ function xlsx(list, options, setFileContents){
 	sheetName = options.sheetName || "Sheet1",
 	workbook = XLSX.utils.book_new(),
 	tableFeatures = new CoreFeature(this),
+	compression =  'compress' in options ? options.compress : true,
 	output;
 
 	workbook.SheetNames = [];
@@ -4958,7 +5025,7 @@ function xlsx(list, options, setFileContents){
 		return buf;
 	}
 
-	output = XLSX.write(workbook, {bookType:'xlsx', bookSST:true, type: 'binary'});
+	output = XLSX.write(workbook, {bookType:'xlsx', bookSST:true, type: 'binary', compression });
 
 	setFileContents(s2ab(output), "application/octet-stream");
 }
@@ -5948,6 +6015,7 @@ class Edit{
 		this.listIteration = 0;
 		
 		this.lastAction="";
+		this.filterTerm="";
 		
 		this.blurable = true;
 		
@@ -7414,6 +7482,7 @@ class Edit$1 extends Module{
 		this.subscribe("column-layout", this.initializeColumnCheck.bind(this));
 		this.subscribe("column-delete", this.columnDeleteCheck.bind(this));
 		this.subscribe("row-deleting", this.rowDeleteCheck.bind(this));
+		this.subscribe("row-layout", this.rowEditableCheck.bind(this));
 		this.subscribe("data-refreshing", this.cancelEdit.bind(this));
 		
 		this.subscribe("keybinding-nav-prev", this.navigatePrev.bind(this, undefined));
@@ -7518,7 +7587,7 @@ class Edit$1 extends Module{
 				prevRow = this.table.rowManager.prevDisplayRow(cell.row, true);
 				
 				if(prevRow){
-					nextCell = this.findNextEditableCell(prevRow, prevRow.cells.length);
+					nextCell = this.findPrevEditableCell(prevRow, prevRow.cells.length);
 					
 					if(nextCell){
 						nextCell.getComponent().edit();
@@ -7708,6 +7777,14 @@ class Edit$1 extends Module{
 			this.cancelEdit();
 		}
 	}
+
+	rowEditableCheck(row){
+		row.getCells().forEach((cell) => {
+			if(cell.column.modules.edit && typeof cell.column.modules.edit.check === "function"){
+				this.updateCellClass(cell);
+			}
+		});
+	}
 	
 	//initialize column editor
 	initializeColumn(column){
@@ -7892,7 +7969,9 @@ class Edit$1 extends Module{
 		if(cell.column.modules.edit){
 			switch(typeof cell.column.modules.edit.check){
 				case "function":
-					check = cell.column.modules.edit.check(cell.getComponent());
+					if(cell.row.initialized){
+						check = cell.column.modules.edit.check(cell.getComponent());
+					}
 					break;
 
 				case "string":
@@ -9228,9 +9307,9 @@ class Filter extends Module{
 				});
 
 				editorElement.addEventListener("focus", (e) => {
-					var left = this.table.columnManager.element.scrollLeft;
+					var left = this.table.columnManager.contentsElement.scrollLeft;
 
-					var headerPos = this.table.rowManager.element.scrollLeft + parseInt(this.table.columnManager.element.style.marginLeft);
+					var headerPos = this.table.rowManager.element.scrollLeft;
 
 					if(left !== headerPos){
 						this.table.rowManager.scrollHorizontal(left);
@@ -10240,7 +10319,15 @@ function responsiveCollapse(cell, formatterParams, onRendered){
 	config = cell.getRow()._row.modules.responsiveLayout;
 
 	el.classList.add("tabulator-responsive-collapse-toggle");
-	el.innerHTML = "<span class='tabulator-responsive-collapse-toggle-open'>+</span><span class='tabulator-responsive-collapse-toggle-close'>-</span>";
+	
+	el.innerHTML = `<svg class='tabulator-responsive-collapse-toggle-open' viewbox="0 0 24 24">
+  <line x1="7" y1="12" x2="17" y2="12" fill="none" stroke-width="3" stroke-linecap="round" />
+  <line y1="7" x1="12" y2="17" x2="12" fill="none" stroke-width="3" stroke-linecap="round" />
+</svg>
+
+<svg class='tabulator-responsive-collapse-toggle-close' viewbox="0 0 24 24">
+  <line x1="7" y1="12" x2="17" y2="12"  fill="none" stroke-width="3" stroke-linecap="round" />
+</svg>`;
 
 	cell.getElement().classList.add("tabulator-row-handle");
 
@@ -10355,13 +10442,13 @@ var defaultFormatters = {
 };
 
 class Format extends Module{
-
+	
 	constructor(table){
 		super(table);
-
+		
 		this.registerColumnOption("formatter");
 		this.registerColumnOption("formatterParams");
-
+		
 		this.registerColumnOption("formatterPrint");
 		this.registerColumnOption("formatterPrintParams");
 		this.registerColumnOption("formatterClipboard");
@@ -10371,35 +10458,35 @@ class Format extends Module{
 		this.registerColumnOption("titleFormatter");
 		this.registerColumnOption("titleFormatterParams");
 	}
-
+	
 	initialize(){
 		this.subscribe("cell-format", this.formatValue.bind(this));
 		this.subscribe("cell-rendered", this.cellRendered.bind(this));
 		this.subscribe("column-layout", this.initializeColumn.bind(this));
 		this.subscribe("column-format", this.formatHeader.bind(this));
 	}
-
+	
 	//initialize column formatter
 	initializeColumn(column){
 		column.modules.format = this.lookupFormatter(column, "");
-
+		
 		if(typeof column.definition.formatterPrint !== "undefined"){
 			column.modules.format.print = this.lookupFormatter(column, "Print");
 		}
-
+		
 		if(typeof column.definition.formatterClipboard !== "undefined"){
 			column.modules.format.clipboard = this.lookupFormatter(column, "Clipboard");
 		}
-
+		
 		if(typeof column.definition.formatterHtmlOutput !== "undefined"){
 			column.modules.format.htmlOutput = this.lookupFormatter(column, "HtmlOutput");
 		}
 	}
-
+	
 	lookupFormatter(column, type){
 		var config = {params:column.definition["formatter" + type + "Params"] || {}},
 		formatter = column.definition["formatter" + type];
-
+		
 		//set column formatter
 		switch(typeof formatter){
 			case "string":
@@ -10410,97 +10497,103 @@ class Format extends Module{
 					config.formatter = Format.formatters.plaintext;
 				}
 				break;
-
+			
 			case "function":
 				config.formatter = formatter;
 				break;
-
+			
 			default:
 				config.formatter = Format.formatters.plaintext;
 				break;
 		}
-
+		
 		return config;
 	}
-
+	
 	cellRendered(cell){
 		if(cell.modules.format && cell.modules.format.renderedCallback && !cell.modules.format.rendered){
 			cell.modules.format.renderedCallback();
 			cell.modules.format.rendered = true;
 		}
 	}
-
+	
 	//return a formatted value for a column header
 	formatHeader(column, title, el){
 		var formatter, params, onRendered, mockCell;
-
+		
 		if(column.definition.titleFormatter){
 			formatter = this.getFormatter(column.definition.titleFormatter);
-
+			
 			onRendered = (callback) => {
 				column.titleFormatterRendered = callback;
 			};
-
+			
 			mockCell = {
 				getValue:function(){
 					return title;
 				},
 				getElement:function(){
 					return el;
+				},
+				getColumn:function(){
+					return column.getComponent();
+				},
+				getTable:() => {
+					return this.table;
 				}
 			};
-
+			
 			params = column.definition.titleFormatterParams || {};
-
+			
 			params = typeof params === "function" ? params() : params;
-
+			
 			return formatter.call(this, mockCell, params, onRendered);
 		}else {
 			return title;
 		}
 	}
-
-
+	
+	
 	//return a formatted value for a cell
 	formatValue(cell){
 		var component = cell.getComponent(),
 		params = typeof cell.column.modules.format.params === "function" ? cell.column.modules.format.params(component) : cell.column.modules.format.params;
-
+		
 		function onRendered(callback){
 			if(!cell.modules.format){
 				cell.modules.format = {};
 			}
-
+			
 			cell.modules.format.renderedCallback = callback;
 			cell.modules.format.rendered = false;
 		}
-
+		
 		return cell.column.modules.format.formatter.call(this, component, params, onRendered);
 	}
-
+	
 	formatExportValue(cell, type){
 		var formatter = cell.column.modules.format[type],
 		params;
-
+		
 		if(formatter){
 			params = typeof formatter.params === "function" ? formatter.params(cell.getComponent()) : formatter.params;
-
+			
 			function onRendered(callback){
 				if(!cell.modules.format){
 					cell.modules.format = {};
 				}
-
+				
 				cell.modules.format.renderedCallback = callback;
 				cell.modules.format.rendered = false;
 			}
-
+			
 			return formatter.formatter.call(this, cell.getComponent(), params, onRendered);
-
+			
 		}else {
 			return this.formatValue(cell);
 		}
 	}
-
+	
 	sanitizeHTML(value){
 		if(value){
 			var entityMap = {
@@ -10513,7 +10606,7 @@ class Format extends Module{
 				'`': '&#x60;',
 				'=': '&#x3D;'
 			};
-
+			
 			return String(value).replace(/[&<>"'`=/]/g, function (s) {
 				return entityMap[s];
 			});
@@ -10521,11 +10614,11 @@ class Format extends Module{
 			return value;
 		}
 	}
-
+	
 	emptyToSpace(value){
 		return value === null || typeof value === "undefined" || value === "" ? "&nbsp;" : value;
 	}
-
+	
 	//get formatter for cell
 	getFormatter(formatter){
 		switch(typeof formatter){
@@ -10537,16 +10630,16 @@ class Format extends Module{
 					formatter = Format.formatters.plaintext;
 				}
 				break;
-
+			
 			case "function":
-				//Custom formatter Function, do nothing
+			//Custom formatter Function, do nothing
 				break;
-
+			
 			default:
 				formatter = Format.formatters.plaintext;
 				break;
 		}
-
+		
 		return formatter;
 	}
 }
@@ -10563,9 +10656,6 @@ class FrozenColumns extends Module{
 		
 		this.leftColumns = [];
 		this.rightColumns = [];
-		this.leftMargin = 0;
-		this.rightMargin = 0;
-		this.rightPadding = 0;
 		this.initializationMode = "left";
 		this.active = false;
 		this.blocked = true;
@@ -10578,13 +10668,7 @@ class FrozenColumns extends Module{
 		this.initializationMode = "left";
 		this.leftColumns = [];
 		this.rightColumns = [];
-		this.leftMargin = 0;
-		this.rightMargin = 0;
-		this.rightMargin = 0;
 		this.active = false;
-		
-		this.table.columnManager.headersElement.style.marginLeft = 0;
-		this.table.columnManager.element.style.paddingRight = 0;
 	}
 	
 	initialize(){
@@ -10593,8 +10677,6 @@ class FrozenColumns extends Module{
 		this.subscribe("column-width", this.layout.bind(this));
 		this.subscribe("row-layout-after", this.layoutRow.bind(this));
 		this.subscribe("table-layout", this.layout.bind(this));
-		this.subscribe("scroll-horizontal", this.scrollHorizontal.bind(this));
-		this.subscribe("scroll-horizontal", this.scrollHorizontal.bind(this));
 		this.subscribe("columns-loading", this.reset.bind(this));
 		
 		this.subscribe("column-add", this.reinitializeColumns.bind(this));
@@ -10603,6 +10685,7 @@ class FrozenColumns extends Module{
 		this.subscribe("table-redraw", this.layout.bind(this));
 		this.subscribe("layout-refreshing", this.blockLayout.bind(this));
 		this.subscribe("layout-refreshed", this.unblockLayout.bind(this));
+		this.subscribe("scrollbar-vertical", this.adjustForScrollbar.bind(this));
 	}
 	
 	blockLayout(){
@@ -10652,40 +10735,14 @@ class FrozenColumns extends Module{
 	
 	frozenCheck(column){
 		if(column.parent.isGroup && column.definition.frozen){
-			console.warn("Frozen Column Error - Parent column group must be frozen, not individual columns or sub column groups");
-		}
-		
-		if(column.parent.isGroup){
-			return this.frozenCheck(column.parent);
-		}else {
-			return column.definition.frozen;
-		}
-	}
-	
-	//quick layout to smooth horizontal scrolling
-	scrollHorizontal(){	
-		if(this.active){		
-			this.calcMargins(true);
-			
-			this.layoutColumnPosition();
-			
-			this.layoutCalcRows();
-			
-			this.reinitializeRows();
-		}
-	}
-	
-	//calculate margins for rows
-	calcMargins(scroll){
-		
-		if(!scroll){
-			this.leftMargin = this._calcSpace(this.leftColumns, this.leftColumns.length) + "px";			
-			this.rightMargin = this._calcSpace(this.rightColumns, this.rightColumns.length) + "px";	
-			this.table.rowManager.tableElement.style.marginRight = this.rightMargin;
+			console.warn("Frozen Column Error - Parent column group must be frozen, not individual columns or sub column groups");
 		}
 		
-		//calculate right frozen columns
-		this.rightPadding = this.table.rowManager.element.clientWidth + this.table.columnManager.scrollLeft;
+		if(column.parent.isGroup){
+			return this.frozenCheck(column.parent);
+		}else {
+			return column.definition.frozen;
+		}
 	}
 	
 	//layout calculation rows
@@ -10728,11 +10785,8 @@ class FrozenColumns extends Module{
 		var leftMargin = 0;
 		var rightMargin = 0;
 		
-		this.table.columnManager.headersElement.style.marginLeft = this.leftMargin;
-		this.table.columnManager.element.style.paddingRight = this.rightMargin;
-		
 		this.leftColumns.forEach((column, i) => {	
-			column.modules.frozen.marginValue = leftMargin + this.table.columnManager.scrollLeft;
+			column.modules.frozen.marginValue = leftMargin;
 			column.modules.frozen.margin = column.modules.frozen.marginValue + "px";
 			
 			if(column.visible){
@@ -10768,20 +10822,19 @@ class FrozenColumns extends Module{
 		
 		this.rightColumns.forEach((column, i) => {
 			
+			column.modules.frozen.marginValue = rightMargin;
+			column.modules.frozen.margin = column.modules.frozen.marginValue + "px";
+			
 			if(column.visible){
 				rightMargin += column.getWidth();
 			}
 			
-			column.modules.frozen.marginValue = this.rightPadding - rightMargin;
-			column.modules.frozen.margin = column.modules.frozen.marginValue + "px";
-			
 			if(i == this.rightColumns.length - 1){
 				column.modules.frozen.edge = true;
 			}else {
 				column.modules.frozen.edge = false;
 			}
 			
-			
 			if(column.parent.isGroup){
 				this.layoutElement(this.getColGroupParentElement(column), column);
 			}else {
@@ -10803,12 +10856,10 @@ class FrozenColumns extends Module{
 	//layout columns appropriately
 	layout(){	
 		if(this.active && !this.blocked){
-			//calculate row padding
-			this.calcMargins();
-			
+		
 			//calculate left columns
 			this.layoutColumnPosition();
-
+			
 			this.reinitializeRows();
 			
 			this.layoutCalcRows();
@@ -10831,11 +10882,6 @@ class FrozenColumns extends Module{
 	}
 	
 	layoutRow(row){
-		// console.trace("row")
-		var rowEl = row.getElement();
-		
-		rowEl.style.paddingLeft = this.leftMargin;
-		
 		if(this.table.options.layout === "fitDataFill" && this.rightColumns.length){
 			this.table.rowManager.getTableElement().style.minWidth = "calc(100% - " + this.rightMargin + ")";
 		}
@@ -10858,11 +10904,19 @@ class FrozenColumns extends Module{
 	}
 	
 	layoutElement(element, column){
+		var position;
 		
 		if(column.modules.frozen){
-			element.style.position = "absolute";
-			element.style.left = column.modules.frozen.margin;
-			
+			element.style.position = "sticky";
+
+			if(this.table.rtl){
+				position = column.modules.frozen.position === "left" ? "right" : "left";
+			}else {
+				position = column.modules.frozen.position;
+			}
+		
+			element.style[position] = column.modules.frozen.margin;
+
 			element.classList.add("tabulator-frozen");
 			
 			if(column.modules.frozen.edge){
@@ -10870,6 +10924,12 @@ class FrozenColumns extends Module{
 			}
 		}
 	}
+
+	adjustForScrollbar(width){
+		if(this.rightColumns.length){
+			this.table.columnManager.getContentsElement().style.width = "calc(100% - " + width + "px)";
+		}
+	}
 	
 	_calcSpace(columns, index){
 		var width = 0;
@@ -10910,7 +10970,7 @@ class FrozenRows extends Module{
 		this.topElement.classList.add("tabulator-frozen-rows-holder");
 
 		// this.table.columnManager.element.append(this.topElement);
-		this.table.columnManager.getElement().insertBefore(this.topElement, this.table.columnManager.headersElement.nextSibling);
+		this.table.columnManager.getContentsElement().insertBefore(this.topElement, this.table.columnManager.headersElement.nextSibling);
 
 		this.subscribe("row-deleting", this.detachRow.bind(this));
 		this.subscribe("rows-visible", this.visibleRows.bind(this));
@@ -11085,7 +11145,7 @@ class GroupComponent {
 	}
 
 	isVisible(){
-		return this._group._visible;
+		return this._group.visible;
 	}
 
 	show(){
@@ -11356,38 +11416,41 @@ class Group{
 		}
 	}
 	
-	getHeadersAndRows(noCalc){
+	getHeadersAndRows(){
 		var output = [];
 		
 		output.push(this);
 		
 		this._visSet();
 		
+		
+		if(this.calcs.top){
+			this.calcs.top.detachElement();
+			this.calcs.top.deleteCells();
+		}
+		
+		if(this.calcs.bottom){
+			this.calcs.bottom.detachElement();
+			this.calcs.bottom.deleteCells();
+		}
+		
+		
+		
 		if(this.visible){
 			if(this.groupList.length){
 				this.groupList.forEach(function(group){
-					output = output.concat(group.getHeadersAndRows(noCalc));
+					output = output.concat(group.getHeadersAndRows());
 				});
 				
 			}else {
-				if(!noCalc && this.groupManager.table.options.columnCalcs != "table" && this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.modules.columnCalcs.hasTopCalcs()){
-					if(this.calcs.top){
-						this.calcs.top.detachElement();
-						this.calcs.top.deleteCells();
-					}
-					
+				if(this.groupManager.table.options.columnCalcs != "table" && this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.modules.columnCalcs.hasTopCalcs()){
 					this.calcs.top = this.groupManager.table.modules.columnCalcs.generateTopRow(this.rows);
 					output.push(this.calcs.top);
 				}
 				
 				output = output.concat(this.rows);
 				
-				if(!noCalc && this.groupManager.table.options.columnCalcs != "table" &&  this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.modules.columnCalcs.hasBottomCalcs()){
-					if(this.calcs.bottom){
-						this.calcs.bottom.detachElement();
-						this.calcs.bottom.deleteCells();
-					}
-					
+				if(this.groupManager.table.options.columnCalcs != "table" &&  this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.modules.columnCalcs.hasBottomCalcs()){
 					this.calcs.bottom = this.groupManager.table.modules.columnCalcs.generateBottomRow(this.rows);
 					output.push(this.calcs.bottom);
 				}
@@ -11396,25 +11459,14 @@ class Group{
 			if(!this.groupList.length && this.groupManager.table.options.columnCalcs != "table"){
 				
 				if(this.groupManager.table.modExists("columnCalcs")){
-					
-					if(!noCalc && this.groupManager.table.modules.columnCalcs.hasTopCalcs()){
-						if(this.calcs.top){
-							this.calcs.top.detachElement();
-							this.calcs.top.deleteCells();
-						}
-						
+					if(this.groupManager.table.modules.columnCalcs.hasTopCalcs()){
 						if(this.groupManager.table.options.groupClosedShowCalcs){
 							this.calcs.top = this.groupManager.table.modules.columnCalcs.generateTopRow(this.rows);
 							output.push(this.calcs.top);
 						}
 					}
 					
-					if(!noCalc && this.groupManager.table.modules.columnCalcs.hasBottomCalcs()){
-						if(this.calcs.bottom){
-							this.calcs.bottom.detachElement();
-							this.calcs.bottom.deleteCells();
-						}
-						
+					if(this.groupManager.table.modules.columnCalcs.hasBottomCalcs()){						
 						if(this.groupManager.table.options.groupClosedShowCalcs){
 							this.calcs.bottom = this.groupManager.table.modules.columnCalcs.generateBottomRow(this.rows);
 							output.push(this.calcs.bottom);
@@ -11525,7 +11577,7 @@ class Group{
 					prev = rowEl;
 				});
 			}
-
+			
 			this.groupManager.updateGroupRows(true);
 		}else {
 			this.groupManager.updateGroupRows(true);
@@ -12092,6 +12144,9 @@ class GroupRows extends Module{
 			this.groupList.forEach(function(group){
 				group.wipe();
 			});
+			
+			this.groupList = [];
+			this.groups = {};
 		}
 	}
 	
@@ -12178,8 +12233,13 @@ class GroupRows extends Module{
 				this.assignRowToGroup(row, oldGroups);
 			});
 		}
+		
+		Object.values(oldGroups).forEach((group) => {
+			group.wipe();
+		});	
 	}
 	
+	
 	createGroup(groupID, level, oldGroups){
 		var groupKey = level + "_" + groupID,
 		group;
@@ -12993,6 +13053,8 @@ class Interaction extends Module{
 			rowMouseOver:"row-mouseover",
 			rowMouseOut:"row-mouseout",
 			rowMouseMove:"row-mousemove",
+			rowMouseDown:"row-mousedown",
+			rowMouseUp:"row-mouseup",
 			rowTap:"row",
 			rowDblTap:"row",
 			rowTapHold:"row",
@@ -13006,6 +13068,8 @@ class Interaction extends Module{
 			cellMouseOver:"cell-mouseover",
 			cellMouseOut:"cell-mouseout",
 			cellMouseMove:"cell-mousemove",
+			cellMouseDown:"cell-mousedown",
+			cellMouseUp:"cell-mouseup",
 			cellTap:"cell",
 			cellDblTap:"cell",
 			cellTapHold:"cell",
@@ -13019,6 +13083,8 @@ class Interaction extends Module{
 			headerMouseOver:"column-mouseover",
 			headerMouseOut:"column-mouseout",
 			headerMouseMove:"column-mousemove",
+			headerMouseDown:"column-mousedown",
+			headerMouseUp:"column-mouseup",
 			headerTap:"column",
 			headerDblTap:"column",
 			headerTapHold:"column",
@@ -13032,6 +13098,8 @@ class Interaction extends Module{
 			groupMouseOver:"group-mouseover",
 			groupMouseOut:"group-mouseout",
 			groupMouseMove:"group-mousemove",
+			groupMouseDown:"group-mousedown",
+			groupMouseUp:"group-mouseup",
 			groupTap:"group",
 			groupDblTap:"group",
 			groupTapHold:"group",
@@ -13074,6 +13142,8 @@ class Interaction extends Module{
 		this.registerColumnOption("headerMouseOver");
 		this.registerColumnOption("headerMouseOut");
 		this.registerColumnOption("headerMouseMove");
+		this.registerColumnOption("headerMouseDown");
+		this.registerColumnOption("headerMouseUp");
 		this.registerColumnOption("headerTap");
 		this.registerColumnOption("headerDblTap");
 		this.registerColumnOption("headerTapHold");
@@ -13086,6 +13156,8 @@ class Interaction extends Module{
 		this.registerColumnOption("cellMouseOver");
 		this.registerColumnOption("cellMouseOut");
 		this.registerColumnOption("cellMouseMove");
+		this.registerColumnOption("cellMouseDown");
+		this.registerColumnOption("cellMouseUp");
 		this.registerColumnOption("cellTap");
 		this.registerColumnOption("cellDblTap");
 		this.registerColumnOption("cellTapHold");
@@ -13600,18 +13672,22 @@ class Menu extends Module{
 		this.columnSubscribers = {};
 		
 		this.registerTableOption("menuContainer", undefined); //deprecated
-
+		
 		this.registerTableOption("rowContextMenu", false);
 		this.registerTableOption("rowClickMenu", false);
+		this.registerTableOption("rowDblClickMenu", false);
 		this.registerTableOption("groupContextMenu", false);
 		this.registerTableOption("groupClickMenu", false);
+		this.registerTableOption("groupDblClickMenu", false);
 		
 		this.registerColumnOption("headerContextMenu");
 		this.registerColumnOption("headerClickMenu");
+		this.registerColumnOption("headerDblClickMenu");
 		this.registerColumnOption("headerMenu");
 		this.registerColumnOption("headerMenuIcon");
 		this.registerColumnOption("contextMenu");
 		this.registerColumnOption("clickMenu");
+		this.registerColumnOption("dblClickMenu");
 		
 	}
 	
@@ -13622,7 +13698,7 @@ class Menu extends Module{
 		
 		this.subscribe("column-init", this.initializeColumn.bind(this));
 	}
-
+	
 	deprecatedOptionsCheck(){
 		if(!this.deprecationCheck("menuContainer", "popupContainer")){
 			this.table.options.popupContainer = this.table.options.menuContainer;
@@ -13638,6 +13714,10 @@ class Menu extends Module{
 		if(this.table.options.rowClickMenu){
 			this.subscribe("row-click", this.loadMenuEvent.bind(this, this.table.options.rowClickMenu));
 		}
+		
+		if(this.table.options.rowDblClickMenu){
+			this.subscribe("row-dblclick", this.loadMenuEvent.bind(this, this.table.options.rowDblClickMenu));
+		}
 	}
 	
 	initializeGroupWatchers(){
@@ -13649,6 +13729,10 @@ class Menu extends Module{
 		if(this.table.options.groupClickMenu){
 			this.subscribe("group-click", this.loadMenuEvent.bind(this, this.table.options.groupClickMenu));
 		}
+		
+		if(this.table.options.groupDblClickMenu){
+			this.subscribe("group-dblclick", this.loadMenuEvent.bind(this, this.table.options.groupDblClickMenu));
+		}
 	}
 	
 	initializeColumn(column){
@@ -13666,6 +13750,11 @@ class Menu extends Module{
 			this.subscribe("column-click", this.columnSubscribers.headerClickMenu);
 		}
 		
+		if(def.headerDblClickMenu && !this.columnSubscribers.headerDblClickMenu){
+			this.columnSubscribers.headerDblClickMenu = this.loadMenuTableColumnEvent.bind(this, "headerDblClickMenu");
+			this.subscribe("column-dblclick", this.columnSubscribers.headerDblClickMenu);
+		}
+		
 		if(def.headerMenu){
 			this.initializeColumnHeaderMenu(column);
 		}
@@ -13681,6 +13770,11 @@ class Menu extends Module{
 			this.columnSubscribers.clickMenu = this.loadMenuTableCellEvent.bind(this, "clickMenu");
 			this.subscribe("cell-click", this.columnSubscribers.clickMenu);
 		}
+		
+		if(def.dblClickMenu && !this.columnSubscribers.dblClickMenu){
+			this.columnSubscribers.dblClickMenu = this.loadMenuTableCellEvent.bind(this, "dblClickMenu");
+			this.subscribe("cell-dblclick", this.columnSubscribers.dblClickMenu);
+		}
 	}
 	
 	initializeColumnHeaderMenu(column){
@@ -13689,12 +13783,12 @@ class Menu extends Module{
 		
 		headerMenuEl = document.createElement("span");
 		headerMenuEl.classList.add("tabulator-header-popup-button");
-
+		
 		if(icon){
 			if(typeof icon === "function"){
 				icon = icon(column.getComponent());
 			}
-
+			
 			if(icon instanceof HTMLElement){
 				headerMenuEl.appendChild(icon);
 			}else {
@@ -13837,7 +13931,9 @@ class Menu extends Module{
 		});
 		
 		menuEl.addEventListener("click", (e) => {
-			this.rootPopup.hide();
+			if(this.rootPopup){
+				this.rootPopup.hide();
+			}
 		});
 		
 		popup.show(parentEl || e);
@@ -13851,9 +13947,9 @@ class Menu extends Module{
 					this.currentComponent = null;
 				}
 			});
-
+			
 			this.currentComponent = component;
-
+			
 			this.dispatchExternal("menuOpened", component.getComponent());
 		}
 	}
@@ -14024,7 +14120,7 @@ class MoveColumns extends Module{
 	
 	startMove(e, column){
 		var element = column.getElement(),
-		headerElement = this.table.columnManager.getElement(),
+		headerElement = this.table.columnManager.getContentsElement(),
 		headersElement = this.table.columnManager.getHeadersElement();
 		
 		this.moving = column;
@@ -14043,7 +14139,7 @@ class MoveColumns extends Module{
 		this.hoverElement = element.cloneNode(true);
 		this.hoverElement.classList.add("tabulator-moving");
 		
-		this.table.columnManager.getElement().appendChild(this.hoverElement);
+		headerElement.appendChild(this.hoverElement);
 		
 		this.hoverElement.style.left = "0";
 		this.hoverElement.style.bottom = (headerElement.clientHeight - headersElement.offsetHeight) + "px";
@@ -14125,7 +14221,7 @@ class MoveColumns extends Module{
 	}
 	
 	moveHover(e){
-		var columnHolder = this.table.columnManager.getElement(),
+		var columnHolder = this.table.columnManager.getContentsElement(),
 		scrollLeft = columnHolder.scrollLeft,
 		xPos = ((this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(columnHolder).left) + scrollLeft,
 		scrollPos;
@@ -15509,6 +15605,7 @@ class Page extends Module{
 		if(!this.initialLoad){
 			if(this.mode == "local" || force){
 				this.page = 1;
+				this.trackChanges();
 			}
 		}
 	}
@@ -16083,6 +16180,7 @@ class Persistence extends Module{
 			this.subscribe("group-changed", this.eventSave.bind(this, "group"));
 			this.subscribe("page-changed", this.eventSave.bind(this, "page"));
 			this.subscribe("column-resized", this.eventSave.bind(this, "columns"));
+			this.subscribe("column-width", this.eventSave.bind(this, "columns"));
 			this.subscribe("layout-refreshed", this.eventSave.bind(this, "columns"));
 		}
 
@@ -16405,15 +16503,24 @@ class Popup$1 extends Module{
 		
 		this.registerTableOption("rowContextPopup", false);
 		this.registerTableOption("rowClickPopup", false);
+		this.registerTableOption("rowDblClickPopup", false);
 		this.registerTableOption("groupContextPopup", false);
 		this.registerTableOption("groupClickPopup", false);
+		this.registerTableOption("groupDblClickPopup", false);
 		
 		this.registerColumnOption("headerContextPopup");
 		this.registerColumnOption("headerClickPopup");
+		this.registerColumnOption("headerDblClickPopup");
 		this.registerColumnOption("headerPopup");
 		this.registerColumnOption("headerPopupIcon");
 		this.registerColumnOption("contextPopup");
 		this.registerColumnOption("clickPopup");
+		this.registerColumnOption("dblClickPopup");
+
+		this.registerComponentFunction("cell", "popup", this._componentPopupCall.bind(this));
+		this.registerComponentFunction("column", "popup", this._componentPopupCall.bind(this));
+		this.registerComponentFunction("row", "popup", this._componentPopupCall.bind(this));
+		this.registerComponentFunction("group", "popup", this._componentPopupCall.bind(this));
 		
 	}
 	
@@ -16423,6 +16530,10 @@ class Popup$1 extends Module{
 		
 		this.subscribe("column-init", this.initializeColumn.bind(this));
 	}
+
+	_componentPopupCall(component, contents, position){
+		this.loadPopupEvent(contents, null, component, position);
+	}
 	
 	initializeRowWatchers(){
 		if(this.table.options.rowContextPopup){
@@ -16433,6 +16544,10 @@ class Popup$1 extends Module{
 		if(this.table.options.rowClickPopup){
 			this.subscribe("row-click", this.loadPopupEvent.bind(this, this.table.options.rowClickPopup));
 		}
+
+		if(this.table.options.rowDblClickPopup){
+			this.subscribe("row-dblclick", this.loadPopupEvent.bind(this, this.table.options.rowDblClickPopup));
+		}
 	}
 	
 	initializeGroupWatchers(){
@@ -16444,6 +16559,10 @@ class Popup$1 extends Module{
 		if(this.table.options.groupClickPopup){
 			this.subscribe("group-click", this.loadPopupEvent.bind(this, this.table.options.groupClickPopup));
 		}
+
+		if(this.table.options.groupDblClickPopup){
+			this.subscribe("group-dblclick", this.loadPopupEvent.bind(this, this.table.options.groupDblClickPopup));
+		}
 	}
 	
 	initializeColumn(column){
@@ -16459,6 +16578,11 @@ class Popup$1 extends Module{
 		if(def.headerClickPopup && !this.columnSubscribers.headerClickPopup){
 			this.columnSubscribers.headerClickPopup = this.loadPopupTableColumnEvent.bind(this, "headerClickPopup");
 			this.subscribe("column-click", this.columnSubscribers.headerClickPopup);
+		
+		
+		}if(def.headerDblClickPopup && !this.columnSubscribers.headerDblClickPopup){
+			this.columnSubscribers.headerDblClickPopup = this.loadPopupTableColumnEvent.bind(this, "headerDblClickPopup");
+			this.subscribe("column-dblclick", this.columnSubscribers.headerDblClickPopup);
 		}
 		
 		if(def.headerPopup){
@@ -16476,6 +16600,11 @@ class Popup$1 extends Module{
 			this.columnSubscribers.clickPopup = this.loadPopupTableCellEvent.bind(this, "clickPopup");
 			this.subscribe("cell-click", this.columnSubscribers.clickPopup);
 		}
+
+		if(def.dblClickPopup && !this.columnSubscribers.dblClickPopup){
+			this.columnSubscribers.dblClickPopup = this.loadPopupTableCellEvent.bind(this, "dblClickPopup");
+			this.subscribe("cell-click", this.columnSubscribers.dblClickPopup);
+		}
 	}
 	
 	initializeColumnHeaderPopup(column){
@@ -16529,7 +16658,7 @@ class Popup$1 extends Module{
 		}
 	}
 	
-	loadPopupEvent(contents, e, component){
+	loadPopupEvent(contents, e, component, position){
 		var renderedCallback;
 
 		function onRendered(callback){
@@ -16544,10 +16673,10 @@ class Popup$1 extends Module{
 		
 		contents = typeof contents == "function" ? contents.call(this.table, e, component.getComponent(),  onRendered) : contents;
 		
-		this.loadPopup(e, component, contents, renderedCallback);
+		this.loadPopup(e, component, contents, renderedCallback, position);
 	}
 	
-	loadPopup(e, component, contents, renderedCallback){
+	loadPopup(e, component, contents, renderedCallback, position){
 		var touch = !(e instanceof MouseEvent),
 		contentsEl, popup;
 		
@@ -16573,8 +16702,15 @@ class Popup$1 extends Module{
 		if(typeof renderedCallback === "function"){
 			popup.renderCallback(renderedCallback);
 		}
+
+		if(e){
+			popup.show(e);
+		}else {
+			popup.show(component.getElement(), position || "center");
+		}
+
 		
-		popup.show(e).hideOnBlur(() => {
+		popup.hideOnBlur(() => {
 			this.dispatchExternal("popupClosed", component.getComponent());
 		});
 
@@ -17191,15 +17327,32 @@ class ResizeColumns extends Module{
 			}
 		}
 	}
+
+	frozenColumnOffset(column){
+		var offset = false;
+
+		if(column.modules.frozen){
+			offset = column.modules.frozen.marginValue; 
+
+			if(column.modules.frozen.position === "left"){
+				offset += column.getWidth() - 3;
+			}else {
+				if(offset){
+					offset -= 3;
+				}
+			}
+		}
+
+		return offset !== false ? offset + "px" : false;
+	}
 	
 	reinitializeColumn(column){
-		var frozenOffset = column.modules.frozen ? (column.modules.frozen.marginValue + column.getWidth() + "px") : false;
-		
+		var frozenOffset = this.frozenColumnOffset(column);
 		
 		column.cells.forEach((cell) => {
 			if(cell.modules.resize && cell.modules.resize.handleEl){
 				if(frozenOffset){
-					cell.modules.resize.handleEl.style.left = frozenOffset;
+					cell.modules.resize.handleEl.style[column.modules.frozen.position] = frozenOffset;
 				}
 				
 				cell.element.after(cell.modules.resize.handleEl);
@@ -17208,7 +17361,7 @@ class ResizeColumns extends Module{
 		
 		if(column.modules.resize && column.modules.resize.handleEl){
 			if(frozenOffset){
-				column.modules.resize.handleEl.style.left = frozenOffset;
+				column.modules.resize.handleEl.style[column.modules.frozen.position] = frozenOffset;
 			}
 			
 			column.element.after(column.modules.resize.handleEl);
@@ -17260,8 +17413,8 @@ class ResizeColumns extends Module{
 			});
 			
 			if(column.modules.frozen){
-				handle.style.position = "absolute";
-				handle.style.left = column.modules.frozen.marginValue + column.getWidth() + "px";
+				handle.style.position = "sticky";
+				handle.style[column.modules.frozen.position] = this.frozenColumnOffset(column);
 			}
 			
 			config.handleEl = handle;
@@ -17373,6 +17526,8 @@ class ResizeColumns extends Module{
 			self.table.element.classList.remove("tabulator-block-select");
 			
 			if(self.startWidth !== column.getWidth()){
+				self.table.columnManager.verticalAlignHeaders();
+
 				self.dispatch("column-resized", column);
 				self.table.externalEvents.dispatch("columnResized", column.getComponent());
 			}
@@ -17565,7 +17720,7 @@ class ResizeTable extends Module{
 								this.containerHeight = table.element.parentNode.clientHeight;
 								this.containerWidth = table.element.parentNode.clientWidth;
 							}
-						
+							
 							this.redrawTable();
 						}
 					}
@@ -17617,17 +17772,16 @@ class ResizeTable extends Module{
 	initializeVisibilityObserver(){
 		this.visibilityObserver = new IntersectionObserver((entries) => {
 			this.visible = entries[0].isIntersecting;
-
+			
 			if(!this.initialized){
 				this.initialized = true;
 				this.initialRedraw = !this.visible;
+			}else {
+				if(this.visible){
+					this.redrawTable(this.initialRedraw);
+					this.initialRedraw = false;
+				}
 			}
-
-			if(this.visible){
-				this.redrawTable(this.initialRedraw);
-				this.initialRedraw = false;
-			}
-			
 		});
 		
 		this.visibilityObserver.observe(this.table.element);
@@ -17848,22 +18002,21 @@ class ResponsiveLayout extends Module{
 
 	//redraw columns to fit space
 	update(){
-		var self = this,
-		working = true;
+		var working = true;
 
 		while(working){
 
-			let width = self.table.modules.layout.getMode() == "fitColumns" ? self.table.columnManager.getFlexBaseWidth() : self.table.columnManager.getWidth();
+			let width = this.table.modules.layout.getMode() == "fitColumns" ? this.table.columnManager.getFlexBaseWidth() : this.table.columnManager.getWidth();
 
-			let diff = (self.table.options.headerVisible ? self.table.columnManager.element.clientWidth : self.table.element.clientWidth) - width;
+			let diff = (this.table.options.headerVisible ? this.table.columnManager.element.clientWidth : this.table.element.clientWidth) - width;
 
 			if(diff < 0){
 				//table is too wide
-				let column = self.columns[self.index];
+				let column = this.columns[this.index];
 
 				if(column){
-					self.hideColumn(column);
-					self.index ++;
+					this.hideColumn(column);
+					this.index ++;
 				}else {
 					working = false;
 				}
@@ -17871,13 +18024,13 @@ class ResponsiveLayout extends Module{
 			}else {
 
 				//table has spare space
-				let column = self.columns[self.index -1];
+				let column = this.columns[this.index -1];
 
 				if(column){
 					if(diff > 0){
 						if(diff >= column.getWidth()){
-							self.showColumn(column);
-							self.index --;
+							this.showColumn(column);
+							this.index --;
 						}else {
 							working = false;
 						}
@@ -17889,18 +18042,17 @@ class ResponsiveLayout extends Module{
 				}
 			}
 
-			if(!self.table.rowManager.activeRowsCount){
-				self.table.rowManager.renderEmptyScroll();
+			if(!this.table.rowManager.activeRowsCount){
+				this.table.rowManager.renderEmptyScroll();
 			}
 		}
 	}
 
 	generateCollapsedContent(){
-		var self = this,
-		rows = this.table.rowManager.getDisplayRows();
+		var rows = this.table.rowManager.getDisplayRows();
 
-		rows.forEach(function(row){
-			self.generateCollapsedRowContent(row);
+		rows.forEach((row) => {
+			this.generateCollapsedRowContent(row);
 		});
 	}
 
@@ -17920,16 +18072,15 @@ class ResponsiveLayout extends Module{
 	}
 
 	generateCollapsedRowData(row){
-		var self = this,
-		data = row.getData(),
+		var data = row.getData(),
 		output = [],
 		mockCellComponent;
 
-		this.hiddenColumns.forEach(function(column){
+		this.hiddenColumns.forEach((column) => {
 			var value = column.getFieldValue(data);
 
 			if(column.definition.title && column.field){
-				if(column.modules.format && self.table.options.responsiveLayoutCollapseUseFormatters){
+				if(column.modules.format && this.table.options.responsiveLayoutCollapseUseFormatters){
 
 					mockCellComponent = {
 						value:false,
@@ -17949,6 +18100,9 @@ class ResponsiveLayout extends Module{
 						getColumn:function(){
 							return column.getComponent();
 						},
+						getTable:() => {
+							return this.table;
+						},
 					};
 
 					function onRendered(callback){
@@ -17958,7 +18112,7 @@ class ResponsiveLayout extends Module{
 					output.push({
 						field: column.field,
 						title: column.definition.title,
-						value: column.modules.format.formatter.call(self.table.modules.format, mockCellComponent, column.modules.format.params, onRendered)
+						value: column.modules.format.formatter.call(this.table.modules.format, mockCellComponent, column.modules.format.params, onRendered)
 					});
 				}else {
 					output.push({
@@ -18722,6 +18876,7 @@ class Sort extends Module{
 		this.registerTableOption("columnHeaderSortMulti", true); //multiple or single column sorting
 		this.registerTableOption("sortOrderReverse", false); //reverse internal sort ordering
 		this.registerTableOption("headerSortElement", "<div class='tabulator-arrow'></div>"); //header sort element
+		this.registerTableOption("headerSortClickElement", "header"); //element which triggers sort when clicked
 
 		this.registerColumnOption("sorter");
 		this.registerColumnOption("sorterParams");
@@ -18819,10 +18974,21 @@ class Sort extends Module{
 
 			colEl.classList.add("tabulator-sortable");
 
-
 			arrowEl = document.createElement("div");
 			arrowEl.classList.add("tabulator-col-sorter");
 
+			switch(this.table.options.headerSortClickElement){
+				case "icon":
+					arrowEl.classList.add("tabulator-col-sorter-element");
+					break;
+				case "header":
+					colEl.classList.add("tabulator-col-sorter-element");
+					break;
+				default:
+					colEl.classList.add("tabulator-col-sorter-element");
+					break;
+			}
+
 			switch(this.table.options.headerSortElement){
 				case "function":
 					//do nothing
@@ -18844,7 +19010,7 @@ class Sort extends Module{
 			this.setColumnHeaderSortIcon(column, "none");
 
 			//sort on click
-			colEl.addEventListener("click", (e) => {
+			(this.table.options.headerSortClickElement === "icon" ? arrowEl : colEl).addEventListener("click", (e) => {
 				var dir = "",
 				sorters=[],
 				match = false;
@@ -20115,7 +20281,7 @@ class VirtualDomHorizontal extends Renderer{
 		this.windowBuffer = 200; //pixel margin to make column visible before it is shown on screen
 		
 		this.visibleRows = null;
-
+		
 		this.initialized = false;
 		this.isFitData = false;
 		
@@ -20128,53 +20294,29 @@ class VirtualDomHorizontal extends Renderer{
 		this.vertScrollListen();
 	}
 	
-	compatibilityCheck(){
-		var columns = this.options("columns"),
-		frozen = false,
-		ok = true;
-		
+	compatibilityCheck(){		
 		if(this.options("layout") == "fitDataTable"){
 			console.warn("Horizontal Virtual DOM is not compatible with fitDataTable layout mode");
-			ok = false;
 		}
 		
 		if(this.options("responsiveLayout")){
 			console.warn("Horizontal Virtual DOM is not compatible with responsive columns");
-			ok = false;
 		}
 		
 		if(this.options("rtl")){
 			console.warn("Horizontal Virtual DOM is not currently compatible with RTL text direction");
-			ok = false;
-		}
-		
-		if(columns){
-			frozen = columns.find((col) => {
-				return col.frozen;
-			});
-			
-			if(frozen){
-				console.warn("Horizontal Virtual DOM is not compatible with frozen columns");
-				ok = false;
-			}
 		}
-		
-		// if(!ok){
-		// 	options.virtualDomHoz = false;
-		// }
-		
-		return ok;
 	}
 	
 	layoutCheck(){
 		this.isFitData = this.options("layout").startsWith('fitData');
 	}
-
+	
 	vertScrollListen(){
 		this.subscribe("scroll-vertical", this.clearVisRowCache.bind(this));
 		this.subscribe("data-refreshed", this.clearVisRowCache.bind(this));
 	}
-
+	
 	clearVisRowCache(){
 		this.visibleRows = null;
 	}
@@ -20186,7 +20328,7 @@ class VirtualDomHorizontal extends Renderer{
 	renderColumns(row, force){
 		this.dataChange();
 	}
-
+	
 	
 	scrollColumns(left, dir){
 		if(this.scrollLeft != left){
@@ -20220,7 +20362,6 @@ class VirtualDomHorizontal extends Renderer{
 		},
 		colPos = 0;
 		
-		
 		if(update && !this.initialized){
 			return;
 		}
@@ -20235,41 +20376,44 @@ class VirtualDomHorizontal extends Renderer{
 		this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.windowBuffer;
 		
 		this.table.columnManager.columnsByIndex.forEach((column) => {
-			var config = {};
+			var config = {},
+			width;
 			
 			if(column.visible){
-				var width = column.getWidth();
-				
-				config.leftPos = colPos;
-				config.rightPos = colPos + width;
-				
-				config.width = width;
-				
-				if (this.isFitData) {
-					config.fitDataCheck = column.modules.vdomHoz ? column.modules.vdomHoz.fitDataCheck : true;
-				}
-				
-				if((colPos + width > this.vDomScrollPosLeft) && (colPos < this.vDomScrollPosRight)){
-					//column is visible
+				if(!column.modules.frozen){			
+					width = column.getWidth();
+
+					config.leftPos = colPos;
+					config.rightPos = colPos + width;
 					
-					if(this.leftCol == -1){
-						this.leftCol = this.columns.length;
-						this.vDomPadLeft = colPos;
+					config.width = width;
+					
+					if (this.isFitData) {
+						config.fitDataCheck = column.modules.vdomHoz ? column.modules.vdomHoz.fitDataCheck : true;
 					}
 					
-					this.rightCol = this.columns.length;
-				}else {
-					// column is hidden
-					if(this.leftCol !== -1){
-						this.vDomPadRight += width;
+					if((colPos + width > this.vDomScrollPosLeft) && (colPos < this.vDomScrollPosRight)){
+						//column is visible
+						
+						if(this.leftCol == -1){
+							this.leftCol = this.columns.length;
+							this.vDomPadLeft = colPos;
+						}
+						
+						this.rightCol = this.columns.length;
+					}else {
+						// column is hidden
+						if(this.leftCol !== -1){
+							this.vDomPadRight += width;
+						}
 					}
+					
+					this.columns.push(column);
+					
+					column.modules.vdomHoz = config;
+					
+					colPos += width;
 				}
-				
-				this.columns.push(column);
-				
-				column.modules.vdomHoz = config;
-				
-				colPos += width;
 			}
 		});
 		
@@ -20361,7 +20505,7 @@ class VirtualDomHorizontal extends Renderer{
 					}
 					
 					rowEl.parentNode.removeChild(rowEl);
-
+					
 					this.rerenderColumns(false, true);
 				}
 			}
@@ -20390,24 +20534,30 @@ class VirtualDomHorizontal extends Renderer{
 	}
 	
 	reinitializeRows(){
-		var rows = this.getVisibleRows();
-		rows.forEach((row) => {
+		var visibleRows = this.getVisibleRows(),
+		otherRows = this.table.rowManager.getRows().filter(row => !visibleRows.includes(row));
+
+		visibleRows.forEach((row) => {
 			this.reinitializeRow(row, true);
 		});
+
+		otherRows.forEach((row) =>{
+			row.deinitialize();
+		});
 	}
 	
 	getVisibleRows(){
 		if (!this.visibleRows){
 			this.visibleRows = this.table.rowManager.getVisibleRows();
 		}
-
+		
 		return this.visibleRows;	
 	}
 	
 	scroll(diff){
 		this.vDomScrollPosLeft += diff;
 		this.vDomScrollPosRight += diff;
-
+		
 		if(Math.abs(diff) > (this.windowBuffer / 2)){
 			this.rerenderColumns();
 		}else {
@@ -20437,7 +20587,7 @@ class VirtualDomHorizontal extends Renderer{
 		working = true;
 		
 		while(working){
-			
+
 			let column = this.columns[this.rightCol + 1];
 			
 			if(column){
@@ -20447,7 +20597,7 @@ class VirtualDomHorizontal extends Renderer{
 					this.getVisibleRows().forEach((row) => {
 						if(row.type !== "group"){
 							var cell = row.getCell(column);
-							row.getElement().appendChild(cell.getElement());
+							row.getElement().insertBefore(cell.getElement(), row.getCell(this.columns[this.rightCol]).getElement().nextSibling);
 							cell.cellRendered();
 						}
 					});
@@ -20455,6 +20605,12 @@ class VirtualDomHorizontal extends Renderer{
 					this.fitDataColActualWidthCheck(column);
 					
 					this.rightCol++; // Don't move this below the >= check below
+
+					this.getVisibleRows().forEach((row) => {
+						if(row.type !== "group"){
+							row.modules.vdomHoz.rightCol = this.rightCol;
+						}
+					});
 					
 					if(this.rightCol >= (this.columns.length - 1)){
 						this.vDomPadRight = 0;
@@ -20488,12 +20644,18 @@ class VirtualDomHorizontal extends Renderer{
 					this.getVisibleRows().forEach((row) => {
 						if(row.type !== "group"){
 							var cell = row.getCell(column);
-							row.getElement().prepend(cell.getElement());
+							row.getElement().insertBefore(cell.getElement(), row.getCell(this.columns[this.leftCol]).getElement());
 							cell.cellRendered();
 						}
 					});
 					
 					this.leftCol--; // don't move this below the <= check below
+
+					this.getVisibleRows().forEach((row) => {
+						if(row.type !== "group"){
+							row.modules.vdomHoz.leftCol = this.leftCol;
+						}
+					});
 					
 					if(this.leftCol <= 0){ // replicating logic in addColRight
 						this.vDomPadLeft = 0;
@@ -20546,6 +20708,12 @@ class VirtualDomHorizontal extends Renderer{
 					
 					this.vDomPadRight += column.getWidth();
 					this.rightCol --;
+
+					this.getVisibleRows().forEach((row) => {
+						if(row.type !== "group"){
+							row.modules.vdomHoz.rightCol = this.rightCol;
+						}
+					});
 				}else {
 					working = false;
 				}
@@ -20562,7 +20730,7 @@ class VirtualDomHorizontal extends Renderer{
 	removeColLeft(){
 		var changes = false,
 		working = true;
-		
+
 		while(working){
 			let column = this.columns[this.leftCol];
 			
@@ -20584,6 +20752,12 @@ class VirtualDomHorizontal extends Renderer{
 					
 					this.vDomPadLeft += column.getWidth();
 					this.leftCol ++;
+
+					this.getVisibleRows().forEach((row) => {
+						if(row.type !== "group"){
+							row.modules.vdomHoz.leftCol = this.leftCol;
+						}
+					});
 				}else {
 					working = false;
 				}
@@ -20624,26 +20798,41 @@ class VirtualDomHorizontal extends Renderer{
 				leftCol:this.leftCol,
 				rightCol:this.rightCol,
 			};
-			
+
+			if(this.table.modules.frozenColumns){
+				this.table.modules.frozenColumns.leftColumns.forEach((column) => {
+					this.appendCell(row, column);
+				});
+			}
+
 			for(let i = this.leftCol; i <= this.rightCol; i++){
-				let column = this.columns[i];
-				
-				if(column && column.visible){
-					let cell = row.getCell(column);
-					
-					row.getElement().appendChild(cell.getElement());
-					cell.cellRendered();
-				}
+				this.appendCell(row, this.columns[i]);
+			}
+
+			if(this.table.modules.frozenColumns){
+				this.table.modules.frozenColumns.rightColumns.forEach((column) => {
+					this.appendCell(row, column);
+				});
 			}
 		}
 	}
 	
+	appendCell(row, column){
+		if(column && column.visible){
+			let cell = row.getCell(column);
+			
+			row.getElement().appendChild(cell.getElement());
+			cell.cellRendered();
+		}
+	}
+	
 	reinitializeRow(row, force){
 		if(row.type !== "group"){
 			if(force || !row.modules.vdomHoz || row.modules.vdomHoz.leftCol !== this.leftCol || row.modules.vdomHoz.rightCol !== this.rightCol){
+				
 				var rowEl = row.getElement();
 				while(rowEl.firstChild) rowEl.removeChild(rowEl.firstChild);
-				
+
 				this.initializeRow(row);
 			}
 		}
@@ -20657,6 +20846,7 @@ class ColumnManager extends CoreFeature {
 		
 		this.blockHozScrollEvent = false;
 		this.headersElement = null;
+		this.contentsElement = null;
 		this.element = null ; //containing element
 		this.columns = []; // column definition object
 		this.columnsByIndex = []; //columns by index
@@ -20676,11 +20866,22 @@ class ColumnManager extends CoreFeature {
 		this.initializeRenderer();
 		
 		this.headersElement = this.createHeadersElement();
+		this.contentsElement = this.createHeaderContentsElement();
 		this.element = this.createHeaderElement();
 		
-		this.element.insertBefore(this.headersElement, this.element.firstChild);
+		this.contentsElement.insertBefore(this.headersElement, this.contentsElement.firstChild);
+		this.element.insertBefore(this.contentsElement, this.element.firstChild);
 		
 		this.subscribe("scroll-horizontal", this.scrollHorizontal.bind(this));
+		this.subscribe("scrollbar-vertical", this.padVerticalScrollbar.bind(this));
+	}
+
+	padVerticalScrollbar(width){
+		if(this.table.rtl){
+			this.headersElement.style.marginLeft = width + "px";
+		}else {
+			this.headersElement.style.marginRight = width + "px";
+		}
 	}
 	
 	initializeRenderer(){
@@ -20714,6 +20915,15 @@ class ColumnManager extends CoreFeature {
 		
 		return el;
 	}
+
+	createHeaderContentsElement (){
+		var el = document.createElement("div");
+		
+		el.classList.add("tabulator-header-contents");
+		el.setAttribute("role", "rowgroup");
+		
+		return el;
+	}
 	
 	createHeaderElement (){
 		var el = document.createElement("div");
@@ -20732,6 +20942,12 @@ class ColumnManager extends CoreFeature {
 	getElement(){
 		return this.element;
 	}
+
+	//return containing contents element
+	getContentsElement(){
+		return this.contentsElement;
+	}
+	
 	
 	//return header containing element
 	getHeadersElement(){
@@ -20740,20 +20956,8 @@ class ColumnManager extends CoreFeature {
 	
 	//scroll horizontally to match table body
 	scrollHorizontal(left){
-		var hozAdjust = 0,
-		scrollWidth = this.element.scrollWidth - this.table.element.clientWidth;
-		
-		// this.tempScrollBlock();
-		this.element.scrollLeft = left;
-		
-		//adjust for vertical scrollbar moving table when present
-		if(left > scrollWidth){
-			hozAdjust = left - scrollWidth;
-			this.element.style.marginLeft = (-(hozAdjust)) + "px";
-		}else {
-			this.element.style.marginLeft = 0;
-		}
-		
+		this.contentsElement.scrollLeft = left;
+
 		this.scrollLeft = left;
 		
 		this.renderer.scrollColumns(left);
@@ -22045,6 +22249,8 @@ class RowManager extends CoreFeature{
 		
 		this.dataPipeline = []; //hold data pipeline tasks
 		this.displayPipeline = []; //hold data display pipeline tasks
+
+		this.scrollbarWidth = 0;
 		
 		this.renderer = null;
 	}
@@ -22727,6 +22933,10 @@ class RowManager extends CoreFeature{
 				//case to handle scenario when trying to skip past end stage
 				this.regenerateRowPositions();
 		}
+
+		if(this.getDisplayRows().length){
+			this._clearPlaceholder();
+		}
 	}
 	
 	//regenerate row positions
@@ -22833,10 +23043,26 @@ class RowManager extends CoreFeature{
 			if(!this.fixedHeight){
 				this.adjustTableSize();
 			}
+
+			this.scrollBarCheck();
 			
 			this.dispatchExternal("renderComplete");
 		}
 	}
+
+	scrollBarCheck(){
+		var scrollbarWidth = 0;
+
+		//adjust for vertical scrollbar moving table when present
+		if(this.element.scrollHeight > this.element.clientHeight){
+			scrollbarWidth = this.element.offsetWidth - this.element.clientWidth;
+		}
+
+		if(scrollbarWidth !== this.scrollbarWidth){
+			this.scrollbarWidth = scrollbarWidth;
+			this.dispatch("scrollbar-vertical", scrollbarWidth);
+		}
+	}
 	
 	initializeRenderer(){
 		var renderClass;
@@ -22899,6 +23125,8 @@ class RowManager extends CoreFeature{
 		if(!this.displayRowsCount){
 			this._showPlaceholder();
 		}
+
+		this.scrollBarCheck();
 		
 		this.dispatchExternal("renderComplete");
 	}
@@ -22997,6 +23225,8 @@ class RowManager extends CoreFeature{
 					this.redraw();
 				}
 			}
+
+			this.scrollBarCheck();
 		}
 		
 		this._positionPlaceholder();
@@ -23183,6 +23413,8 @@ class InteractionManager extends CoreFeature {
 			"mouseover",
 			"mouseout",
 			"mousemove",
+			"mouseup",
+			"mousedown",
 			"touchstart",
 			"touchend",
 		];