tabulator-tables 5.2.5 → 5.3.0

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

@@ -13,7 +13,7 @@ export default class VirtualDomVertical extends Renderer{
 		this.vDomRowHeight = 20; //approximation of row heights for padding
 
 		this.vDomTop = 0; //hold position for first rendered row in the virtual DOM
-		this.vDomBottom = 0; //hold possition for last rendered row in the virtual DOM
+		this.vDomBottom = 0; //hold position for last rendered row in the virtual DOM
 
 		this.vDomScrollPosTop = 0; //last scroll position of the vDom top;
 		this.vDomScrollPosBottom = 0; //last scroll position of the vDom bottom;
@@ -98,7 +98,12 @@ export default class VirtualDomVertical extends Renderer{
 			callback();
 		}
 
-		this._virtualRenderFill((topRow === false ? this.rows.length - 1 : topRow), true, topOffset || 0);
+		if(this.rows().length){
+			this._virtualRenderFill((topRow === false ? this.rows.length - 1 : topRow), true, topOffset || 0);
+		}else{
+			this.clear();
+			this.table.rowManager._showPlaceholder();
+		}
 
 		this.scrollColumns(left);
 	}
@@ -292,7 +297,7 @@ export default class VirtualDomVertical extends Renderer{
 
 			if(!position){
 				this.vDomTopPad = 0;
-				//adjust rowheight to match average of rendered elements
+				//adjust row height to match average of rendered elements
 				this.vDomRowHeight = Math.floor((rowsHeight + topPadHeight) / i);
 				this.vDomBottomPad = this.vDomRowHeight * (rowsCount - this.vDomBottom -1);
 
@@ -330,9 +335,10 @@ export default class VirtualDomVertical extends Renderer{
 		addedRows = [],
 		paddingAdjust = 0,
 		index = this.vDomTop -1,
-		i = 0;
+		i = 0,
+		working = true;
 
-		while(true){
+		while(working){
 			if(this.vDomTop){
 				let row = rows[index],
 				rowHeight, initialized;
@@ -368,15 +374,15 @@ export default class VirtualDomVertical extends Renderer{
 						i++;
 
 					}else{
-						break;
+						working = false;
 					}
 
 				}else{
-					break;
+					working = false;
 				}
 
 			}else{
-				break;
+				working = false;
 			}
 		}
 
@@ -405,11 +411,12 @@ export default class VirtualDomVertical extends Renderer{
 	_removeTopRow(rows, fillableSpace){
 		var removableRows = [],
 		paddingAdjust = 0,
-		i = 0;
+		i = 0,
+		working = true;
 
-		while(true){
+		while(working){
 			let row = rows[this.vDomTop],
-			rowHeight, diff;
+			rowHeight;
 
 			if(row && i < this.vDomMaxRenderChain){
 				rowHeight = row.getHeight() || this.vDomRowHeight;
@@ -423,10 +430,10 @@ export default class VirtualDomVertical extends Renderer{
 					removableRows.push(row);
 					i++;
 				}else{
-					break;
+					working = false;
 				}
 			}else{
-				break;
+				working = false;
 			}
 		}
 
@@ -450,9 +457,10 @@ export default class VirtualDomVertical extends Renderer{
 		addedRows = [],
 		paddingAdjust = 0,
 		index = this.vDomBottom + 1,
-		i = 0;
+		i = 0,
+		working = true;
 
-		while(true){
+		while(working){
 			let row = rows[index],
 			rowHeight, initialized;
 
@@ -486,10 +494,10 @@ export default class VirtualDomVertical extends Renderer{
 					index++;
 					i++;
 				}else{
-					break;
+					working = false;
 				}
 			}else{
-				break;
+				working = false;
 			}
 		}
 
@@ -514,11 +522,12 @@ export default class VirtualDomVertical extends Renderer{
 	_removeBottomRow(rows, fillableSpace){
 		var removableRows = [],
 		paddingAdjust = 0,
-		i = 0;
+		i = 0,
+		working = true;
 
-		while(true){
+		while(working){
 			let row = rows[this.vDomBottom],
-			rowHeight, diff;
+			rowHeight;
 
 			if(row && i < this.vDomMaxRenderChain){
 				rowHeight = row.getHeight() || this.vDomRowHeight;
@@ -532,10 +541,10 @@ export default class VirtualDomVertical extends Renderer{
 					removableRows.push(row);
 					i++;
 				}else{
-					break;
+					working = false;
 				}
 			}else{
-				break;
+				working = false;
 			}
 		}
 

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

@@ -13,11 +13,13 @@ export default class Row extends CoreFeature{
 		this.modules = {}; //hold module variables;
 		this.cells = [];
 		this.height = 0; //hold element height
-		this.heightStyled = ""; //hold element height prestyled to improve render efficiency
+		this.heightStyled = ""; //hold element height pre-styled to improve render efficiency
 		this.manualHeight = false; //user has manually set row height
 		this.outerHeight = 0; //hold elements outer height
 		this.initialized = false; //element has been rendered
 		this.heightInitialized = false; //element has resized cells to fit
+		this.position = 0; //store position of element in row list
+		this.positionWatchers = [];
 		
 		this.component = null;
 		
@@ -246,14 +248,14 @@ export default class Row extends CoreFeature{
 			newRowData = this.chain("row-data-changing", [this, tempData, updatedData], null, updatedData);
 			
 			//set data
-			for (var attrname in newRowData) {
+			for (let attrname in newRowData) {
 				this.data[attrname] = newRowData[attrname];
 			}
 			
 			this.dispatch("row-data-save-after", this);
 			
 			//update affected cells only
-			for (var attrname in updatedData) {
+			for (let attrname in updatedData) {
 				
 				let columns = this.table.columnManager.getColumnsByFieldRoot(attrname);
 				
@@ -375,9 +377,7 @@ export default class Row extends CoreFeature{
 	}
 	
 	deleteActual(blockRedraw){
-		var index = this.table.rowManager.getRowIndex(this);
-		
-		this.detatchModules();
+		this.detachModules();
 		
 		this.table.rowManager.deleteRow(this, blockRedraw);
 		
@@ -390,7 +390,7 @@ export default class Row extends CoreFeature{
 		this.dispatch("row-deleted", this);
 	}
 	
-	detatchModules(){
+	detachModules(){
 		this.dispatch("row-deleting", this);
 	}
 	
@@ -403,7 +403,7 @@ export default class Row extends CoreFeature{
 	}
 	
 	wipe(){
-		this.detatchModules();
+		this.detachModules();
 		this.deleteCells();
 		
 		if(this.element){
@@ -417,6 +417,30 @@ export default class Row extends CoreFeature{
 		this.element = false;
 		this.modules = {};
 	}
+
+	isDisplayed(){
+		return this.table.rowManager.getDisplayRows().includes(this);
+	}
+
+	getPosition(){
+		return this.isDisplayed() ? this.position : false;
+	}
+
+	setPosition(position){
+		if(position != this.position){
+			this.position = position;
+
+			this.positionWatchers.forEach((callback) => {
+				callback(this.position);
+			});
+		}
+	}
+
+	watchPosition(callback){
+		this.positionWatchers.push(callback);
+
+		callback(this.position);
+	}
 	
 	getGroup(){
 		return this.modules.group || false;

package/src/js/core/row/RowComponent.js

@@ -9,10 +9,10 @@ export default class RowComponent {
 				if (typeof target[name] !== "undefined") {
 					return target[name];
 				}else{
-					return target._row.table.componentFunctionBinder.handle("row", target._row, name)
+					return target._row.table.componentFunctionBinder.handle("row", target._row, name);
 				}
 			}
-		})
+		});
 	}
 
 	getData(transform){
@@ -42,8 +42,12 @@ export default class RowComponent {
 		return this._row.getData("data")[this._row.table.options.index];
 	}
 
-	getPosition(active){
-		return this._row.table.rowManager.getRowPosition(this._row, active);
+	getPosition(){
+		return this._row.getPosition();
+	}
+
+	watchPosition(callback){
+		return this._row.watchPosition(callback);
 	}
 
 	delete(){

package/src/js/core/tools/Alert.js

@@ -1,63 +1,62 @@
 import CoreFeature from '../CoreFeature.js';
-import Helpers from './Helpers.js';
 
 export default class Alert extends CoreFeature{
-    constructor(table){
-        super(table);
+	constructor(table){
+		super(table);
         
-        this.element = this._createAlertElement();
-        this.msgElement = this._createMsgElement();
-        this.type = null;
+		this.element = this._createAlertElement();
+		this.msgElement = this._createMsgElement();
+		this.type = null;
         
-        this.element.appendChild(this.msgElement);
-    }
+		this.element.appendChild(this.msgElement);
+	}
     
-    _createAlertElement(){
-        var el = document.createElement("div");
-        el.classList.add("tabulator-alert");
-        return el;
-    }
+	_createAlertElement(){
+		var el = document.createElement("div");
+		el.classList.add("tabulator-alert");
+		return el;
+	}
     
-    _createMsgElement(){
-        var el = document.createElement("div");
-        el.classList.add("tabulator-alert-msg");
-        el.setAttribute("role", "alert");
-        return el;
-    }
+	_createMsgElement(){
+		var el = document.createElement("div");
+		el.classList.add("tabulator-alert-msg");
+		el.setAttribute("role", "alert");
+		return el;
+	}
     
-    _typeClass(){
-        return "tabulator-alert-state-" + this.type;
-    }
+	_typeClass(){
+		return "tabulator-alert-state-" + this.type;
+	}
     
-    alert(content, type = "msg"){
-        if(content){
-            this.clear();
+	alert(content, type = "msg"){
+		if(content){
+			this.clear();
             
-            this.type = type;
+			this.type = type;
             
-            while(this.msgElement.firstChild) this.msgElement.removeChild(this.msgElement.firstChild);
+			while(this.msgElement.firstChild) this.msgElement.removeChild(this.msgElement.firstChild);
             
-            this.msgElement.classList.add(this._typeClass());
+			this.msgElement.classList.add(this._typeClass());
             
-            if(typeof content === "function"){
-                content = content();
-            }
+			if(typeof content === "function"){
+				content = content();
+			}
             
-            if(content instanceof HTMLElement){
-                this.msgElement.appendChild(content);
-            }else{
-                this.msgElement.innerHTML = content;
-            }
+			if(content instanceof HTMLElement){
+				this.msgElement.appendChild(content);
+			}else{
+				this.msgElement.innerHTML = content;
+			}
             
-            this.table.element.appendChild(this.element);
-        }
-    }
+			this.table.element.appendChild(this.element);
+		}
+	}
     
-    clear(){
-        if(this.element.parentNode){
-            this.element.parentNode.removeChild(this.element);
-        }
+	clear(){
+		if(this.element.parentNode){
+			this.element.parentNode.removeChild(this.element);
+		}
         
-        this.msgElement.classList.remove(this._typeClass());
-    }
+		this.msgElement.classList.remove(this._typeClass());
+	}
 }

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

@@ -12,7 +12,7 @@ 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, handler)
+			console.warn("Unable to bind component handler, a matching function name is already bound", type, funcName, handler);
 		}else{
 			this.bindings[type][funcName] = handler;
 		}
@@ -23,7 +23,9 @@ export default class ComponentFunctionBinder{
 			return this.bindings[type][name].bind(null, component);
 		}else{
 			if(name !== "then" && typeof name === "string" && !name.startsWith("_")){
-					console.error("The " + type + " component does not have a " + name + " function, have you checked that you have the correct Tabulator module installed?")
+				if(this.table.options.debugInvalidComponentFuncs){
+					console.error("The " + type + " component does not have a " + name + " function, have you checked that you have the correct Tabulator module installed?");
+				}
 			}
 		}
 	}

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

@@ -63,9 +63,9 @@ export default class DataLoader extends CoreFeature{
 					this.clearAlert();
 				}, this.table.options.dataLoaderErrorTimeout);
 			})
-			.finally(() => {
-				this.loading = false;
-			})
+				.finally(() => {
+					this.loading = false;
+				});
 		}else{
 			this.dispatchExternal("dataLoaded", data);
 

package/src/js/core/tools/DeprecationAdvisor.js

@@ -0,0 +1,47 @@
+import CoreFeature from '../CoreFeature.js';
+
+export default class DeprecationAdvisor extends CoreFeature{
+	
+	constructor(table){
+		super(table);
+	}
+	
+	_warnUser(){
+		if(this.options("debugDeprecation")){
+			console.warn(...arguments);
+		}
+	}
+	
+	check(oldOption, newOption){
+		var msg = "";
+		
+		if(typeof this.options(oldOption) !== "undefined"){
+			msg = "Deprecated Setup Option - Use of the %c" + oldOption + "%c option is now deprecated";
+			
+			if(newOption){
+				msg = msg + ", Please use the %c" + newOption + "%c option instead";
+				this._warnUser(msg, 'font-weight: bold;', 'font-weight: normal;', 'font-weight: bold;', 'font-weight: normal;');
+			}else{
+				this._warnUser(msg, 'font-weight: bold;', 'font-weight: normal;');
+			}
+			
+			return false;
+		}else{
+			return true;
+		}
+	}
+	
+	checkMsg(oldOption, msg){
+		if(typeof this.options(oldOption) !== "undefined"){
+			this._warnUser("%cDeprecated Setup Option - Use of the %c" + oldOption + " %c option is now deprecated, " + msg, 'font-weight: normal;', 'font-weight: bold;', 'font-weight: normal;');
+			
+			return false;
+		}else{
+			return true;
+		}
+	}
+	
+	msg(msg){
+		this._warnUser(msg);
+	}
+}

package/src/js/core/tools/ExternalEventBus.js

@@ -18,7 +18,7 @@ export default class ExternalEventBus {
 		this.subscriptionNotifiers[key].push(callback);
 
 		if(this.subscribed(key)){
-			this._notifiySubscriptionChange(key, true);
+			this._notifySubscriptionChange(key, true);
 		}
 	}
 
@@ -29,7 +29,7 @@ export default class ExternalEventBus {
 
 		this.events[key].push(callback);
 
-		this._notifiySubscriptionChange(key, true);
+		this._notifySubscriptionChange(key, true);
 	}
 
 	unsubscribe(key, callback){
@@ -55,14 +55,14 @@ export default class ExternalEventBus {
 			return;
 		}
 
-		this._notifiySubscriptionChange(key, false);
+		this._notifySubscriptionChange(key, false);
 	}
 
 	subscribed(key){
 		return this.events[key] && this.events[key].length;
 	}
 
-	_notifiySubscriptionChange(key, subscribed){
+	_notifySubscriptionChange(key, subscribed){
 		var notifiers = this.subscriptionNotifiers[key];
 
 		if(notifiers){
@@ -100,6 +100,6 @@ export default class ExternalEventBus {
 			console.log(...args);
 		}
 
-		return this._dispatch(...arguments)
+		return this._dispatch(...arguments);
 	}
 }

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

@@ -1,5 +1,4 @@
 import CoreFeature from '../CoreFeature.js';
-import Helpers from './Helpers.js';
 import Row from '../row/Row.js';
 
 export default class InteractionManager extends CoreFeature {
@@ -50,7 +49,7 @@ export default class InteractionManager extends CoreFeature {
 				subscriber:null,
 				target:null,
 			},
-		}
+		};
 		
 		this.pseudoTracking = false;
 	}
@@ -69,8 +68,8 @@ export default class InteractionManager extends CoreFeature {
 			listenerMap[listener] = {
 				handler:null,
 				components:[],
-			}
-		})
+			};
+		});
 		
 		this.listeners = listenerMap;
 	}
@@ -136,7 +135,7 @@ export default class InteractionManager extends CoreFeature {
 			}
 		}
 		
-		this.subscribe("table-destroy", this.clearWatchers.bind(this))
+		this.subscribe("table-destroy", this.clearWatchers.bind(this));
 	}
 	
 	subscriptionChanged(component, key, added){
@@ -174,12 +173,12 @@ export default class InteractionManager extends CoreFeature {
 			if(listener.components.length){
 				if(!listener.handler){
 					listener.handler = this.track.bind(this, key);
-					this.el.addEventListener(key, listener.handler)
+					this.el.addEventListener(key, listener.handler);
 					// this.el.addEventListener(key, listener.handler, {passive: true})
 				}
 			}else{
 				if(listener.handler){
-					this.el.removeEventListener(key, listener.handler)
+					this.el.removeEventListener(key, listener.handler);
 					listener.handler = null;
 				}
 			}
@@ -209,7 +208,7 @@ export default class InteractionManager extends CoreFeature {
 			
 			let abort = classList.filter((item) => {
 				return this.abortClasses.includes(item);
-			})
+			});
 			
 			if(abort.length){
 				break;
@@ -217,7 +216,7 @@ export default class InteractionManager extends CoreFeature {
 			
 			let elTargets = classList.filter((item) => {
 				return componentMap.includes(item);
-			})
+			});
 			
 			for (let target of elTargets) {
 				targets[this.componentMap[target]] = el;
@@ -248,36 +247,36 @@ export default class InteractionManager extends CoreFeature {
 				switch(key){
 					case "row":
 					case "group":
-					if(listener.components.includes("row") || listener.components.includes("cell") || listener.components.includes("group")){
-						let rows = this.table.rowManager.getVisibleRows(true);
+						if(listener.components.includes("row") || listener.components.includes("cell") || listener.components.includes("group")){
+							let rows = this.table.rowManager.getVisibleRows(true);
 						
-						component = rows.find((row) => {
-							return row.getElement() === target;
-						});
+							component = rows.find((row) => {
+								return row.getElement() === target;
+							});
 						
-						if(targets["row"] && targets["row"].parentNode && targets["row"].parentNode.closest(".tabulator-row")){
-							targets[key] = false;
+							if(targets["row"] && targets["row"].parentNode && targets["row"].parentNode.closest(".tabulator-row")){
+								targets[key] = false;
+							}
 						}
-					}
-					break;
+						break;
 					
 					case "column":
-					if(listener.components.includes("column")){
-						component = this.table.columnManager.findColumn(target);
-					}
-					break
+						if(listener.components.includes("column")){
+							component = this.table.columnManager.findColumn(target);
+						}
+						break;
 					
 					case "cell":
-					if(listener.components.includes("cell")){
-						if(targets["row"] instanceof Row){
-							component = targets["row"].findCell(target);
-						}else{	
-							if(targets["row"]){
-								console.warn("Event Target Lookup Error - The row this cell is attached to cannot be found, has the table been reinitialized without being destroyed first?")
+						if(listener.components.includes("cell")){
+							if(targets["row"] instanceof Row){
+								component = targets["row"].findCell(target);
+							}else{	
+								if(targets["row"]){
+									console.warn("Event Target Lookup Error - The row this cell is attached to cannot be found, has the table been reinitialized without being destroyed first?");
+								}
 							}
 						}
-					}
-					break;
+						break;
 				}
 			}
 			
@@ -286,7 +285,7 @@ export default class InteractionManager extends CoreFeature {
 				targetMatches[key] = {
 					target:target,
 					component:component,
-				}
+				};
 			}
 		}
 		
@@ -310,7 +309,7 @@ export default class InteractionManager extends CoreFeature {
 			let listener = this.listeners[key];
 			
 			if(listener.handler){
-				this.el.removeEventListener(key, listener.handler)
+				this.el.removeEventListener(key, listener.handler);
 				listener.handler = null;
 			}
 		}

package/src/js/core/tools/InternalEventBus.js

@@ -18,7 +18,7 @@ export default class InternalEventBus {
 		this.subscriptionNotifiers[key].push(callback);
 
 		if(this.subscribed(key)){
-			this._notifiySubscriptionChange(key, true);
+			this._notifySubscriptionChange(key, true);
 		}
 	}
 
@@ -33,7 +33,7 @@ export default class InternalEventBus {
 			return a.priority - b.priority;
 		});
 
-		this._notifiySubscriptionChange(key, true);
+		this._notifySubscriptionChange(key, true);
 	}
 
 	unsubscribe(key, callback){
@@ -57,7 +57,7 @@ export default class InternalEventBus {
 			return;
 		}
 
-		this._notifiySubscriptionChange(key, false);
+		this._notifySubscriptionChange(key, false);
 	}
 
 	subscribed(key){
@@ -100,7 +100,7 @@ export default class InternalEventBus {
 		return confirmed;
 	}
 
-	_notifiySubscriptionChange(key, subscribed){
+	_notifySubscriptionChange(key, subscribed){
 		var notifiers = this.subscriptionNotifiers[key];
 
 		if(notifiers){
@@ -116,7 +116,7 @@ export default class InternalEventBus {
 
 		if(this.events[key]){
 			this.events[key].forEach((subscriber) => {
-				let callResult = subscriber.callback.apply(this, args);
+				subscriber.callback.apply(this, args);
 			});
 		}
 	}