tabulator-tables 5.3.3 → 5.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabulator-tables",
-  "version": "5.3.3",
+  "version": "5.4.0",
   "description": "Interactive table generation JavaScript library",
   "style": "dist/css/tabulator.css",
   "main": "dist/js/tabulator.js",
@@ -10,7 +10,8 @@
     "**/*.scss"
   ],
   "scripts": {
-    "lint": "eslint src",
+    "lint": "eslint src --fix",
+    "prebuild": "eslint src --fix",
     "build": "rollup -c build/rollup.js",
     "dev": "rollup -c build/rollup.js -w --environment TARGET:dev",
     "dev:css": "rollup -c build/rollup.js -w --environment TARGET:css",
@@ -47,10 +48,6 @@
   },
   "homepage": "http://tabulator.info/",
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
-    "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "eslint": "^8.10.0",
     "eslint-plugin-only-warn": "^1.0.3",

package/src/js/core/ColumnManager.js

@@ -16,6 +16,7 @@ export default 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
@@ -35,11 +36,22 @@ export default 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(){
@@ -73,6 +85,15 @@ export default 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");
@@ -91,6 +112,12 @@ export default class ColumnManager extends CoreFeature {
 	getElement(){
 		return this.element;
 	}
+
+	//return containing contents element
+	getContentsElement(){
+		return this.contentsElement;
+	}
+	
 	
 	//return header containing element
 	getHeadersElement(){
@@ -99,20 +126,8 @@ export default 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);
@@ -287,7 +302,7 @@ export default class ColumnManager extends CoreFeature {
 		
 		if(!this.redrawBlock){
 
-			this.element.style.height="";
+			this.headersElement.style.height="";
 			
 			this.columns.forEach((column) => {
 				column.clearVerticalAlign();
@@ -301,7 +316,7 @@ export default class ColumnManager extends CoreFeature {
 				}
 			});
 
-			this.element.style.height = minHeight + "px";
+			this.headersElement.style.height = minHeight + "px";
 
 			this.columns.forEach((column) => {
 				column.verticalAlign(this.table.options.columnHeaderVertAlign, minHeight);

package/src/js/core/RowManager.js

@@ -38,6 +38,8 @@ export default class RowManager extends CoreFeature{
 		
 		this.dataPipeline = []; //hold data pipeline tasks
 		this.displayPipeline = []; //hold data display pipeline tasks
+
+		this.scrollbarWidth = 0;
 		
 		this.renderer = null;
 	}
@@ -720,6 +722,10 @@ export default 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
@@ -788,7 +794,7 @@ export default class RowManager extends CoreFeature{
 	getRows(type){
 		var rows = [];
 
-		if(!type){
+		if(!type || type === true){
 			rows = this.chain("rows-retrieve", type, null, this.rows) || this.rows;
 		}else{
 			switch(type){
@@ -826,10 +832,26 @@ export default 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;
@@ -892,6 +914,8 @@ export default class RowManager extends CoreFeature{
 		if(!this.displayRowsCount){
 			this._showPlaceholder();
 		}
+
+		this.scrollBarCheck();
 		
 		this.dispatchExternal("renderComplete");
 	}
@@ -928,10 +952,10 @@ export default class RowManager extends CoreFeature{
 	_clearPlaceholder(){
 		if(this.placeholder && this.placeholder.parentNode){
 			this.placeholder.parentNode.removeChild(this.placeholder);
-			
-			// clear empty table placeholder min
-			this.tableElement.style.minWidth = "";
 		}
+
+		// clear empty table placeholder min
+		this.tableElement.style.minWidth = "";
 	}
 	
 	_positionPlaceholder(){
@@ -990,6 +1014,8 @@ export default class RowManager extends CoreFeature{
 					this.redraw();
 				}
 			}
+
+			this.scrollBarCheck();
 		}
 		
 		this._positionPlaceholder();

package/src/js/core/column/Column.js

@@ -243,6 +243,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");

package/src/js/core/column/defaults/options.js

@@ -13,5 +13,6 @@ export default {
 	"variableHeight": undefined,
 	"headerVertical": undefined,
 	"headerHozAlign": undefined,
+	"headerWordWrap": false,
 	"editableTitle": undefined,
 };

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

@@ -19,7 +19,7 @@ export default 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;
 		
@@ -32,53 +32,29 @@ export default 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;
 	}
@@ -90,7 +66,7 @@ export default class VirtualDomHorizontal extends Renderer{
 	renderColumns(row, force){
 		this.dataChange();
 	}
-
+	
 	
 	scrollColumns(left, dir){
 		if(this.scrollLeft != left){
@@ -124,7 +100,6 @@ export default class VirtualDomHorizontal extends Renderer{
 		},
 		colPos = 0;
 		
-		
 		if(update && !this.initialized){
 			return;
 		}
@@ -139,41 +114,44 @@ export default 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;
+					
+					config.width = width;
 					
-					if(this.leftCol == -1){
-						this.leftCol = this.columns.length;
-						this.vDomPadLeft = colPos;
+					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;
 			}
 		});
 		
@@ -265,7 +243,7 @@ export default class VirtualDomHorizontal extends Renderer{
 					}
 					
 					rowEl.parentNode.removeChild(rowEl);
-
+					
 					this.rerenderColumns(false, true);
 				}
 			}
@@ -294,24 +272,30 @@ export default 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{
@@ -341,7 +325,7 @@ export default class VirtualDomHorizontal extends Renderer{
 		working = true;
 		
 		while(working){
-			
+
 			let column = this.columns[this.rightCol + 1];
 			
 			if(column){
@@ -351,7 +335,7 @@ export default 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();
 						}
 					});
@@ -392,7 +376,7 @@ export default 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();
 						}
 					});
@@ -466,7 +450,7 @@ export default class VirtualDomHorizontal extends Renderer{
 	removeColLeft(){
 		var changes = false,
 		working = true;
-		
+
 		while(working){
 			let column = this.columns[this.leftCol];
 			
@@ -528,26 +512,41 @@ export default 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);
 			}
 		}

package/src/js/core/row/Row.js

@@ -264,7 +264,7 @@ export default class Row extends CoreFeature{
 					
 					if(cell){
 						let value = column.getFieldValue(newRowData);
-						if(cell.getValue() != value){
+						if(cell.getValue() !== value){
 							cell.setValueProcessData(value);
 							
 							if(visible){

package/src/js/core/tools/InteractionMonitor.js

@@ -21,6 +21,8 @@ export default class InteractionManager extends CoreFeature {
 			"mouseover",
 			"mouseout",
 			"mousemove",
+			"mouseup",
+			"mousedown",
 			"touchstart",
 			"touchend",
 		];