tabulator-tables 5.0.6 → 5.0.10

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

@@ -2,29 +2,29 @@ import CoreFeature from '../CoreFeature.js';
 import Helpers from './Helpers.js';
 
 export default class InteractionManager extends CoreFeature {
-
+	
 	constructor (table){
 		super(table);
-
-		this.el = this.table.element;
-
+		
+		this.el = null;
+		
 		this.abortClasses = ["tabulator-headers", "tabulator-table"];
-
+		
 		this.previousTargets = {};
-
+		
 		this.listeners = [
-		"click",
-		"dblclick",
-		"contextmenu",
-		"mouseenter",
-		"mouseleave",
-		"mouseover",
-		"mouseout",
-		"mousemove",
-		"touchstart",
-		"touchend",
+			"click",
+			"dblclick",
+			"contextmenu",
+			"mouseenter",
+			"mouseleave",
+			"mouseover",
+			"mouseout",
+			"mousemove",
+			"touchstart",
+			"touchend",
 		];
-
+		
 		this.componentMap = {
 			"tabulator-cell":"cell",
 			"tabulator-row":"row",
@@ -32,36 +32,111 @@ export default class InteractionManager extends CoreFeature {
 			"tabulator-col":"column",
 		};
 
+		this.pseudoTrackers = {
+			"row":{
+				subscriber:null,
+				target:null,
+			},
+			"cell":{
+				subscriber:null,
+				target:null,
+			},
+			"group":{
+				subscriber:null,
+				target:null,
+			},
+			"column":{
+				subscriber:null,
+				target:null,
+			},
+		}
+
+		this.pseudoTracking = false;
+	}
+	
+	initialize(){
+		this.el = this.table.element;
 		this.buildListenerMap();
 		this.bindSubscriptionWatchers();
 	}
-
+	
 	buildListenerMap(){
 		var listenerMap = {};
-
+		
 		this.listeners.forEach((listener) => {
 			listenerMap[listener] = {
 				handler:null,
 				components:[],
 			}
 		})
-
+		
 		this.listeners = listenerMap;
 	}
 
+	bindPseudoEvents(){
+		Object.keys(this.pseudoTrackers).forEach((key) => {
+			this.pseudoTrackers[key].subscriber = this.pseudoMouseEnter.bind(this, key);
+			this.subscribe(key + "-mouseover", this.pseudoTrackers[key].subscriber);
+		});
+
+		this.pseudoTracking = true;
+	}
+
+	pseudoMouseEnter(key, e, target){
+		if(this.pseudoTrackers[key].target !== target){
+			
+			if(this.pseudoTrackers[key].target){
+				this.dispatch(key + "-mouseleave", e, target);
+			}
+
+			this.pseudoMouseLeave(key, e);
+
+			this.pseudoTrackers[key].target = target;
+
+			this.dispatch(key + "-mouseenter", e, target);
+		}
+	}
+
+	pseudoMouseLeave(key, e){
+		var leaveList = Object.keys(this.pseudoTrackers),
+		linkedKeys = {
+			"row":["cell"],
+			"cell":["row"],
+		};
+
+		leaveList = leaveList.filter((item) => {
+			var links = linkedKeys[key];
+			return item !== key && (!links || (links && !links.includes(item)));
+		});
+
+	
+		leaveList.forEach((key) => {
+			var target = this.pseudoTrackers[key].target;
+
+			if(this.pseudoTrackers[key].target){
+				this.dispatch(key + "-mouseleave", e, target);
+
+				this.pseudoTrackers[key].target = null;
+			}
+		});
+	}
+
+	
 	bindSubscriptionWatchers(){
 		var listeners = Object.keys(this.listeners),
 		components = Object.values(this.componentMap);
-
+		
 		for(let comp of components){
 			for(let listener of listeners){
 				let key = comp + "-" + listener;
-
+				
 				this.subscriptionChange(key, this.subscriptionChanged.bind(this, comp, listener));
 			}
 		}
+		
+		this.subscribe("table-destroy", this.clearWatchers.bind(this))
 	}
-
+	
 	subscriptionChanged(component, key, added){
 		var listener = this.listeners[key].components,
 		index = listener.indexOf(component),
@@ -81,20 +156,23 @@ export default class InteractionManager extends CoreFeature {
 			}
 		}
 
+		if((key === "mouseenter" || key === "mouseleave") && !this.pseudoTracking){
+			this.bindPseudoEvents();
+		}
+		
 		if(changed){
 			this.updateEventListeners();
 		}
 	}
-
+	
 	updateEventListeners(){
 		for(let key in this.listeners){
 			let listener = this.listeners[key];
-
+			
 			if(listener.components.length){
 				if(!listener.handler){
 					listener.handler = this.track.bind(this, key);
 					this.el.addEventListener(key, listener.handler)
-					console.log("add", key)
 					// this.el.addEventListener(key, listener.handler, {passive: true})
 				}
 			}else{
@@ -105,57 +183,63 @@ export default class InteractionManager extends CoreFeature {
 			}
 		}
 	}
-
+	
 	track(type, e){
 		var path = (e.composedPath && e.composedPath()) || e.path;
+		
 		var targets = this.findTargets(path);
 		targets = this.bindComponents(type, targets);
+
 		this.triggerEvents(type, e, targets);
-	}
 
+		if(this.pseudoTracking && (type == "mouseover" || type == "mouseleave") && !Object.keys(targets).length){
+			this.pseudoMouseLeave("none", e);
+		}
+	}
+	
 	findTargets(path){
 		var targets = {};
-
+		
 		let componentMap = Object.keys(this.componentMap);
-
+		
 		for (let el of path) {
 			let classList = el.classList ? [...el.classList] : [];
-
+			
 			let abort = classList.filter((item) => {
 				return this.abortClasses.includes(item);
 			})
-
+			
 			if(abort.length){
 				break;
 			}
-
+			
 			let elTargets = classList.filter((item) => {
 				return componentMap.includes(item);
 			})
-
+			
 			for (let target of elTargets) {
 				targets[this.componentMap[target]] = el;
 			}
 		}
-
+		
 		if(targets.group && targets.group === targets.row){
 			delete targets.row;
 		}
-
+		
 		return targets;
 	}
-
+	
 	bindComponents(type, targets){
 		//ensure row component is looked up before cell
 		var keys = Object.keys(targets).reverse(),
 		listener = this.listeners[type],
 		targetMatches = {};
-
+		
 		for(let key of keys){
 			let component;
 			let target = targets[key];
 			let previousTarget = this.previousTargets[key];
-
+			
 			if(previousTarget && previousTarget.target === target){
 				component = previousTarget.component;
 			}else{
@@ -163,20 +247,20 @@ export default class InteractionManager extends CoreFeature {
 					case "row":
 					case "group":
 					if(listener.components.includes("row") || listener.components.includes("cell")){
-						let rows = this.table.rowManager.getVisibleRows();
-
+						let rows = this.table.rowManager.getVisibleRows(true);
+						
 						component = rows.find((row) => {
 							return row.getElement() === target;
 						});
 					}
 					break;
-
+					
 					case "column":
 					if(listener.components.includes("column")){
 						component = this.table.columnManager.findColumn(target);
 					}
 					break
-
+					
 					case "cell":
 					if(listener.components.includes("cell")){
 						component = targets["row"].findCell(target);
@@ -184,7 +268,7 @@ export default class InteractionManager extends CoreFeature {
 					break;
 				}
 			}
-
+			
 			if(component){
 				targets[key] = component;
 				targetMatches[key] = {
@@ -193,19 +277,30 @@ export default class InteractionManager extends CoreFeature {
 				}
 			}
 		}
-
+		
 		this.previousTargets = targetMatches;
-
+		
 		return targets;
 	}
-
+	
 	triggerEvents(type, e, targets){
 		var listener = this.listeners[type];
-
+		
 		for(let key in targets){
 			if(targets[key] && listener.components.includes(key)){
 				this.dispatch(key + "-" + type, e, targets[key]);
 			}
 		}
 	}
+	
+	clearWatchers(){
+		for(let key in this.listeners){
+			let listener = this.listeners[key];
+		
+			if(listener.handler){
+				this.el.removeEventListener(key, listener.handler)
+				listener.handler = null;
+			}
+		}
+	}
 }

package/src/js/core/tools/OptionsList.js

@@ -1,8 +1,8 @@
 export default class OptionsList {
-	constructor(table, msgType){
+	constructor(table, msgType, defaults = {}){
 		this.table = table;
 		this.msgType = msgType;
-		this.registeredDefaults = {};
+		this.registeredDefaults = Object.assign({}, defaults)
 	}
 
 	register(option, value){

package/src/js/modules/ColumnCalcs/ColumnCalcs.js

@@ -53,6 +53,7 @@ class ColumnCalcs extends Module{
 		this.subscribe("column-add", this.recalcActiveRows.bind(this));
 		this.subscribe("data-refeshed", this.recalcActiveRows.bind(this));
 		this.subscribe("table-redraw", this.tableRedraw.bind(this));
+		this.subscribe("rows-visible", this.visibleRows.bind(this));
 
 		this.registerTableFunction("getCalcResults", this.getResults.bind(this));
 		this.registerTableFunction("recalc", this.userRecalc.bind(this));
@@ -78,6 +79,18 @@ class ColumnCalcs extends Module{
 	///////// Internal Logic //////////
 	///////////////////////////////////
 
+	visibleRows(viewable, rows){
+		if(this.topRow){
+			rows.unshift(this.topRow);
+		}
+
+		if(this.botRow){
+			rows.push(this.botRow);
+		}
+	
+		return rows;
+	}
+
 	rowsUpdated(row){
 		if(this.table.options.groupBy){
 			this.recalcRowGroup(this);
@@ -354,7 +367,7 @@ class ColumnCalcs extends Module{
 
 		row.getComponent = () => {
 			if(!row.component){
-				row.component = new CalcComponent(this);
+				row.component = new CalcComponent(row);
 			}
 
 			return row.component;

package/src/js/modules/DataTree/DataTree.js

@@ -43,12 +43,10 @@ class DataTree extends Module{
 	initialize(){
 		if(this.table.options.dataTree){
 			var dummyEl = null,
-			firstCol = this.table.columnManager.getFirstVisibileColumn(),
 			options = this.table.options;
 
 			this.field = options.dataTreeChildField;
 			this.indent = options.dataTreeChildIndent;
-			this.elementField = options.dataTreeElementColumn || (firstCol ? firstCol.field : false);
 
 			if(options.dataTreeBranchElement){
 
@@ -117,15 +115,23 @@ class DataTree extends Module{
 
 			this.subscribe("row-init", this.initializeRow.bind(this));
 			this.subscribe("row-layout-after", this.layoutRow.bind(this));
-			this.subscribe("row-relayout", this.layoutRow.bind(this));
 			this.subscribe("row-deleted", this.rowDelete.bind(this),0);
 			this.subscribe("row-data-changed", this.rowDataChanged.bind(this), 10);
+			this.subscribe("cell-value-updated", this.cellValueChanged.bind(this));
+			this.subscribe("edit-cancelled", this.cellValueChanged.bind(this));
 			this.subscribe("column-moving-rows", this.columnMoving.bind(this));
+			this.subscribe("table-built", this.initializeElementField.bind(this));
 
 			this.registerDisplayHandler(this.getRows.bind(this), 30);
 		}
 	}
 
+	initializeElementField(){
+		var firstCol = this.table.columnManager.getFirstVisibleColumn();
+
+		this.elementField = this.table.options.dataTreeElementColumn || (firstCol ? firstCol.field : false);
+	}
+	
 	getRowChildren(row){
 		return this.getTreeChildren(row, true);
 	}
@@ -151,6 +157,14 @@ class DataTree extends Module{
 		}
 	}
 
+	cellValueChanged(cell){
+		var field = cell.column.getField();
+
+		if(field === this.elementField){
+			this.layoutRow(cell.row);
+		}
+	}
+
 	initializeRow(row){
 		var childArray = row.getData()[this.field];
 		var isArray = Array.isArray(childArray);
@@ -555,17 +569,12 @@ class DataTree extends Module{
 		return output;
 	}
 
-	checkForRestyle(cell){
-		if(!cell.row.cells.indexOf(cell)){
-			this.layoutRow(cell.row);
-		}
-	}
-
 	getChildField(){
 		return this.field;
 	}
 
 	redrawNeeded(data){
+		console.log("needed?", data)
 		return (this.field ? typeof data[this.field] !== "undefined" : false) || (this.elementField ? typeof data[this.elementField] !== "undefined" : false);
 	}
 }

package/src/js/modules/Download/defaults/downloaders/pdf.js

@@ -77,8 +77,6 @@ export default function(list, options, setFileContents){
 				}
 
 				rowData.push(cell);
-			}else{
-				rowData.push("");
 			}
 		});
 

package/src/js/modules/Download/defaults/downloaders/xlsx.js

@@ -26,7 +26,9 @@ export default function(list, options, setFileContents){
 					rowData.push(!(col.value instanceof Date) && typeof col.value === "object" ? JSON.stringify(col.value) : col.value);
 
 					if(col.width > 1 || col.height > -1){
-						merges.push({s:{r:i,c:j},e:{r:i + col.height - 1,c:j + col.width - 1}});
+						if(col.height > 1 || col.width > 1){
+							merges.push({s:{r:i,c:j},e:{r:i + col.height - 1,c:j + col.width - 1}});
+						}
 					}
 				}else{
 					rowData.push("");
@@ -36,7 +38,6 @@ export default function(list, options, setFileContents){
 			rows.push(rowData);
 		});
 
-
 		//convert rows to worksheet
 		XLSX.utils.sheet_add_aoa(worksheet, rows);
 

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

@@ -405,20 +405,23 @@ class Edit extends Module{
 
 		this.invalidEdit = false;
 
+		console.log("clear", cancel, cell, cell.validate)
+
 		if(cell){
 			this.currentCell = false;
 
 			cellEl = cell.getElement();
 
 			if(cancel){
-				if(cell.validate){
-					cell.validate();
+				if(cell.column.modules.validate && this.table.modExists("validate")){
+					this.table.modules.validate.cellValidate(cell);
 				}
 			}else{
 				cellEl.classList.remove("tabulator-validation-fail");
 			}
 
 			cellEl.classList.remove("tabulator-editing");
+
 			while(cellEl.firstChild) cellEl.removeChild(cellEl.firstChild);
 
 			cell.row.getElement().classList.remove("tabulator-row-editing");
@@ -442,6 +445,7 @@ class Edit extends Module{
 				cell.column.definition.cellEditCancelled.call(this.table, component);
 			}
 
+			this.dispatch("edit-cancelled", cell);
 			this.dispatchExternal("cellEditCancelled", component);
 		}
 	}
@@ -572,10 +576,6 @@ class Edit extends Module{
 
 					cell.setValue(value, true);
 
-					if(self.table.options.dataTree && self.table.modExists("dataTree")){
-						self.table.modules.dataTree.checkForRestyle(cell);
-					}
-
 					if(valid !== true){
 						element.classList.add("tabulator-validation-fail");
 						self.table.externalEvents.dispatch("validationFailed", cell.getComponent(), value, valid);
@@ -600,10 +600,6 @@ class Edit extends Module{
 		function cancel(){
 			if(self.currentCell === cell){
 				self.cancelEdit();
-
-				if(self.table.options.dataTree && self.table.modExists("dataTree")){
-					self.table.modules.dataTree.checkForRestyle(cell);
-				}
 			}else{
 				// console.warn("Edit Success Error - cannot call cancel on a cell that is no longer being edited");
 			}

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

@@ -1,8 +1,8 @@
 //draggable progress bar
 export default function(cell, onRendered, success, cancel, editorParams){
 	var element = cell.getElement(),
-	max = typeof editorParams.max === "undefined" ? ( element.getElementsByTagName("div")[0]?.getAttribute("max") || 100) : editorParams.max,
-	min = typeof editorParams.min === "undefined" ? ( element.getElementsByTagName("div")[0]?.getAttribute("min") || 0) : editorParams.min,
+	max = typeof editorParams.max === "undefined" ? ((element.getElementsByTagName("div")[0] && element.getElementsByTagName("div")[0].getAttribute("max")) || 100) : editorParams.max,
+	min = typeof editorParams.min === "undefined" ? ((element.getElementsByTagName("div")[0] && element.getElementsByTagName("div")[0].getAttribute("min")) || 0) : editorParams.min,
 	percent = (max - min) / 100,
 	value = cell.getValue() || 0,
 	handle = document.createElement("div"),

package/src/js/modules/Export/Export.js

@@ -63,7 +63,7 @@ class Export extends Module{
 			switch(range){
 				case true:
 				case "visible":
-				rows = this.table.rowManager.getVisibleRows(true);
+				rows = this.table.rowManager.getVisibleRows(false, true);
 				break;
 
 				case "all":

package/src/js/modules/Filter/Filter.js

@@ -15,6 +15,7 @@ class Filter extends Module{
 		this.prevHeaderFilterChangeCheck = "{}";
 
 		this.changed = false; //has filtering changed since last render
+		this.tableInitialized = false;
 
 		this.registerTableOption("filterMode", "local"); //local or remote filtering
 
@@ -82,6 +83,8 @@ class Filter extends Module{
 				}
 			});
 		}
+
+		this.tableInitialized = true;
 	}
 
 	remoteFilterParams(data, config, silent, params){
@@ -546,10 +549,12 @@ class Filter extends Module{
 	}
 
 	refreshFilter(){
-		if(this.table.options.filterMode === "remote"){
-			this.reloadData();
-		}else{
-			this.refreshData();
+		if(this.tableInitialized){
+			if(this.table.options.filterMode === "remote"){
+				this.reloadData();
+			}else{
+				this.refreshData(true);
+			}
 		}
 
 		//TODO - Persist left position of row manager

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

@@ -6,7 +6,7 @@ export default function(cell, formatterParams, onRendered){
 	var value = cell.getValue();
 
 	if(typeof DT != "undefined"){
-		var newDatetime = (window.DateTime || luxon.DateTime).fromFormat(value, inputFormat);
+		var newDatetime = DT.fromFormat(String(value), inputFormat);
 
 		if(newDatetime.isValid){
 
@@ -17,7 +17,7 @@ export default function(cell, formatterParams, onRendered){
 			return newDatetime.toFormat(outputFormat);
 		}else{
 
-			if(invalid === true){
+			if(invalid === true || !value){
 				return value;
 			}else if(typeof invalid === "function"){
 				return invalid(value);

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

@@ -9,7 +9,7 @@ export default function (cell, formatterParams, onRendered) {
 	var value = cell.getValue();
 
 	if(typeof DT != "undefined"){
-		var newDatetime = DT.fromFormat(value, inputFormat);
+		var newDatetime = DT.fromFormat(String(value), inputFormat);
 
 		if (newDatetime.isValid){
 			if(humanize){

package/src/js/modules/FrozenColumns/FrozenColumns.js

@@ -35,7 +35,7 @@ class FrozenColumns extends Module{
 		this.subscribe("cell-layout", this.layoutCell.bind(this));
 		this.subscribe("column-init", this.initializeColumn.bind(this));
 		this.subscribe("column-width", this.layout.bind(this));
-		this.subscribe("row-layout-before", this.layoutRow.bind(this));
+		this.subscribe("row-layout-after", this.layoutRow.bind(this));
 		this.subscribe("table-layout", this.layout.bind(this));
 		this.subscribe("scroll-horizontal", this.scrollHorizontal.bind(this));
 		this.subscribe("columns-loading", this.reset.bind(this));

package/src/js/modules/FrozenRows/FrozenRows.js

@@ -99,7 +99,10 @@ class FrozenRows extends Module{
 
 		if(index > -1){
 			var rowEl = row.getElement();
-			rowEl.parentNode.removeChild(rowEl);
+
+			if(rowEl.parentNode){
+				rowEl.parentNode.removeChild(rowEl);
+			}
 
 			this.rows.splice(index, 1);
 		}