tabulator-tables 5.1.5 → 5.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabulator-tables",
-  "version": "5.1.5",
+  "version": "5.1.8",
   "description": "Interactive table generation JavaScript library",
   "style": "dist/css/tabulator.css",
   "main": "dist/js/tabulator.js",

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

@@ -18,8 +18,9 @@ export default class VirtualDomHorizontal extends Renderer{
 		this.fitDataColAvg = 0;
 		
 		this.windowBuffer = 200; //pixel margin to make column visible before it is shown on screen
-
 		
+		this.visibleRows = null;
+
 		this.initialized = false;
 		this.isFitData = false;
 		
@@ -29,6 +30,7 @@ export default class VirtualDomHorizontal extends Renderer{
 	initialize(){
 		this.compatibilityCheck();
 		this.layoutCheck();
+		this.vertScrollListen();
 	}
 	
 	compatibilityCheck(){
@@ -68,10 +70,19 @@ export default class VirtualDomHorizontal extends Renderer{
 		
 		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;
+	}
 	
 	//////////////////////////////////////
 	///////// Public Functions ///////////
@@ -80,6 +91,7 @@ export default class VirtualDomHorizontal extends Renderer{
 	renderColumns(row, force){
 		this.dataChange();
 	}
+
 	
 	scrollColumns(left, dir){
 		if(this.scrollLeft != left){
@@ -88,20 +100,20 @@ export default class VirtualDomHorizontal extends Renderer{
 			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;
 	}
 	
@@ -119,20 +131,20 @@ export default class VirtualDomHorizontal extends Renderer{
 		}
 		
 		this.clear();
-
+		
 		this.calcWindowBuffer();
 		
 		this.scrollLeft = this.elementVertical.scrollLeft;
 		
 		this.vDomScrollPosLeft = this.scrollLeft - this.windowBuffer;
 		this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.windowBuffer;
-	
+		
 		this.table.columnManager.columnsByIndex.forEach((column) => {
 			var config = {};
 			
 			if(column.visible){
 				var width = column.getWidth();
-
+				
 				config.leftPos = colPos;
 				config.rightPos = colPos + width;
 				
@@ -259,18 +271,18 @@ export default 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);
 					}
@@ -301,17 +313,25 @@ export default 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){
@@ -336,131 +356,165 @@ export default class VirtualDomHorizontal extends Renderer{
 	}
 	
 	addColRight(){
-		var column = this.columns[this.rightCol + 1],
-		rows, newWidth, widthDiff;
+		var changes = false;
 		
-		if(column && column.modules.vdomHoz.leftPos <= this.vDomScrollPosRight){
-			rows = this.table.rowManager.getVisibleRows();
+		while(true){
 			
-			rows.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
+			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();
+		while(true){
+			let column = this.columns[this.rightCol];
 			
-			column.modules.vdomHoz.visible = false;
-			
-			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){
@@ -475,12 +529,14 @@ export default 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"){

package/src/js/core/tools/ComponentFunctionBinder.js

@@ -12,14 +12,14 @@ export default class ComponentFunctionBinder{
 		}
 
 		if(this.bindings[type][funcName]){
-			console.warn("Unable to bind component handler, a matching function name is already bound", type, funcName, hanlder)
+			console.warn("Unable to bind component handler, a matching function name is already bound", type, funcName, handler)
 		}else{
 			this.bindings[type][funcName] = handler;
 		}
 	}
 
 	handle(type, component, name){
-		if(this.bindings[type] && this.bindings[type][name]){
+		if(this.bindings[type] && this.bindings[type][name] && typeof this.bindings[type][name].bind === 'function'){
 			return this.bindings[type][name].bind(null, component);
 		}else{
 			if(name !== "then" && typeof name === "string" && !name.startsWith("_")){
@@ -27,4 +27,4 @@ export default class ComponentFunctionBinder{
 			}
 		}
 	}
-}
+}

package/src/js/modules/Edit/Edit.js

@@ -638,6 +638,7 @@ class Edit extends Module{
 					cell.column.definition.cellEditing.call(this.table, component);
 				}
 
+				this.dispatch("cell-editing", cell);
 				this.dispatchExternal("cellEditing", component);
 
 				params = typeof cell.column.modules.edit.params === "function" ? cell.column.modules.edit.params(component) : cell.column.modules.edit.params;

package/src/js/modules/Edit/defaults/editors/select.js

@@ -480,6 +480,7 @@ export default function(cell, onRendered, success, cancel, editorParams){
 		if(!input.value){
 			unsetItems();
 			chooseItems();
+			showList();
 		}
 	});
 

package/src/js/modules/Format/defaults/formatters/datetime.js

@@ -9,14 +9,12 @@ export default function(cell, formatterParams, onRendered){
 		var newDatetime = inputFormat === "iso" ? DT.fromISO(String(value)) : DT.fromFormat(String(value), inputFormat);
 
 		if(newDatetime.isValid){
-
 			if(formatterParams.timezone){
-				newDatetime = newDatetime.shiftTimezone(formatterParams.timezone);
+				newDatetime = newDatetime.setZone(formatterParams.timezone);
 			}
 
 			return newDatetime.toFormat(outputFormat);
 		}else{
-
 			if(invalid === true || !value){
 				return value;
 			}else if(typeof invalid === "function"){

package/src/js/modules/Menu/Menu.js

@@ -313,6 +313,7 @@ class Menu extends Module{
 		
 		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);
 			window.addEventListener("resize", this.blurEvent);
@@ -335,13 +336,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";
 			}
 		}
 	}
@@ -368,6 +367,7 @@ class Menu extends Module{
 		document.body.removeEventListener("contextmenu", this.blurEvent);
 		window.removeEventListener("resize", this.blurEvent);
 		this.table.rowManager.element.removeEventListener("scroll", this.blurEvent);
+		this.unsubscribe("cell-editing", this.blurEvent);
 		
 		if(this.currentComponent){
 			this.dispatchExternal("menuClosed", this.currentComponent.getComponent());
@@ -378,4 +378,4 @@ class Menu extends Module{
 
 Menu.moduleName = "menu";
 
-export default Menu;
+export default Menu;