tabulator-tables 5.3.4 → 5.4.1

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

@@ -14,18 +14,22 @@ class Menu extends Module{
 		this.columnSubscribers = {};
 		
 		this.registerTableOption("menuContainer", undefined); //deprecated
-
+		
 		this.registerTableOption("rowContextMenu", false);
 		this.registerTableOption("rowClickMenu", false);
+		this.registerTableOption("rowDblClickMenu", false);
 		this.registerTableOption("groupContextMenu", false);
 		this.registerTableOption("groupClickMenu", false);
+		this.registerTableOption("groupDblClickMenu", false);
 		
 		this.registerColumnOption("headerContextMenu");
 		this.registerColumnOption("headerClickMenu");
+		this.registerColumnOption("headerDblClickMenu");
 		this.registerColumnOption("headerMenu");
 		this.registerColumnOption("headerMenuIcon");
 		this.registerColumnOption("contextMenu");
 		this.registerColumnOption("clickMenu");
+		this.registerColumnOption("dblClickMenu");
 		
 	}
 	
@@ -36,7 +40,7 @@ class Menu extends Module{
 		
 		this.subscribe("column-init", this.initializeColumn.bind(this));
 	}
-
+	
 	deprecatedOptionsCheck(){
 		if(!this.deprecationCheck("menuContainer", "popupContainer")){
 			this.table.options.popupContainer = this.table.options.menuContainer;
@@ -52,6 +56,10 @@ class Menu extends Module{
 		if(this.table.options.rowClickMenu){
 			this.subscribe("row-click", this.loadMenuEvent.bind(this, this.table.options.rowClickMenu));
 		}
+		
+		if(this.table.options.rowDblClickMenu){
+			this.subscribe("row-dblclick", this.loadMenuEvent.bind(this, this.table.options.rowDblClickMenu));
+		}
 	}
 	
 	initializeGroupWatchers(){
@@ -63,6 +71,10 @@ class Menu extends Module{
 		if(this.table.options.groupClickMenu){
 			this.subscribe("group-click", this.loadMenuEvent.bind(this, this.table.options.groupClickMenu));
 		}
+		
+		if(this.table.options.groupDblClickMenu){
+			this.subscribe("group-dblclick", this.loadMenuEvent.bind(this, this.table.options.groupDblClickMenu));
+		}
 	}
 	
 	initializeColumn(column){
@@ -80,6 +92,11 @@ class Menu extends Module{
 			this.subscribe("column-click", this.columnSubscribers.headerClickMenu);
 		}
 		
+		if(def.headerDblClickMenu && !this.columnSubscribers.headerDblClickMenu){
+			this.columnSubscribers.headerDblClickMenu = this.loadMenuTableColumnEvent.bind(this, "headerDblClickMenu");
+			this.subscribe("column-dblclick", this.columnSubscribers.headerDblClickMenu);
+		}
+		
 		if(def.headerMenu){
 			this.initializeColumnHeaderMenu(column);
 		}
@@ -95,6 +112,11 @@ class Menu extends Module{
 			this.columnSubscribers.clickMenu = this.loadMenuTableCellEvent.bind(this, "clickMenu");
 			this.subscribe("cell-click", this.columnSubscribers.clickMenu);
 		}
+		
+		if(def.dblClickMenu && !this.columnSubscribers.dblClickMenu){
+			this.columnSubscribers.dblClickMenu = this.loadMenuTableCellEvent.bind(this, "dblClickMenu");
+			this.subscribe("cell-dblclick", this.columnSubscribers.dblClickMenu);
+		}
 	}
 	
 	initializeColumnHeaderMenu(column){
@@ -103,12 +125,12 @@ class Menu extends Module{
 		
 		headerMenuEl = document.createElement("span");
 		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{
@@ -251,7 +273,9 @@ class Menu extends Module{
 		});
 		
 		menuEl.addEventListener("click", (e) => {
-			this.rootPopup.hide();
+			if(this.rootPopup){
+				this.rootPopup.hide();
+			}
 		});
 		
 		popup.show(parentEl || e);
@@ -265,9 +289,9 @@ class Menu extends Module{
 					this.currentComponent = null;
 				}
 			});
-
+			
 			this.currentComponent = component;
-
+			
 			this.dispatchExternal("menuOpened", component.getComponent());
 		}
 	}

package/src/js/modules/MoveColumns/MoveColumns.js

@@ -164,7 +164,7 @@ class MoveColumns extends Module{
 	
 	startMove(e, column){
 		var element = column.getElement(),
-		headerElement = this.table.columnManager.getElement(),
+		headerElement = this.table.columnManager.getContentsElement(),
 		headersElement = this.table.columnManager.getHeadersElement();
 		
 		this.moving = column;
@@ -183,7 +183,7 @@ class MoveColumns extends Module{
 		this.hoverElement = element.cloneNode(true);
 		this.hoverElement.classList.add("tabulator-moving");
 		
-		this.table.columnManager.getElement().appendChild(this.hoverElement);
+		headerElement.appendChild(this.hoverElement);
 		
 		this.hoverElement.style.left = "0";
 		this.hoverElement.style.bottom = (headerElement.clientHeight - headersElement.offsetHeight) + "px";
@@ -265,7 +265,7 @@ class MoveColumns extends Module{
 	}
 	
 	moveHover(e){
-		var columnHolder = this.table.columnManager.getElement(),
+		var columnHolder = this.table.columnManager.getContentsElement(),
 		scrollLeft = columnHolder.scrollLeft,
 		xPos = ((this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(columnHolder).left) + scrollLeft,
 		scrollPos;

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

@@ -486,6 +486,7 @@ class Page extends Module{
 		if(!this.initialLoad){
 			if(this.mode == "local" || force){
 				this.page = 1;
+				this.trackChanges();
 			}
 		}
 	}

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

@@ -142,6 +142,7 @@ class Persistence extends Module{
 			this.subscribe("group-changed", this.eventSave.bind(this, "group"));
 			this.subscribe("page-changed", this.eventSave.bind(this, "page"));
 			this.subscribe("column-resized", this.eventSave.bind(this, "columns"));
+			this.subscribe("column-width", this.eventSave.bind(this, "columns"));
 			this.subscribe("layout-refreshed", this.eventSave.bind(this, "columns"));
 		}
 

package/src/js/modules/Popup/Popup.js

@@ -9,15 +9,24 @@ class Popup extends Module{
 		
 		this.registerTableOption("rowContextPopup", false);
 		this.registerTableOption("rowClickPopup", false);
+		this.registerTableOption("rowDblClickPopup", false);
 		this.registerTableOption("groupContextPopup", false);
 		this.registerTableOption("groupClickPopup", false);
+		this.registerTableOption("groupDblClickPopup", false);
 		
 		this.registerColumnOption("headerContextPopup");
 		this.registerColumnOption("headerClickPopup");
+		this.registerColumnOption("headerDblClickPopup");
 		this.registerColumnOption("headerPopup");
 		this.registerColumnOption("headerPopupIcon");
 		this.registerColumnOption("contextPopup");
 		this.registerColumnOption("clickPopup");
+		this.registerColumnOption("dblClickPopup");
+
+		this.registerComponentFunction("cell", "popup", this._componentPopupCall.bind(this));
+		this.registerComponentFunction("column", "popup", this._componentPopupCall.bind(this));
+		this.registerComponentFunction("row", "popup", this._componentPopupCall.bind(this));
+		this.registerComponentFunction("group", "popup", this._componentPopupCall.bind(this));
 		
 	}
 	
@@ -27,6 +36,10 @@ class Popup extends Module{
 		
 		this.subscribe("column-init", this.initializeColumn.bind(this));
 	}
+
+	_componentPopupCall(component, contents, position){
+		this.loadPopupEvent(contents, null, component, position);
+	}
 	
 	initializeRowWatchers(){
 		if(this.table.options.rowContextPopup){
@@ -37,6 +50,10 @@ class Popup extends Module{
 		if(this.table.options.rowClickPopup){
 			this.subscribe("row-click", this.loadPopupEvent.bind(this, this.table.options.rowClickPopup));
 		}
+
+		if(this.table.options.rowDblClickPopup){
+			this.subscribe("row-dblclick", this.loadPopupEvent.bind(this, this.table.options.rowDblClickPopup));
+		}
 	}
 	
 	initializeGroupWatchers(){
@@ -48,6 +65,10 @@ class Popup extends Module{
 		if(this.table.options.groupClickPopup){
 			this.subscribe("group-click", this.loadPopupEvent.bind(this, this.table.options.groupClickPopup));
 		}
+
+		if(this.table.options.groupDblClickPopup){
+			this.subscribe("group-dblclick", this.loadPopupEvent.bind(this, this.table.options.groupDblClickPopup));
+		}
 	}
 	
 	initializeColumn(column){
@@ -63,6 +84,11 @@ class Popup extends Module{
 		if(def.headerClickPopup && !this.columnSubscribers.headerClickPopup){
 			this.columnSubscribers.headerClickPopup = this.loadPopupTableColumnEvent.bind(this, "headerClickPopup");
 			this.subscribe("column-click", this.columnSubscribers.headerClickPopup);
+		
+		
+		}if(def.headerDblClickPopup && !this.columnSubscribers.headerDblClickPopup){
+			this.columnSubscribers.headerDblClickPopup = this.loadPopupTableColumnEvent.bind(this, "headerDblClickPopup");
+			this.subscribe("column-dblclick", this.columnSubscribers.headerDblClickPopup);
 		}
 		
 		if(def.headerPopup){
@@ -80,6 +106,11 @@ class Popup extends Module{
 			this.columnSubscribers.clickPopup = this.loadPopupTableCellEvent.bind(this, "clickPopup");
 			this.subscribe("cell-click", this.columnSubscribers.clickPopup);
 		}
+
+		if(def.dblClickPopup && !this.columnSubscribers.dblClickPopup){
+			this.columnSubscribers.dblClickPopup = this.loadPopupTableCellEvent.bind(this, "dblClickPopup");
+			this.subscribe("cell-click", this.columnSubscribers.dblClickPopup);
+		}
 	}
 	
 	initializeColumnHeaderPopup(column){
@@ -133,7 +164,7 @@ class Popup extends Module{
 		}
 	}
 	
-	loadPopupEvent(contents, e, component){
+	loadPopupEvent(contents, e, component, position){
 		var renderedCallback;
 
 		function onRendered(callback){
@@ -148,10 +179,10 @@ class Popup extends Module{
 		
 		contents = typeof contents == "function" ? contents.call(this.table, e, component.getComponent(),  onRendered) : contents;
 		
-		this.loadPopup(e, component, contents, renderedCallback);
+		this.loadPopup(e, component, contents, renderedCallback, position);
 	}
 	
-	loadPopup(e, component, contents, renderedCallback){
+	loadPopup(e, component, contents, renderedCallback, position){
 		var touch = !(e instanceof MouseEvent),
 		contentsEl, popup;
 		
@@ -177,8 +208,15 @@ class Popup extends Module{
 		if(typeof renderedCallback === "function"){
 			popup.renderCallback(renderedCallback);
 		}
+
+		if(e){
+			popup.show(e);
+		}else{
+			popup.show(component.getElement(), position || "center");
+		}
+
 		
-		popup.show(e).hideOnBlur(() => {
+		popup.hideOnBlur(() => {
 			this.dispatchExternal("popupClosed", component.getComponent());
 		});
 

package/src/js/modules/ResizeColumns/ResizeColumns.js

@@ -81,15 +81,32 @@ class ResizeColumns extends Module{
 			}
 		}
 	}
+
+	frozenColumnOffset(column){
+		var offset = false;
+
+		if(column.modules.frozen){
+			offset = column.modules.frozen.marginValue; 
+
+			if(column.modules.frozen.position === "left"){
+				offset += column.getWidth() - 3;
+			}else{
+				if(offset){
+					offset -= 3;
+				}
+			}
+		}
+
+		return offset !== false ? offset + "px" : false;
+	}
 	
 	reinitializeColumn(column){
-		var frozenOffset = column.modules.frozen ? (column.modules.frozen.marginValue + column.getWidth() + "px") : false;
-		
+		var frozenOffset = this.frozenColumnOffset(column);
 		
 		column.cells.forEach((cell) => {
 			if(cell.modules.resize && cell.modules.resize.handleEl){
 				if(frozenOffset){
-					cell.modules.resize.handleEl.style.left = frozenOffset;
+					cell.modules.resize.handleEl.style[column.modules.frozen.position] = frozenOffset;
 				}
 				
 				cell.element.after(cell.modules.resize.handleEl);
@@ -98,7 +115,7 @@ class ResizeColumns extends Module{
 		
 		if(column.modules.resize && column.modules.resize.handleEl){
 			if(frozenOffset){
-				column.modules.resize.handleEl.style.left = frozenOffset;
+				column.modules.resize.handleEl.style[column.modules.frozen.position] = frozenOffset;
 			}
 			
 			column.element.after(column.modules.resize.handleEl);
@@ -150,8 +167,8 @@ class ResizeColumns extends Module{
 			});
 			
 			if(column.modules.frozen){
-				handle.style.position = "absolute";
-				handle.style.left = column.modules.frozen.marginValue + column.getWidth() + "px";
+				handle.style.position = "sticky";
+				handle.style[column.modules.frozen.position] = this.frozenColumnOffset(column);
 			}
 			
 			config.handleEl = handle;
@@ -263,6 +280,8 @@ class ResizeColumns extends Module{
 			self.table.element.classList.remove("tabulator-block-select");
 			
 			if(self.startWidth !== column.getWidth()){
+				self.table.columnManager.verticalAlignHeaders();
+
 				self.dispatch("column-resized", column);
 				self.table.externalEvents.dispatch("columnResized", column.getComponent());
 			}

package/src/js/modules/ResizeTable/ResizeTable.js

@@ -58,7 +58,7 @@ class ResizeTable extends Module{
 								this.containerHeight = table.element.parentNode.clientHeight;
 								this.containerWidth = table.element.parentNode.clientWidth;
 							}
-						
+							
 							this.redrawTable();
 						}
 					}
@@ -110,17 +110,16 @@ class ResizeTable extends Module{
 	initializeVisibilityObserver(){
 		this.visibilityObserver = new IntersectionObserver((entries) => {
 			this.visible = entries[0].isIntersecting;
-
+			
 			if(!this.initialized){
 				this.initialized = true;
 				this.initialRedraw = !this.visible;
+			}else{
+				if(this.visible){
+					this.redrawTable(this.initialRedraw);
+					this.initialRedraw = false;
+				}
 			}
-
-			if(this.visible){
-				this.redrawTable(this.initialRedraw);
-				this.initialRedraw = false;
-			}
-			
 		});
 		
 		this.visibilityObserver.observe(this.table.element);

package/src/js/modules/ResponsiveLayout/ResponsiveLayout.js

@@ -183,22 +183,21 @@ class ResponsiveLayout extends Module{
 
 	//redraw columns to fit space
 	update(){
-		var self = this,
-		working = true;
+		var working = true;
 
 		while(working){
 
-			let width = self.table.modules.layout.getMode() == "fitColumns" ? self.table.columnManager.getFlexBaseWidth() : self.table.columnManager.getWidth();
+			let width = this.table.modules.layout.getMode() == "fitColumns" ? this.table.columnManager.getFlexBaseWidth() : this.table.columnManager.getWidth();
 
-			let diff = (self.table.options.headerVisible ? self.table.columnManager.element.clientWidth : self.table.element.clientWidth) - width;
+			let diff = (this.table.options.headerVisible ? this.table.columnManager.element.clientWidth : this.table.element.clientWidth) - width;
 
 			if(diff < 0){
 				//table is too wide
-				let column = self.columns[self.index];
+				let column = this.columns[this.index];
 
 				if(column){
-					self.hideColumn(column);
-					self.index ++;
+					this.hideColumn(column);
+					this.index ++;
 				}else{
 					working = false;
 				}
@@ -206,13 +205,13 @@ class ResponsiveLayout extends Module{
 			}else{
 
 				//table has spare space
-				let column = self.columns[self.index -1];
+				let column = this.columns[this.index -1];
 
 				if(column){
 					if(diff > 0){
 						if(diff >= column.getWidth()){
-							self.showColumn(column);
-							self.index --;
+							this.showColumn(column);
+							this.index --;
 						}else{
 							working = false;
 						}
@@ -224,18 +223,17 @@ class ResponsiveLayout extends Module{
 				}
 			}
 
-			if(!self.table.rowManager.activeRowsCount){
-				self.table.rowManager.renderEmptyScroll();
+			if(!this.table.rowManager.activeRowsCount){
+				this.table.rowManager.renderEmptyScroll();
 			}
 		}
 	}
 
 	generateCollapsedContent(){
-		var self = this,
-		rows = this.table.rowManager.getDisplayRows();
+		var rows = this.table.rowManager.getDisplayRows();
 
-		rows.forEach(function(row){
-			self.generateCollapsedRowContent(row);
+		rows.forEach((row) => {
+			this.generateCollapsedRowContent(row);
 		});
 	}
 
@@ -255,16 +253,15 @@ class ResponsiveLayout extends Module{
 	}
 
 	generateCollapsedRowData(row){
-		var self = this,
-		data = row.getData(),
+		var data = row.getData(),
 		output = [],
 		mockCellComponent;
 
-		this.hiddenColumns.forEach(function(column){
+		this.hiddenColumns.forEach((column) => {
 			var value = column.getFieldValue(data);
 
 			if(column.definition.title && column.field){
-				if(column.modules.format && self.table.options.responsiveLayoutCollapseUseFormatters){
+				if(column.modules.format && this.table.options.responsiveLayoutCollapseUseFormatters){
 
 					mockCellComponent = {
 						value:false,
@@ -284,6 +281,9 @@ class ResponsiveLayout extends Module{
 						getColumn:function(){
 							return column.getComponent();
 						},
+						getTable:() => {
+							return this.table;
+						},
 					};
 
 					function onRendered(callback){
@@ -293,7 +293,7 @@ class ResponsiveLayout extends Module{
 					output.push({
 						field: column.field,
 						title: column.definition.title,
-						value: column.modules.format.formatter.call(self.table.modules.format, mockCellComponent, column.modules.format.params, onRendered)
+						value: column.modules.format.formatter.call(this.table.modules.format, mockCellComponent, column.modules.format.params, onRendered)
 					});
 				}else{
 					output.push({

package/src/js/modules/Sort/Sort.js

@@ -16,6 +16,7 @@ class Sort extends Module{
 		this.registerTableOption("columnHeaderSortMulti", true); //multiple or single column sorting
 		this.registerTableOption("sortOrderReverse", false); //reverse internal sort ordering
 		this.registerTableOption("headerSortElement", "<div class='tabulator-arrow'></div>"); //header sort element
+		this.registerTableOption("headerSortClickElement", "header"); //element which triggers sort when clicked
 
 		this.registerColumnOption("sorter");
 		this.registerColumnOption("sorterParams");
@@ -113,10 +114,21 @@ class Sort extends Module{
 
 			colEl.classList.add("tabulator-sortable");
 
-
 			arrowEl = document.createElement("div");
 			arrowEl.classList.add("tabulator-col-sorter");
 
+			switch(this.table.options.headerSortClickElement){
+				case "icon":
+					arrowEl.classList.add("tabulator-col-sorter-element");
+					break;
+				case "header":
+					colEl.classList.add("tabulator-col-sorter-element");
+					break;
+				default:
+					colEl.classList.add("tabulator-col-sorter-element");
+					break;
+			}
+
 			switch(this.table.options.headerSortElement){
 				case "function":
 					//do nothing
@@ -138,7 +150,7 @@ class Sort extends Module{
 			this.setColumnHeaderSortIcon(column, "none");
 
 			//sort on click
-			colEl.addEventListener("click", (e) => {
+			(this.table.options.headerSortClickElement === "icon" ? arrowEl : colEl).addEventListener("click", (e) => {
 				var dir = "",
 				sorters=[],
 				match = false;