Fix Chrome column width reset during resize overflow

src/js/core/ColumnManager.js

@@ -29,6 +29,8 @@ export default class ColumnManager extends CoreFeature {
 		this.redrawBlockUpdate = null; //store latest redraw update only status
 
 		this.renderer = null;
+		this.tableMinWidthStyled = false;
+		this.columnWidthOverflowAdjustQueued = false;
 	}
 
 	////////////// Setup Functions /////////////////
@@ -377,6 +379,8 @@ export default class ColumnManager extends CoreFeature {
 			});
 
 			this.table.rowManager.adjustTableSize();
+			this.adjustForColumnWidthOverflow();
+			this.queueColumnWidthOverflowAdjustment();
 		}
 	}
 
@@ -520,6 +524,34 @@ export default class ColumnManager extends CoreFeature {
 		return width;
 	}
 
+	columnWidthOverflow(){
+		return this.getWidth() > this.table.rowManager.element.clientWidth;
+	}
+
+	adjustForColumnWidthOverflow(){
+		if(this.columnWidthOverflow()){
+			// https://github.com/tabulator-tables/tabulator/issues/4840
+			this.table.rowManager.tableElement.style.minWidth = this.getWidth() + "px";
+			this.tableMinWidthStyled = true;
+		}else if(this.tableMinWidthStyled){
+			this.table.rowManager.tableElement.style.minWidth = "";
+			this.tableMinWidthStyled = false;
+		}
+	}
+
+	queueColumnWidthOverflowAdjustment(){
+		if(this.columnWidthOverflowAdjustQueued || typeof requestAnimationFrame !== "function"){
+			return;
+		}
+
+		this.columnWidthOverflowAdjustQueued = true;
+
+		requestAnimationFrame(() => {
+			this.columnWidthOverflowAdjustQueued = false;
+			this.adjustForColumnWidthOverflow();
+		});
+	}
+
 	moveColumn(from, to, after){
 		to.element.parentNode.insertBefore(from.element, to.element);
 
@@ -672,7 +704,7 @@ export default class ColumnManager extends CoreFeature {
 
 			if(column.visible){
 
-				width = column.definition.width || 0;
+				width = column.widthUser ? column.getWidth() : column.definition.width || 0;
 
 				minWidth = parseInt(column.minWidth);
 
@@ -747,7 +779,9 @@ export default class ColumnManager extends CoreFeature {
 
 	rerenderColumns(update, silent){
 		if(!this.redrawBlock){
+			this.adjustForColumnWidthOverflow();
 			this.renderer.rerenderColumns(update, silent);
+			this.queueColumnWidthOverflowAdjustment();
 		}else{
 			if(update === false || (update === true && this.redrawBlockUpdate === null)){
 				this.redrawBlockUpdate = update;

src/js/core/column/Column.js

@@ -49,6 +49,7 @@ export default class Column extends CoreFeature{
 		this.minWidth = null; //column minimum width
 		this.minWidthStyled = ""; //column minimum pre-styled to improve render efficiency
 		this.widthFixed = false; //user has specified a width for this column
+		this.widthUser = false; //column width has been manually resized by the user
 
 		this.visible = true; //default visible state
 
@@ -662,8 +663,13 @@ export default class Column extends CoreFeature{
 		}
 	}
 
-	setWidth(width){
+	setWidth(width, user){
 		this.widthFixed = true;
+
+		if(user){
+			this.widthUser = true;
+		}
+
 		this.setWidthActual(width);
 	}
 
@@ -864,8 +870,13 @@ export default class Column extends CoreFeature{
 		return !column || column.visible ? column : this._prevVisibleColumn(index - 1);
 	}
 
-	reinitializeWidth(force){
+	reinitializeWidth(force, user){
+		if(this.widthUser && !force){
+			return;
+		}
+
 		this.widthFixed = false;
+		this.widthUser = false;
 
 		//set width if present
 		if(typeof this.definition.width !== "undefined" && !force){
@@ -875,13 +886,13 @@ export default class Column extends CoreFeature{
 
 		this.dispatch("column-width-fit-before", this);
 
-		this.fitToData(force);
+		this.fitToData(force, user);
 
 		this.dispatch("column-width-fit-after", this);
 	}
 
 	//set column width to maximum cell width for non group columns
-	fitToData(force){
+	fitToData(force, user){
 		if(this.isGroup){
 			return;
 		}
@@ -909,7 +920,7 @@ export default class Column extends CoreFeature{
 				var setTo = maxWidth + 1;
 
 				if(force){
-					this.setWidth(setTo);
+					this.setWidth(setTo, user);
 				}else{
 					if (this.maxInitialWidth && !force) {
 						setTo = Math.min(setTo, this.maxInitialWidth);
@@ -975,4 +986,4 @@ export default class Column extends CoreFeature{
 	getParentComponent(){
 		return this.parent instanceof Column ? this.parent.getComponent() : false;
 	}
-}
+}

src/js/core/rendering/renderers/BasicHorizontal.js

@@ -21,7 +21,9 @@ export default class BasicHorizontal extends Renderer{
 
 	reinitializeColumnWidths(columns){
 		columns.forEach(function(column){
-			column.reinitializeWidth();
+			if(!column.widthUser){
+				column.reinitializeWidth();
+			}
 		});
 	}
-}
+}

src/js/core/rendering/renderers/VirtualDomHorizontal.js

@@ -193,7 +193,7 @@ export default class VirtualDomHorizontal extends Renderer{
 		for(let i = this.leftCol; i <= this.rightCol; i++){
 			let col = this.columns[i];
 
-			if(col){
+			if(col && !col.widthUser){
 				col.reinitializeWidth();
 			}
 		}
@@ -225,7 +225,7 @@ export default class VirtualDomHorizontal extends Renderer{
 
 		if(this.isFitData){
 			this.table.columnManager.columnsByIndex.forEach((column) => {
-				if(!column.definition.width && column.visible){
+				if(!column.definition.width && !column.widthUser && column.visible){
 					change = true;
 				}
 			});
@@ -248,7 +248,9 @@ export default class VirtualDomHorizontal extends Renderer{
 						let cell = row.cells[colEnd];
 						rowEl.appendChild(cell.getElement());
 
-						cell.column.reinitializeWidth();
+						if(!cell.column.widthUser){
+							cell.column.reinitializeWidth();
+						}
 					}
 
 					rowEl.parentNode.removeChild(rowEl);
@@ -521,7 +523,7 @@ export default class VirtualDomHorizontal extends Renderer{
 	fitDataColActualWidthCheck(column){
 		var newWidth, widthDiff;
 
-		if(column.modules.vdomHoz.fitDataCheck){
+		if(column.modules.vdomHoz.fitDataCheck && !column.widthUser){
 			column.reinitializeWidth();
 
 			newWidth = column.getWidth();

src/js/modules/Layout/defaults/modes/fitColumns.js

@@ -103,7 +103,7 @@ export default function(columns, forced){
 
 		if(column.visible){
 
-			width = column.definition.width;
+			width = column.widthUser ? column.getWidth() : column.definition.width;
 			minWidth =  parseInt(column.minWidth);
 
 			if(width){
@@ -112,7 +112,7 @@ export default function(columns, forced){
 
 				fixedWidth += colWidth > minWidth ? colWidth : minWidth;
 
-				if(column.definition.widthShrink){
+				if(column.definition.widthShrink && !column.widthUser){
 					fixedShrinkColumns.push({
 						column:column,
 						width:colWidth > minWidth ? colWidth : minWidth

src/js/modules/Layout/defaults/modes/fitDataGeneral.js

@@ -1,10 +1,12 @@
 //resize columns to fit data they contain and stretch row to fill table, also used for fitDataTable
 export default function(columns, forced){
 	columns.forEach(function(column){
-		column.reinitializeWidth();
+		if(!column.widthUser){
+			column.reinitializeWidth();
+		}
 	});
 
 	if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
 		this.table.modules.responsiveLayout.update();
 	}
-}
+}

src/js/modules/Layout/defaults/modes/fitDataStretch.js

@@ -22,6 +22,10 @@ export default function(columns, forced){
 	if(lastCol){
 		gap = tableWidth - colsWidth + lastCol.getWidth();
 
+		if(lastCol.widthUser){
+			return;
+		}
+
 		if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
 			lastCol.setWidth(0);
 			this.table.modules.responsiveLayout.update();
@@ -37,4 +41,4 @@ export default function(columns, forced){
 			this.table.modules.responsiveLayout.update();
 		}
 	}
-}
+}

src/js/modules/ResizeColumns/ResizeColumns.js

@@ -162,7 +162,8 @@ export default class ResizeColumns extends Module{
 				var oldWidth = nearestColumn.getWidth();
 
 				e.stopPropagation();
-				nearestColumn.reinitializeWidth(true);
+				// https://github.com/tabulator-tables/tabulator/issues/4840
+				nearestColumn.reinitializeWidth(true, true);
 
 				if(oldWidth !== nearestColumn.getWidth()){
 					self.dispatch("column-resized", nearestColumn);
@@ -242,7 +243,8 @@ export default class ResizeColumns extends Module{
 
 		blockedBefore = column.width == column.minWidth || column.width == column.maxWidth;
 
-		column.setWidth(this.startWidth + startDiff);
+		// https://github.com/tabulator-tables/tabulator/issues/4840
+		column.setWidth(this.startWidth + startDiff, true);
 
 		blockedAfter = column.width == column.minWidth || column.width == column.maxWidth;
 
@@ -260,7 +262,8 @@ export default class ResizeColumns extends Module{
 			}
 
 			if(this.nextColumn){
-				this.nextColumn.setWidth(this.nextColumn.getWidth() - moveDiff);
+				// https://github.com/tabulator-tables/tabulator/issues/4840
+				this.nextColumn.setWidth(this.nextColumn.getWidth() - moveDiff, true);
 			}
 		}
 
@@ -362,4 +365,4 @@ export default class ResizeColumns extends Module{
 		handle.addEventListener("touchmove", mouseMove, {passive: true});
 		handle.addEventListener("touchend", mouseUp);
 	}
-}
+}