tabulator-tables 5.0.8 → 5.1.1

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

@@ -4,157 +4,157 @@ import Helpers from '../../tools/Helpers.js';
 export default class VirtualDomHorizontal extends Renderer{
 	constructor(table){
 		super(table);
-
+		
 		this.leftCol = 0;
 		this.rightCol = 0;
 		this.scrollLeft = 0;
-
+		
 		this.vDomScrollPosLeft = 0;
 		this.vDomScrollPosRight = 0;
-
+		
 		this.vDomPadLeft = 0;
 		this.vDomPadRight = 0;
-
+		
 		this.fitDataColAvg = 0;
-
+		
 		this.window = 200; //pixel margin to make column visible before it is shown on screen
-
+		
 		this.initialized = false;
-
+		
 		this.columns = [];
 	}
-
+	
 	initialize(){
-		this.compatabilityCheck();
+		this.compatibilityCheck();
 	}
-
-	compatabilityCheck(){
+	
+	compatibilityCheck(){
 		var columns = this.options("columns"),
 		frozen = false,
 		ok = true;
-
+		
 		if(this.options("layout") == "fitDataTable"){
-			console.warn("Horizontal Vitrual DOM is not compatible with fitDataTable layout mode");
+			console.warn("Horizontal Virtual DOM is not compatible with fitDataTable layout mode");
 			ok = false;
 		}
-
+		
 		if(this.options("responsiveLayout")){
-			console.warn("Horizontal Vitrual DOM is not compatible with responsive columns");
+			console.warn("Horizontal Virtual DOM is not compatible with responsive columns");
 			ok = false;
 		}
-
+		
 		if(this.options("rtl")){
-			console.warn("Horizontal Vitrual DOM is not currently compatible with RTL text direction");
+			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 Vitrual DOM is not compatible with frozen columns");
+				console.warn("Horizontal Virtual DOM is not compatible with frozen columns");
 				ok = false;
 			}
 		}
-
+		
 		// if(!ok){
 		// 	options.virtualDomHoz = false;
 		// }
-
+		
 		return ok;
 	}
-
+	
 	//////////////////////////////////////
 	///////// Public Functions ///////////
 	//////////////////////////////////////
-
+	
 	renderColumns(row, force){
 		this.dataChange();
 	}
-
+	
 	scrollColumns(left, dir){
 		if(this.scrollLeft != left){
 			this.scrollLeft = left;
-
+			
 			this.scroll(left - (this.vDomScrollPosLeft + this.window));
 		}
 	}
-
-	rerenderColumns(update, blockRedraw){
+	
+	rerenderColumns(update, blockRedraw){		
 		var old = {
 			cols:this.columns,
 			leftCol:this.leftCol,
 			rightCol:this.rightCol,
 		};
-
+		
 		if(update && !this.initialized){
 			return;
 		}
-
+		
 		this.clear();
-
+		
 		this.scrollLeft = this.elementVertical.scrollLeft;
-
+		
 		this.vDomScrollPosLeft = this.scrollLeft - this.window;
 		this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.window;
-
+		
 		var colPos = 0;
-
+		
 		this.table.columnManager.columnsByIndex.forEach((column) => {
 			var config = {};
-
+			
 			if(column.visible){
 				var width = column.getWidth();
-
+				
 				config.leftPos = colPos;
 				config.rightPos = colPos + width;
-
+				
 				config.width = width;
-
+				
 				if (this.options("layout") === "fitData") {
-					config.fitDataCheck = true;
+					config.fitDataCheck = column.modules.vdomHoz ? column.modules.vdomHoz.fitDataCheck : true;
 				}
-
+				
 				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;
-	        }
-	    });
-
+					//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.tableElement.style.paddingLeft = this.vDomPadLeft + "px";
 		this.tableElement.style.paddingRight = this.vDomPadRight + "px";
-
+		
 		this.initialized = true;
-
+		
 		if(!blockRedraw){
 			if(!update || this.reinitChanged(old)){
-				this.renitializeRows();
+				this.reinitializeRows();
 			}
 		}
-
+		
 		this.elementVertical.scrollLeft = this.scrollLeft;
 	}
-
+	
 	renderRowCells(row){
 		if(this.initialized){
 			this.initializeRow(row);
@@ -165,88 +165,88 @@ export default class VirtualDomHorizontal extends Renderer{
 			});
 		}
 	}
-
+	
 	rerenderRowCells(row, force){
 		this.reinitializeRow(row, force);
 	}
-
+	
 	reinitializeColumnWidths(columns){
 		for(let i = this.leftCol; i <= this.rightCol; i++){
 			this.columns[i].reinitializeWidth();
 		}
 	}
-
+	
 	//////////////////////////////////////
 	//////// Internal Rendering //////////
 	//////////////////////////////////////
-
+	
 	deinitialize(){
 		this.initialized = false;
 	}
-
+	
 	clear(){
 		this.columns = [];
-
+		
 		this.leftCol = -1;
 		this.rightCol = 0;
-
+		
 		this.vDomScrollPosLeft = 0;
 		this.vDomScrollPosRight = 0;
 		this.vDomPadLeft = 0;
 		this.vDomPadRight = 0;
 	}
-
+	
 	dataChange(){
 		var change = false,
 		collsWidth = 0,
 		colEnd = 0,
 		group, row, rowEl;
-
+		
 		if(this.options("layout") === "fitData"){
 			this.table.columnManager.columnsByIndex.forEach((column) => {
 				if(!column.definition.width && column.visible){
 					change = true;
 				}
 			});
-
+			
 			if(change){
 				if(change && this.table.rowManager.getDisplayRows().length){
-
+					
 					this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.window;
-
+					
 					var row = this.chain("rows-sample", [1], [], () => {
 						return this.table.rowManager.getDisplayRows()[0];
 					})[0];
-
+					
 					if(row){
-
+						
 						rowEl = row.getElement();
-
+						
 						row.generateCells();
-
+						
 						this.tableElement.appendChild(rowEl);
-
+						
 						for(var colEnd = 0; colEnd < row.cells.length; colEnd++){
 							let cell = row.cells[colEnd];
 							rowEl.appendChild(cell.getElement());
-
+							
 							cell.column.reinitializeWidth();
-
+							
 							collsWidth += cell.column.getWidth();
-
+							
 							if(collsWidth > this.vDomScrollPosRight){
 								break;
 							}
 						}
-
+						
 						rowEl.parentNode.removeChild(rowEl);
-
+						
 						this.fitDataColAvg = Math.floor(collsWidth / (colEnd + 1));
-
+						
 						for(colEnd; colEnd < this.table.columnManager.columnsByIndex.length; colEnd++){
 							this.table.columnManager.columnsByIndex[colEnd].setWidth(this.fitDataColAvg);
 						}
-
+						
 						this.rerenderColumns(false, true);
 					}
 				}
@@ -258,34 +258,34 @@ export default class VirtualDomHorizontal extends Renderer{
 			}
 		}
 	}
-
+	
 	reinitChanged(old){
 		var match = true;
-
+		
 		if(old.cols.length !== this.columns.length || old.leftCol !== this.leftCol || old.rightCol !== this.rightCol){
 			return true;
 		}
-
+		
 		old.cols.forEach((col, i) => {
 			if(col !== this.columns[i]){
 				match = false;
 			}
 		});
-
+		
 		return !match;
 	}
-
-	renitializeRows(){
+	
+	reinitializeRows(){
 		var rows = this.table.rowManager.getVisibleRows();
 		rows.forEach((row) => {
 			this.reinitializeRow(row, true);
 		});
 	}
-
+	
 	scroll(diff){
 		this.vDomScrollPosLeft += diff;
 		this.vDomScrollPosRight += diff;
-
+		
 		if(diff > (this.elementVertical.clientWidth * .8)){
 			this.rerenderColumns();
 		}else{
@@ -300,24 +300,23 @@ export default class VirtualDomHorizontal extends Renderer{
 			}
 		}
 	}
-
+	
 	colPositionAdjust (start, end, diff){
 		for(let i = start; i < end; i++){
 			let column = this.columns[i];
-
+			
 			column.modules.vdomHoz.leftPos += diff;
 			column.modules.vdomHoz.rightPos += diff;
 		}
 	}
-
+	
 	addColRight(){
 		var column = this.columns[this.rightCol + 1],
 		rows, newWidth, widthDiff;
-
+		
 		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);
@@ -325,30 +324,30 @@ export default class VirtualDomHorizontal extends Renderer{
 					cell.cellRendered();
 				}
 			});
-
+			
 			this.fitDataColActualWidthCheck(column);
-
-			this.rightCol++;
-
+			
+			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();
 			}
-
+			
 			this.tableElement.style.paddingRight = this.vDomPadRight + "px";
-
+			
 			this.addColRight();
 		}
 	}
-
+	
 	addColLeft(){
 		var column = this.columns[this.leftCol - 1],
 		rows;
-
+		
 		if(column && column.modules.vdomHoz.rightPos >= this.vDomScrollPosLeft){
 			var rows = this.table.rowManager.getVisibleRows();
-
+			
 			rows.forEach((row) => {
 				if(row.type !== "group"){
 					var cell = row.getCell(column);
@@ -356,119 +355,134 @@ export default class VirtualDomHorizontal extends Renderer{
 					cell.cellRendered();
 				}
 			});
-
+			
 			this.fitDataColActualWidthCheck(column);
+			
+			this.leftCol--; // don't move this below the <= check below
 
-			if(!this.leftCol){
+			if(this.leftCol <= 0){ // replicating logic in addColRight
 				this.vDomPadLeft = 0;
 			}else{
 				this.vDomPadLeft -= column.getWidth();
 			}
-
+			
 			this.tableElement.style.paddingLeft = this.vDomPadLeft + "px";
-
-			this.leftCol--;
-
+			
+			
 			this.addColLeft();
 		}
 	}
-
+	
 	removeColRight(column){
 		var column = this.columns[this.rightCol],
 		rows;
-
+		
 		if(column && column.modules.vdomHoz.leftPos > this.vDomScrollPosRight){
 			rows = this.table.rowManager.getVisibleRows();
-
+			
 			column.modules.vdomHoz.visible = false;
-
+			
 			rows.forEach((row) => {
 				if(row.type !== "group"){
 					var cell = row.getCell(column);
-					row.getElement().removeChild(cell.getElement());
+					try {
+						row.getElement().removeChild(cell.getElement());
+					} catch (ex) {
+						console.warn("Could not removeColRight", ex.message)
+					}
 				}
 			});
-
+			
 			this.vDomPadRight += column.getWidth();
 			this.tableElement.style.paddingRight = this.vDomPadRight + "px";
-
+			
 			this.rightCol --;
-
+			
 			this.removeColRight();
 		}
 	}
-
+	
 	removeColLeft(){
 		var column = this.columns[this.leftCol],
 		rows;
-
-		if(column && column.modules.vdomHoz.rightPos < this.vDomScrollPosLeft){
-
+		
+		if(column && column.modules.vdomHoz.rightPos < this.vDomScrollPosLeft){	
 			rows = this.table.rowManager.getVisibleRows();
-
+			
 			rows.forEach((row) => {
+				var cell, el;
+
 				if(row.type !== "group"){
-					var cell = row.getCell(column);
-					if(cell.parentNode){
-						row.getElement().removeChild(cell.getElement());
+					cell = row.getCell(column);
+
+					if(cell){
+						el = cell.getElement();
+
+						if(el.parentNode){
+							try {
+								row.getElement().removeChild(el);
+							} catch (ex) {
+								console.warn("Could not removeColLeft", ex.message)
+							}
+						}
 					}
 				}
 			});
-
+			
 			this.vDomPadLeft += column.getWidth();
 			this.tableElement.style.paddingLeft = this.vDomPadLeft + "px";
-
+			
 			this.leftCol ++;
-
+			
 			this.removeColLeft();
 		}
 	}
-
+	
 	fitDataColActualWidthCheck(column){
 		var newWidth, widthDiff;
-
+		
 		if(column.modules.vdomHoz.fitDataCheck){
 			column.reinitializeWidth();
-
+			
 			newWidth = column.getWidth();
 			widthDiff = newWidth - column.modules.vdomHoz.width;
-
+			
 			if(widthDiff){
 				column.modules.vdomHoz.rightPos += widthDiff;
 				column.modules.vdomHoz.width = newWidth;
 				this.colPositionAdjust(this.rightCol + 2, this.columns.length, widthDiff);
 			}
-
+			
 			column.modules.vdomHoz.fitDataCheck = false;
 		}
 	};
-
+	
 	initializeRow(row){
 		if(row.type !== "group"){
 			row.modules.vdomHoz = {
 				leftCol:this.leftCol,
 				rightCol:this.rightCol,
 			};
-
+			
 			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();
 				}
 			}
 		}
 	}
-
+	
 	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/rendering/renderers/VirtualDomVertical.js

@@ -44,7 +44,7 @@ export default class VirtualDomVertical extends Renderer{
 
 		element.style.paddingTop = "";
 		element.style.paddingBottom = "";
-		element.style.minWidth = "";
+		// element.style.minWidth = "";
 		element.style.minHeight = "";
 		element.style.display = "";
 		element.style.visibility = "";

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

@@ -84,12 +84,12 @@ export default class Row extends CoreFeature{
 
 			this.dispatch("row-layout", this);
 
+			this.initialized = true;
+
 			if(this.table.options.rowFormatter){
 				this.table.options.rowFormatter(this.getComponent());
 			}
 
-			this.initialized = true;
-
 			this.dispatch("row-layout-after", this);
 		}else{
 			this.table.columnManager.renderer.rerenderRowCells(this);

package/src/js/core/tools/DataLoader.js

@@ -64,7 +64,7 @@ export default class DataLoader extends CoreFeature{
 			data = JSON.parse(data);
 		}
 
-		if(this.confirm("data-loading", data, params, config, silent)){
+		if(this.confirm("data-loading", [data, params, config, silent])){
 			this.loading = true;
 
 			if(!silent){
@@ -72,12 +72,12 @@ export default class DataLoader extends CoreFeature{
 			}
 
 			//get params for request
-			var params = this.chain("data-params", [data, config, silent], params || {}, {});
+			params = this.chain("data-params", [data, config, silent], params || {}, params || {});
 
 			params = this.mapParams(params, this.table.options.dataSendParams);
 
-			var result = this.chain("data-load", [data, params, config, silent], Promise.resolve([]));
-
+			var result = this.chain("data-load", [data, params, config, silent], false, Promise.resolve([]));
+			
 			return result.then((response) => {
 				if(!Array.isArray(response) && typeof response == "object"){
 					response = this.mapParams(response, this.objectInvert(this.table.options.dataReceiveParams));
@@ -102,10 +102,10 @@ export default class DataLoader extends CoreFeature{
 				if(!silent){
 					this.showError();
 				}
-
+				
 				setTimeout(() => {
 					this.hideLoader();
-				}, 3000);
+				}, this.table.options.dataLoaderErrorTimeout);
 			})
 			.finally(() => {
 				this.loading = false;