tabulator-tables 5.2.2 → 5.2.5

package/dist/js/tabulator_esm.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.2.2 (c) Oliver Folkerd 2022 */
+/* Tabulator v5.2.5 (c) Oliver Folkerd 2022 */
 class CoreFeature{
 
 	constructor(table){
@@ -9,8 +9,8 @@ class CoreFeature{
 	/////////////// DataLoad /////////////////
 	//////////////////////////////////////////
 
-	reloadData(data, silent){
-		return this.table.dataLoader.load(data, undefined, undefined, undefined, silent);
+	reloadData(data, silent, columnsChanged){
+		return this.table.dataLoader.load(data, undefined, undefined, undefined, silent, columnsChanged);
 	}
 
 	//////////////////////////////////////////
@@ -194,6 +194,8 @@ class Popup extends CoreFeature{
         
         this.blurEvent = this.hide.bind(this, false);
         this.escEvent = this._escapeCheck.bind(this);
+
+        this.destroyBinding = this.hide.bind(this, true);
     }
     
     _lookupContainer(){
@@ -311,6 +313,8 @@ class Popup extends CoreFeature{
         this._fitToScreen(x, y, parentEl, parentOffset, position);
         
         this.visible = true;
+
+        this.subscribe("table-destroy", this.destroyBinding);
         
         return this;
     }
@@ -406,6 +410,8 @@ class Popup extends CoreFeature{
             if(this.blurCallback && !silent){
                 this.blurCallback();
             }
+
+            this.unsubscribe("table-destroy", this.destroyBinding);
         }
         
         return this;
@@ -1564,7 +1570,6 @@ class Cell extends CoreFeature{
 			}
 			break;
 			case "undefined":
-			case "null":
 			this.element.innerHTML = "";
 			break;
 			default:
@@ -2066,8 +2071,6 @@ class Column extends CoreFeature{
 			}
 		}
 
-		this.contentElement = this._bindEvents();
-
 		this.contentElement = this._buildColumnHeaderContent();
 
 		this.element.appendChild(this.contentElement);
@@ -2081,83 +2084,6 @@ class Column extends CoreFeature{
 		this.dispatch("column-init", this);
 	}
 
-	_bindEvents(){
-		var def = this.definition,
-		dblTap,	tapHold, tap;
-
-		//setup header click event bindings
-		if(typeof(def.headerClick) == "function"){
-			this.element.addEventListener("click", (e) => {def.headerClick(e, this.getComponent());});
-		}
-
-		if(typeof(def.headerDblClick) == "function"){
-			this.element.addEventListener("dblclick", (e) => {def.headerDblClick(e, this.getComponent());});
-		}
-
-		if(typeof(def.headerContext) == "function"){
-			this.element.addEventListener("contextmenu", (e) => {def.headerContext(e, this.getComponent());});
-		}
-
-		//setup header tap event bindings
-		if(typeof(def.headerTap) == "function"){
-			tap = false;
-
-			this.element.addEventListener("touchstart", (e) => {
-				tap = true;
-			}, {passive: true});
-
-			this.element.addEventListener("touchend", (e) => {
-				if(tap){
-					def.headerTap(e, this.getComponent());
-				}
-
-				tap = false;
-			});
-		}
-
-		if(typeof(def.headerDblTap) == "function"){
-			dblTap = null;
-
-			this.element.addEventListener("touchend", (e) => {
-
-				if(dblTap){
-					clearTimeout(dblTap);
-					dblTap = null;
-
-					def.headerDblTap(e, this.getComponent());
-				}else {
-
-					dblTap = setTimeout(() => {
-						clearTimeout(dblTap);
-						dblTap = null;
-					}, 300);
-				}
-
-			});
-		}
-
-		if(typeof(def.headerTapHold) == "function"){
-			tapHold = null;
-
-			this.element.addEventListener("touchstart", (e) => {
-				clearTimeout(tapHold);
-
-				tapHold = setTimeout(function(){
-					clearTimeout(tapHold);
-					tapHold = null;
-					tap = false;
-					def.headerTapHold(e, this.getComponent());
-				}, 1000);
-
-			}, {passive: true});
-
-			this.element.addEventListener("touchend", (e) => {
-				clearTimeout(tapHold);
-				tapHold = null;
-			});
-		}
-	}
-
 	//build header element for header
 	_buildColumnHeader(){
 		var def = this.definition,
@@ -2284,7 +2210,6 @@ class Column extends CoreFeature{
 			}
 			break;
 			case "undefined":
-			case "null":
 			el.innerHTML = "";
 			break;
 			default:
@@ -4138,11 +4063,24 @@ class DataTree extends Module{
 			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.subscribe("table-redrawing", this.tableRedrawing.bind(this));
 
 			this.registerDisplayHandler(this.getRows.bind(this), 30);
 		}
 	}
 
+	tableRedrawing(force){
+		var rows;
+
+		if(force){
+			rows = this.table.rowManager.getRows();
+			
+			rows.forEach((row) => {
+				this.reinitializeRowChildren(row);
+			});
+		}
+	}
+
 	initializeElementField(){
 		var firstCol = this.table.columnManager.getFirstVisibleColumn();
 
@@ -4435,6 +4373,10 @@ class DataTree extends Module{
 		return row.modules.dataTree.parent ? row.modules.dataTree.parent.getComponent() : false;
 	}
 
+	getTreeParentRoot(row){
+		return row.modules.dataTree.parent ? this.getTreeParentRoot(row.modules.dataTree.parent) : row;
+	}
+
 	getFilteredTreeChildren(row){
 		var config = row.modules.dataTree,
 		output = [], children;
@@ -4633,11 +4575,10 @@ function csv(list, options, setFileContents){
 
 					switch(typeof col.value){
 						case "object":
-						col.value = JSON.stringify(col.value);
+						col.value = col.value !== null ? JSON.stringify(col.value) : "";
 						break;
 
 						case "undefined":
-						case "null":
 						col.value = "";
 						break;
 					}
@@ -4757,11 +4698,10 @@ function pdf(list, options, setFileContents){
 			if(col){
 				switch(typeof col.value){
 					case "object":
-					col.value = JSON.stringify(col.value);
+					col.value = col.value !== null ? JSON.stringify(col.value) : "";
 					break;
 
 					case "undefined":
-					case "null":
 					col.value = "";
 					break;
 				}
@@ -5614,7 +5554,7 @@ class Edit{
         this.initialValues = this.params.multiselect ? initialValue : [initialValue];
         
         if(this.isFilter){
-            this.input.value = this.initialValues.join(",");
+            this.input.value = this.initialValues ? this.initialValues.join(",") : "";
             this.headerFilterInitialListGen();            
         }
     }
@@ -6019,7 +5959,7 @@ class Edit{
             values = this._ajaxRequest(this.params.valuesURL, this.input.value);
         }else {
             if(typeof this.params.valuesLookup === "function"){
-                values = this.params.valuesLookup(cell, this.input.value);
+                values = this.params.valuesLookup(this.cell, this.input.value);
             }else if(this.params.valuesLookup){
                 values = this._uniqueColumnValues(this.params.valuesLookupField);
             }
@@ -8171,11 +8111,10 @@ class Export extends Module{
 				}else {
 					switch(typeof value){
 						case "object":
-						value = JSON.stringify(value);
+						value = value !== null ? JSON.stringify(value) : "";
 						break;
 
 						case "undefined":
-						case "null":
 						value = "";
 						break;
 
@@ -8934,7 +8873,7 @@ class Filter extends Module{
 	refreshFilter(){
 		if(this.tableInitialized){
 			if(this.table.options.filterMode === "remote"){
-				this.reloadData();
+				this.reloadData(null, false, false);
 			}else {
 				this.refreshData(true);
 			}
@@ -10130,7 +10069,6 @@ class FrozenColumns extends Module{
 		this.rightPadding = 0;
 		this.initializationMode = "left";
 		this.active = false;
-		this.scrollEndTimer = false;
 		this.blocked = true;
 		
 		this.registerColumnOption("frozen");
@@ -10159,10 +10097,10 @@ class FrozenColumns extends Module{
 		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));
@@ -10179,10 +10117,10 @@ class FrozenColumns extends Module{
 	layoutCell(cell){
 		this.layoutElement(cell.element, cell.column);
 	}
-
+	
 	reinitializeColumns(){
 		this.reset();
-
+		
 		this.table.columnManager.columnsByIndex.forEach((column) => {
 			this.initializeColumn(column);
 		});
@@ -10227,24 +10165,15 @@ class FrozenColumns extends Module{
 	
 	//quick layout to smooth horizontal scrolling
 	scrollHorizontal(){
-		var rows;
 		
-		if(this.active){
-			clearTimeout(this.scrollEndTimer);
-
-			rows = this.table.rowManager.getVisibleRows();
-			
+		if(this.active){		
 			this.calcMargins(true);
 			
 			this.layoutColumnPosition();
 			
 			this.layoutCalcRows();
 			
-			rows.forEach((row) => {
-				if(row.type === "row"){
-					this.layoutRow(row);
-				}
-			});
+			this.reinitializeRows();
 		}
 	}
 	
@@ -10256,7 +10185,7 @@ class FrozenColumns extends Module{
 			this.rightMargin = this._calcSpace(this.rightColumns, this.rightColumns.length) + "px";	
 			this.table.rowManager.tableElement.style.marginRight = this.rightMargin;
 		}
-	
+		
 		//calculate right frozen columns
 		this.rightPadding = this.table.rowManager.element.clientWidth + this.table.columnManager.scrollLeft;
 	}
@@ -10303,10 +10232,11 @@ class FrozenColumns extends Module{
 		
 		this.table.columnManager.headersElement.style.marginLeft = this.leftMargin;
 		this.table.columnManager.element.style.paddingRight = this.rightMargin;
-
+		
 		this.leftColumns.forEach((column, i) => {	
-			column.modules.frozen.margin = (leftMargin + this.table.columnManager.scrollLeft) + "px";
-
+			column.modules.frozen.marginValue = leftMargin + this.table.columnManager.scrollLeft;
+			column.modules.frozen.margin = column.modules.frozen.marginValue + "px";
+			
 			if(column.visible){
 				leftMargin += column.getWidth();
 			}
@@ -10339,12 +10269,13 @@ class FrozenColumns extends Module{
 		});
 		
 		this.rightColumns.forEach((column, i) => {
-
+			
 			if(column.visible){
 				rightMargin += column.getWidth();
 			}
-
-			column.modules.frozen.margin = (this.rightPadding - rightMargin) + "px";
+			
+			column.modules.frozen.marginValue = this.rightPadding - rightMargin;
+			column.modules.frozen.margin = column.modules.frozen.marginValue + "px";
 			
 			if(i == this.rightColumns.length - 1){
 				column.modules.frozen.edge = true;
@@ -10372,36 +10303,35 @@ class FrozenColumns extends Module{
 	}
 	
 	//layout columns appropriately
-	layout(){
-		var visibleRows = [],
-		otherRows = [];
-
+	layout(){	
 		if(this.active && !this.blocked){
 			//calculate row padding
 			this.calcMargins();
-
+			
 			//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);
-				}
-			});
+			this.reinitializeRows();
 			
 			this.layoutCalcRows();
-			
-
 		}
 	}
 	
+	reinitializeRows(){
+		var visibleRows = this.table.rowManager.getVisibleRows();
+		var otherRows = this.table.rowManager.getRows().filter(row => !visibleRows.includes(row));
+
+		otherRows.forEach((row) =>{
+			row.deinitialize();
+		});
+		
+		visibleRows.forEach((row) =>{
+			if(row.type === "row"){
+				this.layoutRow(row);
+			}
+		});
+	}
+	
 	layoutRow(row){
 		// console.trace("row")
 		var rowEl = row.getElement();
@@ -11682,6 +11612,10 @@ class GroupRows extends Module{
 	getRowGroup(row){
 		var match = false;
 
+		if(this.options("dataTree")){
+			row = this.table.modules.dataTree.getTreeParentRoot(row);
+		}
+
 		this.groupList.forEach((group) => {
 			var result = group.getRowGroup(row);
 
@@ -13417,7 +13351,7 @@ class MoveColumns extends Module{
 		config = {},
 		colEl;
 		
-		if(!column.modules.frozen){
+		if(!column.modules.frozen && !column.isGroup){
 			colEl = column.getElement();
 			
 			config.mousemove = function(e){
@@ -15138,7 +15072,6 @@ class Page extends Module{
 				}
 				break;
 				case "undefined":
-				case "null":
 				this.pageCounterElement.innerHTML = "";
 				break;
 				default:
@@ -15880,6 +15813,7 @@ class Persistence extends Module{
 				if(this.config.columns === true || this.config.columns == undefined){
 					keys =  Object.keys(colDef);
 					keys.push("width");
+					keys.push("visible");
 				}else {
 					keys = this.config.columns;
 				}
@@ -16600,6 +16534,7 @@ class ResizeColumns extends Module{
 			
 			this.subscribe("column-hide", this.deInitializeColumn.bind(this));
 			this.subscribe("column-show", this.columnLayoutUpdated.bind(this));
+			this.subscribe("column-width", this.columnWidthUpdated.bind(this));
 			
 			this.subscribe("column-delete", this.deInitializeComponent.bind(this));
 			this.subscribe("column-height", this.resizeHandle.bind(this));
@@ -16634,14 +16569,38 @@ class ResizeColumns extends Module{
 		}
 	}
 	
+	columnWidthUpdated(column){
+		if(column.modules.frozen){
+			if(this.table.modules.frozenColumns.leftColumns.includes(column)){
+				this.table.modules.frozenColumns.leftColumns.forEach((col) => {
+					this.reinitializeColumn(col);
+				});
+			}else if(this.table.modules.frozenColumns.rightColumns.includes(column)){
+				this.table.modules.frozenColumns.rightColumns.forEach((col) => {
+					this.reinitializeColumn(col);
+				});
+			}
+		}
+	}
+	
 	reinitializeColumn(column){
+		var frozenOffset = column.modules.frozen ? (column.modules.frozen.marginValue + column.getWidth() + "px") : false;
+		
 		column.cells.forEach((cell) => {
 			if(cell.modules.resize && cell.modules.resize.handleEl){
+				if(frozenOffset){
+					cell.modules.resize.handleEl.style.left = frozenOffset;
+				}
+				
 				cell.element.after(cell.modules.resize.handleEl);
 			}
 		});
 		
 		if(column.modules.resize && column.modules.resize.handleEl){
+			if(frozenOffset){
+				column.modules.resize.handleEl.style.left = frozenOffset;
+			}
+			
 			column.element.after(column.modules.resize.handleEl);
 		}
 	}
@@ -16690,9 +16649,14 @@ class ResizeColumns extends Module{
 				}
 			});
 			
+			if(column.modules.frozen){
+				handle.style.position = "absolute";
+				handle.style.left = column.modules.frozen.marginValue + column.getWidth() + "px";
+			}
+			
 			config.handleEl = handle;
 			
-			if(element.parentNode){
+			if(element.parentNode && column.visible){
 				element.after(handle);			
 			}
 		}
@@ -16740,27 +16704,27 @@ class ResizeColumns extends Module{
 			startDiff = x - self.startX,
 			moveDiff = x - self.latestX,
 			blockedBefore, blockedAfter;
-
+			
 			self.latestX = x;
 			
 			if(self.table.rtl){
 				startDiff = -startDiff;
 				moveDiff = -moveDiff;
 			}
-
+			
 			blockedBefore = column.width == column.minWidth || column.width == column.maxWidth;
-
+			
 			column.setWidth(self.startWidth + startDiff);
-
+			
 			blockedAfter = column.width == column.minWidth || column.width == column.maxWidth;
-
+			
 			if(moveDiff < 0){
 				self.nextColumn = self.initialNextColumn;
 			}
 			
 			if(self.table.options.resizableColumnFit && self.nextColumn && !(blockedBefore && blockedAfter)){
 				let colWidth = self.nextColumn.getWidth();
-
+				
 				if(moveDiff > 0){
 					if(colWidth <= self.nextColumn.minWidth){
 						self.nextColumn = self.nextColumn.nextColumn();
@@ -18301,7 +18265,7 @@ class Sort extends Module{
 
 	refreshSort(){
 		if(this.table.options.sortMode === "remote"){
-			this.reloadData();
+			this.reloadData(null, false, false);
 		}else {
 			this.refreshData(true);
 		}
@@ -18474,7 +18438,7 @@ class Sort extends Module{
 	//set the column header sort direction
 	setColumnHeader(column, dir){
 		column.modules.sort.dir = dir;
-		column.getElement().setAttribute("aria-sort", dir);
+		column.getElement().setAttribute("aria-sort", dir === "asc" ? "ascending" : "descending");
 	}
 
 	//sort each item in sort list
@@ -18874,7 +18838,7 @@ class Validate extends Module{
 		var invalid = [];
 		
 		column.cells.forEach((cell) => {
-			if(!this.cellValidate(cell)){
+			if(this.cellValidate(cell) !== true){
 				invalid.push(cell.getComponent());
 			}
 		});
@@ -18890,7 +18854,7 @@ class Validate extends Module{
 		var invalid = [];
 		
 		row.cells.forEach((cell) => {
-			if(!this.cellValidate(cell)){
+			if(this.cellValidate(cell) !== true){
 				invalid.push(cell.getComponent());
 			}
 		});
@@ -19418,6 +19382,10 @@ class Renderer extends CoreFeature{
 					}
 
 					break;
+
+					case "top":
+					this.elementVertical.scrollTop = rowEl.offsetTop;					
+					break;
 				}
 
 				resolve();
@@ -21375,7 +21343,7 @@ class RowManager extends CoreFeature{
 		
 		el.classList.add("tabulator-tableholder");
 		el.setAttribute("tabindex", 0);
-		el.setAttribute("role", "rowgroup");
+		// el.setAttribute("role", "rowgroup");
 		
 		return el;
 	}
@@ -22168,7 +22136,9 @@ class RowManager extends CoreFeature{
 				this.redrawBlockRenderInPosition = true;
 			}
 		}else {
+			this.dispatchExternal("renderStarted");
 			this.renderer.rerenderRows(callback);
+			this.dispatchExternal("renderComplete");
 		}
 	}
 	
@@ -22848,7 +22818,7 @@ class DataLoader extends CoreFeature{
 
 	initialize(){}
 
-	load(data, params, config, replace, silent){
+	load(data, params, config, replace, silent, columnsChanged){
 		var requestNo = ++this.requestOrder;
 
 		this.dispatchExternal("dataLoading", data);
@@ -22884,7 +22854,7 @@ class DataLoader extends CoreFeature{
 
 					if(rowData !== false){
 						this.dispatchExternal("dataLoaded", rowData);
-						this.table.rowManager.setData(rowData,  replace, !replace);
+						this.table.rowManager.setData(rowData,  replace, typeof columnsChanged === "undefined" ? !replace : columnsChanged);
 					}
 				}else {
 					console.warn("Data Load Response Blocked - An active data load request was blocked by an attempt to change table data while the request was being made");
@@ -22911,7 +22881,7 @@ class DataLoader extends CoreFeature{
 				data = [];
 			}
 
-			this.table.rowManager.setData(data, replace, !replace);
+			this.table.rowManager.setData(data, replace, typeof columnsChanged === "undefined" ? !replace : columnsChanged);
 			return Promise.resolve();
 		}
 	}