tabulator-tables 5.1.8 → 5.2.0

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

@@ -266,11 +266,12 @@ class Filter extends Module{
 					}
 
 					self.headerFilters[field] = {value:value, func:filterFunc, type:type, params:params || {}};
-
 				}else{
 					delete self.headerFilters[field];
 				}
 
+				column.modules.filter.value = value;
+
 				filterChangeCheck = JSON.stringify(self.headerFilters);
 
 				if(self.prevHeaderFilterChangeCheck !== filterChangeCheck){
@@ -300,6 +301,8 @@ class Filter extends Module{
 		field = column.getField(),
 		filterElement, editor, editorElement, cellWrapper, typingTimer, searchTrigger, params;
 
+		column.modules.filter.value = initialValue;
+
 		//handle aborted edit
 		function cancel(){}
 
@@ -522,7 +525,7 @@ class Filter extends Module{
 	//programmatically get value of header filter
 	getHeaderFilterValue(column){
 		if(column.modules.filter && column.modules.filter.headerElement){
-			return column.modules.filter.headerElement.value;
+			return column.modules.filter.value;
 		} else {
 			console.warn("Column Filter Error - No header filter set on column:", column.getField());
 		}
@@ -821,7 +824,7 @@ class Filter extends Module{
 		activeRowComponents = [];
 
 		if(this.subscribedExternal("dataFiltering")){
-			this.dispatchExternal("dataFiltering", this.getFilters());
+			this.dispatchExternal("dataFiltering", this.getFilters(true));
 		}
 
 		if(this.table.options.filterMode !== "remote" && (this.filterList.length || Object.keys(this.headerFilters).length)){
@@ -842,7 +845,7 @@ class Filter extends Module{
 				activeRowComponents.push(row.getComponent());
 			});
 
-			this.dispatchExternal("dataFiltered", this.getFilters(), activeRowComponents);
+			this.dispatchExternal("dataFiltered", this.getFilters(true), activeRowComponents);
 		}
 
 		return activeRows;

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

@@ -6,7 +6,15 @@ export default function(cell, formatterParams, onRendered){
 	var value = cell.getValue();
 
 	if(typeof DT != "undefined"){
-		var newDatetime = inputFormat === "iso" ? DT.fromISO(String(value)) : DT.fromFormat(String(value), inputFormat);
+		var newDatetime;
+
+		if(DT.isDateTime(value)){
+			 newDatetime = value;
+		 }else if(inputFormat === "iso"){
+			 newDatetime = DT.fromISO(String(value));
+		 }else{
+			 newDatetime = DT.fromFormat(String(value), inputFormat);
+		 }
 
 		if(newDatetime.isValid){
 			if(formatterParams.timezone){

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

@@ -9,12 +9,19 @@ export default function (cell, formatterParams, onRendered) {
 	var value = cell.getValue();
 
 	if(typeof DT != "undefined"){
-		
-		var newDatetime = inputFormat === "iso" ? DT.fromISO(String(value)) : DT.fromFormat(String(value), inputFormat);
+		var newDatetime;
+
+		if(DT.isDateTime(value)){
+			 newDatetime = value;
+		 }else if(inputFormat === "iso"){
+			 newDatetime = DT.fromISO(String(value));
+		 }else{
+			 newDatetime = DT.fromFormat(String(value), inputFormat);
+		 }
 
 		if (newDatetime.isValid){
 			if(humanize){
-				// return moment.duration(newDatetime.diff(date)).humanize(suffix);
+				return newDatetime.diff(date, unit).toHuman()  + (suffix ? " " + suffix : "");
 			}else{
 				return parseInt(newDatetime.diff(date, unit)[unit]) + (suffix ? " " + suffix : "");
 			}

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

@@ -6,9 +6,20 @@ export default function(cell, formatterParams, onRendered){
 	el = document.createElement("a"),
 	data;
 
+	function labelTraverse(path, data){
+		var item = path.shift(),
+		value = data[item];
+		
+		if(path.length && typeof value === "object"){
+			return labelTraverse(path, value);
+		}
+
+		return value;
+	};
+
 	if(formatterParams.labelField){
 		data = cell.getData();
-		label = data[formatterParams.labelField];
+		label = labelTraverse(formatterParams.labelField.split(this.table.options.nestedFieldSeparator), data);
 	}
 
 	if(formatterParams.label){

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

@@ -25,10 +25,12 @@ export default function(cell, formatterParams, onRendered){
 	integer = number[0];
 	decimal = number.length > 1 ? decimalSym + number[1] : "";
 
-	rgx = /(\d+)(\d{3})/;
+	if (formatterParams.thousand !== false) {
+		rgx = /(\d+)(\d{3})/;
 
-	while (rgx.test(integer)){
-		integer = integer.replace(rgx, "$1" + thousandSym + "$2");
+		while (rgx.test(integer)){
+			integer = integer.replace(rgx, "$1" + thousandSym + "$2");
+		}
 	}
 
 	return after ? sign + integer + decimal + symbol : sign + symbol + integer + decimal;

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

@@ -3,10 +3,11 @@ export default function(cell, formatterParams, onRendered){
 	element = cell.getElement(),
 	empty = formatterParams.allowEmpty,
 	truthy = formatterParams.allowTruthy,
+	trueValueSet = Object.keys(formatterParams).includes("trueValue"),
 	tick = typeof formatterParams.tickElement !== "undefined" ? formatterParams.tickElement : '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#2DC214" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34  c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351  l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07  l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>',
 	cross = typeof formatterParams.crossElement !== "undefined" ? formatterParams.crossElement : '<svg enable-background="new 0 0 24 24" height="14" width="14"  viewBox="0 0 24 24" xml:space="preserve" ><path fill="#CE1515" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272  c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0  l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269  c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73  L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"/></svg>';
 
-	if((truthy && value) || (value === true || value === "true" || value === "True" || value === 1 || value === "1")){
+	if((trueValueSet && value === formatterParams.trueValue) || (!trueValueSet && ((truthy && value) || (value === true || value === "true" || value === "True" || value === 1 || value === "1")))){
 		element.setAttribute("aria-checked", true);
 		return tick || "";
 	}else{

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

@@ -39,7 +39,12 @@ class FrozenColumns extends Module{
 		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("scroll-horizontal", this.scrollHorizontal.bind(this));
 		this.subscribe("columns-loading", this.reset.bind(this));
+
+		this.subscribe("column-add", this.reinitializeColumns.bind(this));
+		this.subscribe("column-delete", this.reinitializeColumns.bind(this));
+
 		this.subscribe("table-redraw", this.layout.bind(this));
 		this.subscribe("layout-refreshing", this.blockLayout.bind(this));
 		this.subscribe("layout-refreshed", this.unblockLayout.bind(this));
@@ -56,6 +61,14 @@ class FrozenColumns extends Module{
 	layoutCell(cell){
 		this.layoutElement(cell.element, cell.column)
 	}
+
+	reinitializeColumns(){
+		this.reset();
+
+		this.table.columnManager.columnsByIndex.forEach((column) => {
+			this.initializeColumn(column);
+		});
+	}
 	
 	//initialize specific column
 	initializeColumn(column){
@@ -83,8 +96,6 @@ class FrozenColumns extends Module{
 	}
 	
 	frozenCheck(column){
-		var frozen = false;
-		
 		if(column.parent.isGroup && column.definition.frozen){
 			console.warn("Frozen Column Error - Parent column group must be frozen, not individual columns or sub column groups");
 		}
@@ -94,8 +105,6 @@ class FrozenColumns extends Module{
 		}else{
 			return column.definition.frozen;
 		}
-		
-		return frozen;
 	}
 	
 	//quick layout to smooth horizontal scrolling
@@ -246,11 +255,24 @@ class FrozenColumns extends Module{
 	
 	//layout columns appropriately
 	layout(){
+		var visibleRows = [],
+		otherRows = [];
+
 		if(this.active && !this.blocked){
 			//calculate row padding
 			this.calcMargins();
-			
-			this.table.rowManager.getDisplayRows().forEach((row) =>{
+
+			//calculate left columns
+			this.layoutColumnPosition();
+
+			visibleRows = this.table.rowManager.getVisibleRows();
+			otherRows = this.table.rowManager.getDisplayRows().filter(row => !visibleRows.includes(row));
+
+			otherRows.forEach((row) =>{
+				row.deinitialize();
+			});
+
+			visibleRows.forEach((row) =>{
 				if(row.type === "row"){
 					this.layoutRow(row);
 				}
@@ -258,12 +280,12 @@ class FrozenColumns extends Module{
 			
 			this.layoutCalcRows();
 			
-			//calculate left columns
-			this.layoutColumnPosition(true);
+
 		}
 	}
 	
 	layoutRow(row){
+		// console.trace("row")
 		var rowEl = row.getElement();
 		
 		rowEl.style.paddingLeft = this.leftMargin;

package/src/js/modules/HtmlTableImport/HtmlTableImport.js

@@ -16,7 +16,11 @@ class HtmlTableImport extends Module{
 
 	tableElementCheck(){
 		if(this.table.originalElement && this.table.originalElement.tagName === "TABLE"){
-			this.parseTable();
+			if(this.table.originalElement.childNodes.length){
+				this.parseTable();
+			}else{
+				console.warn("Unable to parse data from empty table tag, Tabulator should be initialized on a div tag unless importing data from a table element.");
+			}
 		}
 	}
 

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

@@ -1,5 +1,4 @@
 import Module from '../../core/Module.js';
-import Helpers from '../../core/tools/Helpers.js';
 
 class Menu extends Module{
 	
@@ -7,69 +6,44 @@ class Menu extends Module{
 		super(table);
 		
 		this.menuContainer = null;
-		this.menuElements = [];
-		this.blurEvent = this.hideMenu.bind(this);
-		this.escEvent = this.escMenu.bind(this);
 		this.nestedMenuBlock = false;
-		this.positionReversedX = false;
 		
 		this.currentComponent = null;
+		this.rootPopup = null;
 		
 		this.columnSubscribers = {};
 		
+		this.registerTableOption("menuContainer", undefined); //deprecated
+
 		this.registerTableOption("rowContextMenu", false);
 		this.registerTableOption("rowClickMenu", false);
 		this.registerTableOption("groupContextMenu", false);
 		this.registerTableOption("groupClickMenu", false);
-		this.registerTableOption("menuContainer", false);
 		
 		this.registerColumnOption("headerContextMenu");
 		this.registerColumnOption("headerClickMenu");
 		this.registerColumnOption("headerMenu");
+		this.registerColumnOption("headerMenuIcon");
 		this.registerColumnOption("contextMenu");
 		this.registerColumnOption("clickMenu");
+		
 	}
 	
 	initialize(){
-		this.lookupMenuContainer();
-		
+		this.deprecationCheck();
 		this.initializeRowWatchers();
 		this.initializeGroupWatchers();
 		
 		this.subscribe("column-init", this.initializeColumn.bind(this));
 	}
-	
-	lookupMenuContainer(){
-		
-		this.menuContainer = this.table.options.menuContainer;
-		
-		if(typeof this.menuContainer === "string"){
-			this.menuContainer = document.querySelector(this.menuContainer);
-			
-			if(!this.menuContainer){
-				console.warn("Menu Error - no container element found matching selector:",  this.table.options.menuContainer , "(defaulting to document body)");
-			}
-		}else if (this.menuContainer === true){
-			this.menuContainer = this.table.element;
-		}
-		
-		if(this.menuContainer && !this.checkMenuContainerIsParent(this.menuContainer)){
-			this.menuContainer = false;
-			console.warn("Menu Error - container element does not contain this table:",  this.table.options.menuContainer , "(defaulting to document body)");
-		}
-		
-		if(!this.menuContainer){
-			this.menuContainer = document.body;
-		}
-	}
-	
-	checkMenuContainerIsParent(container, element = this.table.element){
-		if(container === element){
-			return true;
-		}else{
-			return element.parentNode ? this.checkMenuContainerIsParent(container, element.parentNode) : false;
+
+	deprecationCheck(){
+		if(typeof this.table.options.menuContainer !== "undefined"){
+			console.warn("Use of the menuContainer option is now deprecated. Please use the popupContainer option instead");
+
+			this.table.options.popupContainer = this.table.options.menuContainer;
 		}
-	}
+	}	
 	
 	initializeRowWatchers(){
 		if(this.table.options.rowContextMenu){
@@ -127,11 +101,25 @@ class Menu extends Module{
 	}
 	
 	initializeColumnHeaderMenu(column){
-		var headerMenuEl;
+		var icon = column.definition.headerMenuIcon,
+		headerMenuEl;
 		
 		headerMenuEl = document.createElement("span");
-		headerMenuEl.classList.add("tabulator-header-menu-button");
-		headerMenuEl.innerHTML = "⋮";
+		headerMenuEl.classList.add("tabulator-header-popup-button");
+
+		if(icon){
+			if(typeof icon === "function"){
+				icon = icon(column.getComponent());
+			}
+
+			if(icon instanceof HTMLElement){
+				headerMenuEl.appendChild(icon);
+			}else{
+				headerMenuEl.innerHTML = icon;
+			}
+		}else{
+			headerMenuEl.innerHTML = "⋮";
+		}
 		
 		headerMenuEl.addEventListener("click", (e) => {
 			e.stopPropagation();
@@ -170,15 +158,16 @@ class Menu extends Module{
 			component = component._row;
 		}
 		
-		menu = typeof menu == "function" ? menu.call(this.table, component.getComponent(), e) : menu;
+		menu = typeof menu == "function" ? menu.call(this.table, e, component.getComponent()) : menu;
 		
 		this.loadMenu(e, component, menu);
 	}
 	
-	loadMenu(e, component, menu, parentEl){
-		var touch = !(e instanceof MouseEvent);
+	loadMenu(e, component, menu, parentEl, parentPopup){
+		var touch = !(e instanceof MouseEvent),		
+		menuEl = document.createElement("div"),
+		popup;
 		
-		var menuEl = document.createElement("div");
 		menuEl.classList.add("tabulator-menu");
 		
 		if(!touch){
@@ -193,7 +182,7 @@ class Menu extends Module{
 		if(!parentEl){
 			if(this.nestedMenuBlock){
 				//abort if child menu already open
-				if(this.isOpen()){
+				if(this.rootPopup){
 					return;
 				}
 			}else{
@@ -202,8 +191,14 @@ class Menu extends Module{
 				}, 100)
 			}
 			
-			this.hideMenu();
-			this.menuElements = [];
+			if(this.rootPopup){
+				this.rootPopup.hide();	
+			}
+			
+			this.rootPopup = popup = this.popup(menuEl);
+			
+		}else{
+			popup = parentPopup.child(menuEl);
 		}
 		
 		menu.forEach((item) => {
@@ -239,8 +234,7 @@ class Menu extends Module{
 					if(item.menu && item.menu.length){
 						itemEl.addEventListener("click", (e) => {
 							e.stopPropagation();
-							this.hideOldSubMenus(menuEl);
-							this.loadMenu(e, component, item.menu, itemEl);
+							this.loadMenu(e, component, item.menu, itemEl, popup);
 						});
 					}else{
 						if(item.action){
@@ -260,118 +254,24 @@ class Menu extends Module{
 		});
 		
 		menuEl.addEventListener("click", (e) => {
-			this.hideMenu();
+			this.rootPopup.hide();
 		});
 		
-		this.menuElements.push(menuEl);
-		this.positionMenu(menuEl, parentEl, touch, e);
-		
-		this.currentComponent = component
+		popup.show(parentEl || e);
 		
-		this.dispatchExternal("menuOpened", component.getComponent())
-	}
-	
-	hideOldSubMenus(menuEl){
-		var index = this.menuElements.indexOf(menuEl);
-		
-		if(index > -1){
-			for(let i = this.menuElements.length - 1; i > index; i--){
-				var el = this.menuElements[i];
+		if(popup === this.rootPopup){
+			this.rootPopup.hideOnBlur(() => {
+				this.rootPopup = null;
 				
-				if(el.parentNode){
-					el.parentNode.removeChild(el);
+				if(this.currentComponent){
+					this.dispatchExternal("menuClosed", this.currentComponent.getComponent());
+					this.currentComponent = null;
 				}
-				
-				this.menuElements.pop();
-			}
-		}
-	}
-	
-	positionMenu(element, parentEl, touch, e){
-		var x, y, parentOffset;
-		
-		if(!parentEl){
-			x = touch ? e.touches[0].pageX : e.pageX;
-			y = touch ? e.touches[0].pageY : e.pageY;
-			
-			if(this.menuContainer !== document.body){
-				parentOffset = Helpers.elOffset(this.menuContainer);
-				
-				x -= parentOffset.left;
-				y -= parentOffset.top;
-			}
-			
-			this.positionReversedX = false;
-		}else{
-			parentOffset = Helpers.elOffset(parentEl);
-			x = parentOffset.left + parentEl.offsetWidth;
-			y = parentOffset.top - 1;
-		}
-		
-		element.style.top = y + "px";
-		element.style.left = x + "px";
-		
-		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);
-			document.body.addEventListener("keydown", this.escEvent);
-		}, 100);
-		
-		this.menuContainer.appendChild(element);
-		
-		//move menu to start on right edge if it is too close to the edge of the screen
-		if((x + element.offsetWidth) >= this.menuContainer.offsetWidth || this.positionReversedX){
-			element.style.left = "";
-			
-			if(parentEl){
-				element.style.right = (this.menuContainer.offsetWidth - parentOffset.left) + "px";
-			}else{
-				element.style.right = (this.menuContainer.offsetWidth - x) + "px";
-			}
-			
-			this.positionReversedX = true;
-		}
-		
-		//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) {
-			if(parentEl){
-				element.style.top = (parseInt(element.style.top) - element.offsetHeight + parentEl.offsetHeight + 1) + "px";
-			}else{
-				element.style.top = (parseInt(element.style.top) - element.offsetHeight) + "px";
-			}
-		}
-	}
-	
-	isOpen(){
-		return !!this.menuElements.length;
-	}
-	
-	escMenu(e){
-		if(e.keyCode == 27){
-			this.hideMenu();
-		}
-	}
-	
-	hideMenu(){	
-		this.menuElements.forEach((menuEl) => {
-			if(menuEl.parentNode){
-				menuEl.parentNode.removeChild(menuEl);
-			}
-		});
-		
-		document.body.removeEventListener("keydown", this.escEvent);
-		document.body.removeEventListener("click", this.blurEvent);
-		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());
-			this.currentComponent = null;
+			});
+
+			this.currentComponent = component;
+
+			this.dispatchExternal("menuOpened", component.getComponent())
 		}
 	}
 }

package/src/js/modules/Mutator/Mutator.js

@@ -18,10 +18,12 @@ class Mutator extends Module{
 		this.registerColumnOption("mutatorEditParams");
 		this.registerColumnOption("mutatorClipboard");
 		this.registerColumnOption("mutatorClipboardParams");
+		this.registerColumnOption("mutateLink");
 	}
 
 	initialize(){
 		this.subscribe("cell-value-changing", this.transformCell.bind(this));
+		this.subscribe("cell-value-changed", this.mutateLink.bind(this));
 		this.subscribe("column-layout", this.initializeColumn.bind(this));
 		this.subscribe("row-data-init-before", this.rowDataChanged.bind(this));
 		this.subscribe("row-data-changing", this.rowDataChanged.bind(this));
@@ -125,6 +127,24 @@ class Mutator extends Module{
 		return value;
 	}
 
+	mutateLink(cell){
+		var links = cell.column.definition.mutateLink;
+
+		if(links){
+			if(!Array.isArray(links)){
+				links = [links];
+			}
+
+			links.forEach((link) => {
+				var linkCell = cell.row.getCell(link);
+
+				if(linkCell){
+					linkCell.setValue(linkCell.getValue(), true, true);
+				}
+			});
+		}
+	}
+
 	enable(){
 		this.enabled = true;
 	}

package/src/js/modules/Page/Page.js

@@ -65,6 +65,7 @@ class Page extends Module{
 			this.subscribe("row-added", this.rowsUpdated.bind(this));
 			this.subscribe("data-processed", this.initialLoadComplete.bind(this));
 			this.subscribe("table-built", this.calculatePageSizes.bind(this));
+			this.subscribe("footer-redraw", this.footerRedraw.bind(this));
 
 			if(this.table.options.paginationAddRow == "page"){
 				this.subscribe("row-adding-position", this.rowAddingPosition.bind(this));
@@ -145,6 +146,8 @@ class Page extends Module{
 			
 			this.table.rowManager.getTableElement().removeChild(testElRow);
 		}
+
+		this.dispatchExternal("pageSizeChanged", this.size);
 		
 		this.generatePageSizeSelectList();
 	}
@@ -441,12 +444,12 @@ class Page extends Module{
 							}
 						}
 					}else{
-						this.table.footerManager.append(this.pageCounterElement);
+						this.footerAppend(this.pageCounterElement);
 					}
 					
 				}
 				
-				this.table.footerManager.append(this.element, this);
+				this.footerAppend(this.element);
 			}
 			
 			this.page = this.table.options.paginationInitialPage;
@@ -562,9 +565,10 @@ class Page extends Module{
 		if(size !== true){
 			size = parseInt(size);
 		}
-		
+
 		if(size > 0){
 			this.size = size;
+			this.dispatchExternal("pageSizeChanged", size);
 		}
 		
 		if(this.pageSizeSelect){

package/src/js/modules/Persistence/Persistence.js

@@ -451,7 +451,7 @@ class Persistence extends Module{
 
 Persistence.moduleName = "persistence";
 
-Persistence.moduleInitOrder = 1;
+Persistence.moduleInitOrder = -10;
 
 //load defaults
 Persistence.readers = defaultReaders;