tabulator-tables 5.1.3 → 5.1.6

package/dist/js/tabulator_esm.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.1.3 (c) Oliver Folkerd 2022 */
+/* Tabulator v5.1.6 (c) Oliver Folkerd 2022 */
 class CoreFeature{
 
 	constructor(table){
@@ -2847,6 +2847,8 @@ class Row extends CoreFeature{
 
 			this.generateCells();
 
+			this.initialized = true;
+
 			this.table.columnManager.renderer.renderRowCells(this);
 
 			if(force){
@@ -2855,8 +2857,6 @@ class Row extends CoreFeature{
 
 			this.dispatch("row-layout", this);
 
-			this.initialized = true;
-
 			if(this.table.options.rowFormatter){
 				this.table.options.rowFormatter(this.getComponent());
 			}
@@ -7906,10 +7906,10 @@ class Export extends Module{
 		rowEl.classList.add("tabulator-print-table-row");
 
 		row.columns.forEach((col) => {
-
 			if(col){
 				var cellEl = document.createElement("td"),
 				column = col.component._column,
+				index = this.table.columnManager.findColumnIndex(column),
 				value = col.value;
 
 				var cellWrapper = {
@@ -7968,8 +7968,8 @@ class Export extends Module{
 					cellEl.innerHTML = value;
 				}
 
-				if(styles.firstCell){
-					this.mapElementStyles(styles.firstCell, cellEl, ["padding-top", "padding-left", "padding-right", "padding-bottom", "border-top", "border-left", "border-right", "border-bottom", "color", "font-weight", "font-family", "font-size"]);
+				if(styles.styleCells[index] || styles.firstCell){
+					this.mapElementStyles(styles.styleCells[index] || styles.firstCell, cellEl, ["padding-top", "padding-left", "padding-right", "padding-bottom", "border-top", "border-left", "border-right", "border-bottom", "color", "font-weight", "font-family", "font-size", "text-align"]);
 
 					if(column.definition.align){
 						cellEl.style.textAlign = column.definition.align;
@@ -8572,7 +8572,9 @@ class Filter extends Module{
 				editorElement.addEventListener("focus", (e) => {
 					var left = this.table.columnManager.element.scrollLeft;
 
-					if(left !== this.table.rowManager.element.scrollLeft){
+					var headerPos = this.table.rowManager.element.scrollLeft + parseInt(this.table.columnManager.element.style.marginLeft);
+
+					if(left !== headerPos){
 						this.table.rowManager.scrollHorizontal(left);
 						this.table.columnManager.scrollHorizontal(left);
 					}
@@ -9582,8 +9584,9 @@ function rowSelection(cell, formatterParams, onRendered){
 	var blocked = false;
 
 	checkbox.type = 'checkbox';
-	
 
+	checkbox.setAttribute("aria-label", "Select Row");
+	
 	if(this.table.modExists("selectRow", true)){
 
 		checkbox.addEventListener("click", (e) => {
@@ -9863,10 +9866,10 @@ Format.moduleName = "format";
 Format.formatters = defaultFormatters;
 
 class FrozenColumns extends Module{
-
+	
 	constructor(table){
 		super(table);
-
+		
 		this.leftColumns = [];
 		this.rightColumns = [];
 		this.leftMargin = 0;
@@ -9876,10 +9879,10 @@ class FrozenColumns extends Module{
 		this.active = false;
 		this.scrollEndTimer = false;
 		this.blocked = true;
-
+		
 		this.registerColumnOption("frozen");
 	}
-
+	
 	//reset initial state
 	reset(){
 		this.initializationMode = "left";
@@ -9889,11 +9892,11 @@ class FrozenColumns extends Module{
 		this.rightMargin = 0;
 		this.rightMargin = 0;
 		this.active = false;
-
+		
 		this.table.columnManager.headersElement.style.marginLeft = 0;
 		this.table.columnManager.element.style.paddingRight = 0;
 	}
-
+	
 	initialize(){
 		this.subscribe("cell-layout", this.layoutCell.bind(this));
 		this.subscribe("column-init", this.initializeColumn.bind(this));
@@ -9906,183 +9909,191 @@ class FrozenColumns extends Module{
 		this.subscribe("layout-refreshing", this.blockLayout.bind(this));
 		this.subscribe("layout-refreshed", this.unblockLayout.bind(this));
 	}
-
+	
 	blockLayout(){
 		this.blocked = true;
 	}
-
+	
 	unblockLayout(){
 		this.blocked = false;
 	}
-
+	
 	layoutCell(cell){
 		this.layoutElement(cell.element, cell.column);
 	}
-
+	
 	//initialize specific column
 	initializeColumn(column){
 		var config = {margin:0, edge:false};
-
+		
 		if(!column.isGroup){
-
+			
 			if(this.frozenCheck(column)){
-
+				
 				config.position = this.initializationMode;
-
+				
 				if(this.initializationMode == "left"){
 					this.leftColumns.push(column);
 				}else {
 					this.rightColumns.unshift(column);
 				}
-
+				
 				this.active = true;
-
+				
 				column.modules.frozen = config;
 			}else {
 				this.initializationMode = "right";
 			}
 		}
 	}
-
+	
 	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(){
 		var rows;
-
+		
 		if(this.active){
 			clearTimeout(this.scrollEndTimer);
 
-			//layout all rows after scroll is complete
-			this.scrollEndTimer = setTimeout(() => {
-				this.layout();
-			}, 100);
-
 			rows = this.table.rowManager.getVisibleRows();
-
-			this.calcMargins();
-
+			
+			this.calcMargins(true);
+			
 			this.layoutColumnPosition();
-
+			
 			this.layoutCalcRows();
-
+			
 			rows.forEach((row) => {
 				if(row.type === "row"){
 					this.layoutRow(row);
 				}
 			});
-
-			this.table.rowManager.tableElement.style.marginRight = this.rightMargin;
 		}
 	}
-
+	
 	//calculate margins for rows
-	calcMargins(){
-		this.leftMargin = this._calcSpace(this.leftColumns, this.leftColumns.length) + "px";
-		this.table.columnManager.headersElement.style.marginLeft = this.leftMargin;
-
-		this.rightMargin = this._calcSpace(this.rightColumns, this.rightColumns.length) + "px";
-		this.table.columnManager.element.style.paddingRight = this.rightMargin;
-
+	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;
+		}
+	
 		//calculate right frozen columns
 		this.rightPadding = this.table.rowManager.element.clientWidth + this.table.columnManager.scrollLeft;
 	}
-
+	
 	//layout calculation rows
 	layoutCalcRows(){
 		if(this.table.modExists("columnCalcs")){
 			if(this.table.modules.columnCalcs.topInitialized && this.table.modules.columnCalcs.topRow){
 				this.layoutRow(this.table.modules.columnCalcs.topRow);
 			}
-
+			
 			if(this.table.modules.columnCalcs.botInitialized && this.table.modules.columnCalcs.botRow){
 				this.layoutRow(this.table.modules.columnCalcs.botRow);
 			}
-
+			
 			if(this.table.modExists("groupRows")){
 				this.layoutGroupCalcs(this.table.modules.groupRows.getGroups());
 			}
 		}
 	}
-
+	
 	layoutGroupCalcs(groups){
 		groups.forEach((group) => {
 			if(group.calcs.top){
 				this.layoutRow(group.calcs.top);
 			}
-
+			
 			if(group.calcs.bottom){
 				this.layoutRow(group.calcs.bottom);
 			}
-
+			
 			if(group.groupList && group.groupList.length){
 				this.layoutGroupCalcs(group.groupList && group.groupList);
 			}
 		});
 	}
-
+	
 	//calculate column positions and layout headers
 	layoutColumnPosition(allCells){
-
 		var leftParents = [];
+		
+		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.margin = (this._calcSpace(this.leftColumns, i) + this.table.columnManager.scrollLeft) + "px";
+		this.leftColumns.forEach((column, i) => {	
+			column.modules.frozen.margin = (leftMargin + this.table.columnManager.scrollLeft) + "px";
 
+			if(column.visible){
+				leftMargin += column.getWidth();
+			}
+			
 			if(i == this.leftColumns.length - 1){
 				column.modules.frozen.edge = true;
 			}else {
 				column.modules.frozen.edge = false;
 			}
-
+			
 			if(column.parent.isGroup){
 				var parentEl = this.getColGroupParentElement(column);
 				if(!leftParents.includes(parentEl)){
 					this.layoutElement(parentEl, column);
 					leftParents.push(parentEl);
 				}
-
+				
 				if(column.modules.frozen.edge){
 					parentEl.classList.add("tabulator-frozen-" + column.modules.frozen.position);
 				}
 			}else {
 				this.layoutElement(column.getElement(), column);
 			}
-
+			
 			if(allCells){
 				column.cells.forEach((cell) => {
 					this.layoutElement(cell.getElement(true), column);
 				});
 			}
 		});
-
+		
 		this.rightColumns.forEach((column, i) => {
-			column.modules.frozen.margin = (this.rightPadding - this._calcSpace(this.rightColumns, i + 1)) + "px";
 
+			if(column.visible){
+				rightMargin += column.getWidth();
+			}
+
+			column.modules.frozen.margin = (this.rightPadding - rightMargin) + "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 {
 				this.layoutElement(column.getElement(), column);
 			}
-
+			
 			if(allCells){
 				column.cells.forEach((cell) => {
 					this.layoutElement(cell.getElement(true), column);
@@ -10090,82 +10101,79 @@ class FrozenColumns extends Module{
 			}
 		});
 	}
-
+	
 	getColGroupParentElement(column){
 		return column.parent.isGroup ? this.getColGroupParentElement(column.parent) : column.getElement();
 	}
-
+	
 	//layout columns appropriately
 	layout(){
-
 		if(this.active && !this.blocked){
 			//calculate row padding
 			this.calcMargins();
-
+			
 			this.table.rowManager.getDisplayRows().forEach((row) =>{
 				if(row.type === "row"){
 					this.layoutRow(row);
 				}
 			});
-
+			
 			this.layoutCalcRows();
-
+			
 			//calculate left columns
 			this.layoutColumnPosition(true);
-
-			this.table.rowManager.tableElement.style.marginRight = this.rightMargin;
 		}
 	}
-
+	
 	layoutRow(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 + ")";
 		}
-
+		
 		this.leftColumns.forEach((column) => {
 			var cell = row.getCell(column);
-
+			
 			if(cell){
 				this.layoutElement(cell.getElement(true), column);
 			}
 		});
-
+		
 		this.rightColumns.forEach((column) => {
 			var cell = row.getCell(column);
-
+			
 			if(cell){
 				this.layoutElement(cell.getElement(true), column);
 			}
 		});
 	}
-
+	
 	layoutElement(element, column){
-
+		
 		if(column.modules.frozen){
 			element.style.position = "absolute";
 			element.style.left = column.modules.frozen.margin;
-
+			
 			element.classList.add("tabulator-frozen");
-
+			
 			if(column.modules.frozen.edge){
 				element.classList.add("tabulator-frozen-" + column.modules.frozen.position);
 			}
 		}
 	}
-
+	
 	_calcSpace(columns, index){
 		var width = 0;
-
+		
 		for (let i = 0; i < index; i++){
 			if(columns[i].visible){
 				width += columns[i].getWidth();
 			}
 		}
-
+		
 		return width;
 	}
 }
@@ -13139,13 +13147,11 @@ class Menu extends Module{
 		}
 		
 		//move menu to start on bottom edge if it is too close to the edge of the screen
-		if((y + element.offsetHeight) >= this.menuContainer.offsetHeight){
-			element.style.top = "";
-			
+		if((y + element.offsetHeight) > this.menuContainer.offsetHeight) {
 			if(parentEl){
-				element.style.bottom = (this.menuContainer.offsetHeight - parentOffset.top - parentEl.offsetHeight - 1) + "px";
+				element.style.top = (parseInt(element.style.top) - element.offsetHeight + parentEl.offsetHeight + 1) + "px";
 			}else {
-				element.style.bottom = (this.menuContainer.offsetHeight - y) + "px";
+				element.style.top = (parseInt(element.style.top) - element.offsetHeight) + "px";
 			}
 		}
 	}
@@ -14253,28 +14259,36 @@ function rows(pageSize, currentRow, currentPage, totalRows, totalPages){
 	ofEl = document.createElement("span"),
 	totalEl = document.createElement("span"),
 	rowsEl = document.createElement("span");
-	
+
 	this.table.modules.localize.langBind("pagination|counter|showing", (value) => {
 		showingEl.innerHTML = value;
 	});
-	
-	valueEl.innerHTML = " " + currentRow + "-" + Math.min((currentRow + pageSize - 1), totalRows) + " ";
-	
+
 	this.table.modules.localize.langBind("pagination|counter|of", (value) => {
 		ofEl.innerHTML = value;
 	});
-	
-	totalEl.innerHTML = " " + totalRows + " ";
-	
+
 	this.table.modules.localize.langBind("pagination|counter|rows", (value) => {
 		rowsEl.innerHTML = value;
 	});
-	
-	el.appendChild(showingEl);
-	el.appendChild(valueEl);
-	el.appendChild(ofEl);
-	el.appendChild(totalEl);
-	el.appendChild(rowsEl);
+
+	if(totalRows){
+		valueEl.innerHTML = " " + currentRow + "-" + Math.min((currentRow + pageSize - 1), totalRows) + " ";
+		
+		totalEl.innerHTML = " " + totalRows + " ";
+		
+		el.appendChild(showingEl);
+		el.appendChild(valueEl);
+		el.appendChild(ofEl);
+		el.appendChild(totalEl);
+		el.appendChild(rowsEl);
+	}else {
+		valueEl.innerHTML = " 0 ";
+
+		el.appendChild(showingEl);
+		el.appendChild(valueEl);
+		el.appendChild(rowsEl);
+	}
 	
 	return el;
 }
@@ -14885,17 +14899,18 @@ class Page extends Module{
 		this.trackChanges();
 	}
 	
-	_setPageCounter(totalRows){
-		var content, currentRow;
+	_setPageCounter(totalRows, size, currentRow){
+		var content;
 		
 		if(this.pageCounter){
-			currentRow = ((this.page - 1) * this.size) + 1;
 
 			if(this.mode === "remote"){
+				size = this.size;
+				currentRow = ((this.page - 1) * this.size) + 1;
 				totalRows = this.remoteRowCountEstimate;
 			}
 
-			content = this.pageCounter.call(this, this.size, currentRow, this.page, totalRows, this.max);
+			content = this.pageCounter.call(this, size, currentRow, this.page, totalRows, this.max);
 			
 			switch(typeof content){
 				case "object":
@@ -15035,7 +15050,12 @@ class Page extends Module{
 	
 	//return appropriate rows for current page
 	getRows(data){
-		var output, start, end;
+		var actualRowPageSize = 0,
+		output, start, end, actualStartRow;
+
+		var actualRows = data.filter((row) => {
+			return row.type === "row";
+		});
 		
 		if(this.mode == "local"){
 			output = [];
@@ -15050,21 +15070,30 @@ class Page extends Module{
 				end = start + parseInt(this.size);
 			}
 			
-			
 			this._setPageButtons();
 			
 			for(let i = start; i < end; i++){
-				if(data[i]){
-					output.push(data[i]);
+				let row = data[i];
+
+				if(row){
+					output.push(row);
+
+					if(row.type === "row"){
+						if(!actualStartRow){
+							actualStartRow = row;
+						}	
+
+						actualRowPageSize++;
+					}
 				}
 			}
-
-			this._setPageCounter(data.length);
+			
+			this._setPageCounter(actualRows.length, actualRowPageSize, actualStartRow ? (actualRows.indexOf(actualStartRow) + 1) : 0);
 			
 			return output;
 		}else {
 			this._setPageButtons();
-			this._setPageCounter(data.length);
+			this._setPageCounter(actualRows.length);
 			
 			return data.slice(0);
 		}
@@ -15164,8 +15193,8 @@ class Page extends Module{
 	
 	//handle the footer element being redrawn
 	footerRedraw(){
-		var footer = this.table.footerManager.element;
-		
+		var footer = this.table.footerManager.containerElement;
+
 		if((Math.ceil(footer.clientWidth) - footer.scrollWidth) < 0){
 			this.pagesElement.style.display = 'none';
 		}else {
@@ -17223,7 +17252,9 @@ class SelectRow extends Module{
 				self._deselectRow(self.selectedRows[0], true);
 			}
 			
-			self._rowSelectionChanged(silent);
+			if(rowCount){
+				self._rowSelectionChanged(silent);
+			}
 			
 		}else {
 			if(Array.isArray(rows)){
@@ -18796,15 +18827,20 @@ class VirtualDomHorizontal extends Renderer{
 		
 		this.fitDataColAvg = 0;
 		
-		this.window = 200; //pixel margin to make column visible before it is shown on screen
+		this.windowBuffer = 200; //pixel margin to make column visible before it is shown on screen
 		
+		this.visibleRows = null;
+
 		this.initialized = false;
+		this.isFitData = false;
 		
 		this.columns = [];
 	}
 	
 	initialize(){
 		this.compatibilityCheck();
+		this.layoutCheck();
+		this.vertScrollListen();
 	}
 	
 	compatibilityCheck(){
@@ -18845,6 +18881,16 @@ class VirtualDomHorizontal extends Renderer{
 		return ok;
 	}
 	
+	layoutCheck(){
+		this.isFitData = this.options("layout").startsWith('fitData');
+	}
+
+	vertScrollListen(){
+		this.subscribe("scroll-vertical", () => {
+			this.visibleRows = null;
+		});
+	}
+	
 	//////////////////////////////////////
 	///////// Public Functions ///////////
 	//////////////////////////////////////
@@ -18852,21 +18898,40 @@ class VirtualDomHorizontal extends Renderer{
 	renderColumns(row, force){
 		this.dataChange();
 	}
+
 	
 	scrollColumns(left, dir){
 		if(this.scrollLeft != left){
 			this.scrollLeft = left;
 			
-			this.scroll(left - (this.vDomScrollPosLeft + this.window));
+			this.scroll(left - (this.vDomScrollPosLeft + this.windowBuffer));
 		}
 	}
 	
+	calcWindowBuffer(){
+		var buffer = this.elementVertical.clientWidth;
+		
+		this.table.columnManager.columnsByIndex.forEach((column) => {
+			if(column.visible){
+				var width = column.getWidth();
+				
+				if(width > buffer){
+					buffer = width;
+				}
+			}
+		});
+		
+		this.windowBuffer = buffer * 2;
+	}
+	
 	rerenderColumns(update, blockRedraw){		
 		var old = {
 			cols:this.columns,
 			leftCol:this.leftCol,
 			rightCol:this.rightCol,
-		};
+		},
+		colPos = 0;
+		
 		
 		if(update && !this.initialized){
 			return;
@@ -18874,12 +18939,12 @@ class VirtualDomHorizontal extends Renderer{
 		
 		this.clear();
 		
-		this.scrollLeft = this.elementVertical.scrollLeft;
+		this.calcWindowBuffer();
 		
-		this.vDomScrollPosLeft = this.scrollLeft - this.window;
-		this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.window;
+		this.scrollLeft = this.elementVertical.scrollLeft;
 		
-		var colPos = 0;
+		this.vDomScrollPosLeft = this.scrollLeft - this.windowBuffer;
+		this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.windowBuffer;
 		
 		this.table.columnManager.columnsByIndex.forEach((column) => {
 			var config = {};
@@ -18892,7 +18957,7 @@ class VirtualDomHorizontal extends Renderer{
 				
 				config.width = width;
 				
-				if (this.options("layout") === "fitData") {
+				if (this.isFitData) {
 					config.fitDataCheck = column.modules.vdomHoz ? column.modules.vdomHoz.fitDataCheck : true;
 				}
 				
@@ -18981,7 +19046,7 @@ class VirtualDomHorizontal extends Renderer{
 		colEnd = 0,
 		row, rowEl;
 		
-		if(this.options("layout") === "fitData"){
+		if(this.isFitData){
 			this.table.columnManager.columnsByIndex.forEach((column) => {
 				if(!column.definition.width && column.visible){
 					change = true;
@@ -18991,10 +19056,10 @@ class VirtualDomHorizontal extends Renderer{
 			if(change){
 				if(change && this.table.rowManager.getDisplayRows().length){
 					
-					this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.window;
+					this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.windowBuffer;
 					
 					var row = this.chain("rows-sample", [1], [], () => {
-						return this.table.rowManager.getDisplayRows()[0];
+						return this.table.rowManager.getDisplayRows();
 					})[0];
 					
 					if(row){
@@ -19013,18 +19078,18 @@ class VirtualDomHorizontal extends Renderer{
 							
 							collsWidth += cell.column.getWidth();
 							
-							if(collsWidth > this.vDomScrollPosRight){
-								break;
-							}
+							// if(collsWidth > this.vDomScrollPosRight){
+							// 	break;
+							// }
 						}
 						
 						rowEl.parentNode.removeChild(rowEl);
 						
-						this.fitDataColAvg = Math.floor(collsWidth / (colEnd + 1));
+						// this.fitDataColAvg = Math.floor(collsWidth / (colEnd + 1));
 						
-						for(colEnd; colEnd < this.table.columnManager.columnsByIndex.length; colEnd++){
-							this.table.columnManager.columnsByIndex[colEnd].setWidth(this.fitDataColAvg);
-						}
+						// for(colEnd; colEnd < this.table.columnManager.columnsByIndex.length; colEnd++){
+						// 	this.table.columnManager.columnsByIndex[colEnd].setWidth(this.fitDataColAvg);
+						// }
 						
 						this.rerenderColumns(false, true);
 					}
@@ -19055,17 +19120,25 @@ class VirtualDomHorizontal extends Renderer{
 	}
 	
 	reinitializeRows(){
-		var rows = this.table.rowManager.getVisibleRows();
+		var rows = this.getVisibleRows();
 		rows.forEach((row) => {
 			this.reinitializeRow(row, true);
 		});
 	}
 	
+	getVisibleRows(){
+		if (!this.visibleRows){
+			this.visibleRows = this.table.rowManager.getVisibleRows();
+		}
+
+		return this.visibleRows;	
+	}
+	
 	scroll(diff){
 		this.vDomScrollPosLeft += diff;
 		this.vDomScrollPosRight += diff;
-		
-		if(diff > (this.elementVertical.clientWidth * .8)){
+
+		if(Math.abs(diff) > (this.windowBuffer / 2)){
 			this.rerenderColumns();
 		}else {
 			if(diff > 0){
@@ -19090,131 +19163,165 @@ class VirtualDomHorizontal extends Renderer{
 	}
 	
 	addColRight(){
-		var column = this.columns[this.rightCol + 1],
-		rows;
+		var changes = false;
 		
-		if(column && column.modules.vdomHoz.leftPos <= this.vDomScrollPosRight){
-			rows = this.table.rowManager.getVisibleRows();
-			
-			rows.forEach((row) => {
-				if(row.type !== "group"){
-					var cell = row.getCell(column);
-					row.getElement().appendChild(cell.getElement());
-					cell.cellRendered();
-				}
-			});
-			
-			this.fitDataColActualWidthCheck(column);
+		while(true){
 			
-			this.rightCol++; // Don't move this below the >= check below
+			let column = this.columns[this.rightCol + 1];
 			
-			if(this.rightCol >= (this.columns.length - 1)){
-				this.vDomPadRight = 0;
+			if(column){
+				if(column.modules.vdomHoz.leftPos <= this.vDomScrollPosRight){
+					changes = true;
+					
+					this.getVisibleRows().forEach((row) => {
+						if(row.type !== "group"){
+							var cell = row.getCell(column);
+							row.getElement().appendChild(cell.getElement());
+							cell.cellRendered();
+						}
+					});
+					
+					this.fitDataColActualWidthCheck(column);
+					
+					this.rightCol++; // Don't move this below the >= check below
+					
+					if(this.rightCol >= (this.columns.length - 1)){
+						this.vDomPadRight = 0;
+					}else {
+						this.vDomPadRight -= column.getWidth();
+					}	
+				}else {
+					break;
+				}
 			}else {
-				this.vDomPadRight -= column.getWidth();
+				break;
 			}
-			
+		}
+		
+		if(changes){
 			this.tableElement.style.paddingRight = this.vDomPadRight + "px";
-			
-			this.addColRight();
 		}
 	}
 	
 	addColLeft(){
-		var column = this.columns[this.leftCol - 1],
-		rows;
+		var changes = false;
 		
-		if(column && column.modules.vdomHoz.rightPos >= this.vDomScrollPosLeft){
-			var rows = this.table.rowManager.getVisibleRows();
+		while(true){
+			let column = this.columns[this.leftCol - 1];
 			
-			rows.forEach((row) => {
-				if(row.type !== "group"){
-					var cell = row.getCell(column);
-					row.getElement().prepend(cell.getElement());
-					cell.cellRendered();
+			if(column){
+				if(column.modules.vdomHoz.rightPos >= this.vDomScrollPosLeft){
+					changes = true;
+					
+					this.getVisibleRows().forEach((row) => {
+						if(row.type !== "group"){
+							var cell = row.getCell(column);
+							row.getElement().prepend(cell.getElement());
+							cell.cellRendered();
+						}
+					});
+					
+					this.leftCol--; // don't move this below the <= check below
+					
+					if(this.leftCol <= 0){ // replicating logic in addColRight
+						this.vDomPadLeft = 0;
+					}else {
+						this.vDomPadLeft -= column.getWidth();
+					}
+					
+					let diff = this.fitDataColActualWidthCheck(column);
+					
+					if(diff){
+						this.scrollLeft = this.elementVertical.scrollLeft = this.elementVertical.scrollLeft + diff;
+						this.vDomPadRight -= diff;
+					}
+					
+				}else {
+					break;
 				}
-			});
-			
-			this.fitDataColActualWidthCheck(column);
-			
-			this.leftCol--; // don't move this below the <= check below
-
-			if(this.leftCol <= 0){ // replicating logic in addColRight
-				this.vDomPadLeft = 0;
 			}else {
-				this.vDomPadLeft -= column.getWidth();
+				break;
 			}
-			
+		}
+		
+		if(changes){
 			this.tableElement.style.paddingLeft = this.vDomPadLeft + "px";
-			
-			
-			this.addColLeft();
 		}
 	}
 	
-	removeColRight(column){
-		var column = this.columns[this.rightCol],
-		rows;
+	removeColRight(){
+		var changes = false;
 		
-		if(column && column.modules.vdomHoz.leftPos > this.vDomScrollPosRight){
-			rows = this.table.rowManager.getVisibleRows();
-			
-			column.modules.vdomHoz.visible = false;
+		while(true){
+			let column = this.columns[this.rightCol];
 			
-			rows.forEach((row) => {
-				if(row.type !== "group"){
-					var cell = row.getCell(column);
-					try {
-						row.getElement().removeChild(cell.getElement());
-					} catch (ex) {
-						console.warn("Could not removeColRight", ex.message);
-					}
+			if(column){
+				if(column.modules.vdomHoz.leftPos > this.vDomScrollPosRight){
+					changes = true;
+					
+					this.getVisibleRows().forEach((row) => {
+						if(row.type !== "group"){
+							var cell = row.getCell(column);
+							
+							try {
+								row.getElement().removeChild(cell.getElement());
+							} catch (ex) {
+								console.warn("Could not removeColRight", ex.message);
+							}
+						}
+					});
+					
+					this.vDomPadRight += column.getWidth();
+					this.rightCol --;
+				}else {
+					break;
 				}
-			});
-			
-			this.vDomPadRight += column.getWidth();
+			}else {
+				break;
+			}
+		}
+		
+		if(changes){
 			this.tableElement.style.paddingRight = this.vDomPadRight + "px";
-			
-			this.rightCol --;
-			
-			this.removeColRight();
 		}
 	}
 	
 	removeColLeft(){
-		var column = this.columns[this.leftCol],
-		rows;
+		var changes = false;
 		
-		if(column && column.modules.vdomHoz.rightPos < this.vDomScrollPosLeft){	
-			rows = this.table.rowManager.getVisibleRows();
+		while(true){
+			let column = this.columns[this.leftCol];
 			
-			rows.forEach((row) => {
-				var cell, el;
-
-				if(row.type !== "group"){
-					cell = row.getCell(column);
-
-					if(cell){
-						el = cell.getElement();
-
-						if(el.parentNode){
+			if(column){
+				if(column.modules.vdomHoz.rightPos < this.vDomScrollPosLeft){
+					changes = true;
+					
+					this.getVisibleRows().forEach((row) => {					
+						if(row.type !== "group"){
+							var cell = row.getCell(column);
+							
 							try {
-								row.getElement().removeChild(el);
+								row.getElement().removeChild(cell.getElement());
 							} catch (ex) {
 								console.warn("Could not removeColLeft", ex.message);
 							}
 						}
-					}
+					});
+					
+					this.vDomPadLeft += column.getWidth();
+					this.leftCol ++;
+				}else {
+					break;
 				}
-			});
-			
-			this.vDomPadLeft += column.getWidth();
+			}else {
+				break;
+			}
+		}
+		
+		if(changes){
 			this.tableElement.style.paddingLeft = this.vDomPadLeft + "px";
-			
-			this.leftCol ++;
-			
-			this.removeColLeft();
 		}
+		
 	}
 	
 	fitDataColActualWidthCheck(column){
@@ -19229,12 +19336,14 @@ class VirtualDomHorizontal extends Renderer{
 			if(widthDiff){
 				column.modules.vdomHoz.rightPos += widthDiff;
 				column.modules.vdomHoz.width = newWidth;
-				this.colPositionAdjust(this.rightCol + 2, this.columns.length, widthDiff);
+				this.colPositionAdjust(this.columns.indexOf(column) + 1, this.columns.length, widthDiff);
 			}
 			
 			column.modules.vdomHoz.fitDataCheck = false;
 		}
-	};
+		
+		return widthDiff;
+	}
 	
 	initializeRow(row){
 		if(row.type !== "group"){
@@ -21685,7 +21794,7 @@ class FooterManager extends CoreFeature{
 					this.containerElement.innerHTML = this.table.options.footerElement;
 				}else {
 					this.external = true;
-					this.element = document.querySelector(this.table.options.footerElement);
+					this.containerElement = document.querySelector(this.table.options.footerElement);
 				}
 				break;
 
@@ -22002,7 +22111,7 @@ class InteractionManager extends CoreFeature {
 							return row.getElement() === target;
 						});
 						
-						if(targets["row"].parentNode && targets["row"].parentNode.closest(".tabulator-row")){
+						if(targets["row"] && targets["row"].parentNode && targets["row"].parentNode.closest(".tabulator-row")){
 							targets[key] = false;
 						}
 					}
@@ -23433,7 +23542,7 @@ class Tabulator {
 	_clearObjectPointers(){
 		this.options.columns = this.options.columns.slice(0);
 
-		if(this.options.data && !this.options.reactiveData){
+		if(Array.isArray(this.options.data) && !this.options.reactiveData){
 			this.options.data = this.options.data.slice(0);
 		}
 	}