tabulator-tables 5.5.0 → 5.5.2

package/dist/js/tabulator_esm.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.5.0 (c) Oliver Folkerd 2023 */
+/* Tabulator v5.5.2 (c) Oliver Folkerd 2023 */
 class CoreFeature{
 
 	constructor(table){
@@ -3112,7 +3112,7 @@ class Row extends CoreFeature{
 	}
 	
 	//functions to setup on first render
-	initialize(force){
+	initialize(force, inFragment){
 		this.create();
 		
 		if(!this.initialized || force){
@@ -3127,7 +3127,7 @@ class Row extends CoreFeature{
 			
 			this.initialized = true;
 			
-			this.table.columnManager.renderer.renderRowCells(this);
+			this.table.columnManager.renderer.renderRowCells(this, inFragment);
 			
 			if(force){
 				this.normalizeHeight();
@@ -3141,9 +3141,15 @@ class Row extends CoreFeature{
 			
 			this.dispatch("row-layout-after", this);
 		}else {
-			this.table.columnManager.renderer.rerenderRowCells(this);
+			this.table.columnManager.renderer.rerenderRowCells(this, inFragment);
 		}
 	}
+
+	rendered(){
+		this.cells.forEach((cell) => {
+			cell.cellRendered();
+		});
+	}
 	
 	reinitializeHeight(){
 		this.heightInitialized = false;
@@ -4231,6 +4237,9 @@ class DataTree extends Module{
 						this.branchEl = options.dataTreeBranchElement;
 					}
 				}
+			}else {
+				this.branchEl = document.createElement("div");
+				this.branchEl.classList.add("tabulator-data-tree-branch-empty");
 			}
 
 			if(options.dataTreeCollapseElement){
@@ -4734,7 +4743,7 @@ class DataTree extends Module{
 		var config = row.modules.dataTree,
 		output = [];
 
-		if(config.children){
+		if(config && config.children){
 
 			if(!Array.isArray(config.children)){
 				config.children = this.generateChildren(row);
@@ -11434,7 +11443,7 @@ class Group{
 		this.arrowElement = document.createElement("div");
 		this.arrowElement.classList.add("tabulator-group-toggle");
 		this.arrowElement.appendChild(arrow);
-
+		
 		//setup movable rows
 		if(this.groupManager.table.options.movableRows !== false && this.groupManager.table.modExists("moveRow")){
 			this.groupManager.table.modules.moveRow.initializeGroupHeader(this);
@@ -11457,9 +11466,15 @@ class Group{
 			toggleElement = this.groupManager.table.options.groupToggleElement == "arrow" ? this.arrowElement : this.element;
 			
 			toggleElement.addEventListener("click", (e) => {
-				e.stopPropagation();
-				e.stopImmediatePropagation();
-				this.toggleVisibility();
+				if(this.groupManager.table.options.groupToggleElement === "arrow"){
+					e.stopPropagation();
+					e.stopImmediatePropagation();
+				}
+
+				//allow click event to propagate before toggling visibility
+				setTimeout(() => {
+					this.toggleVisibility();
+				});
 			});
 		}
 	}
@@ -11580,7 +11595,7 @@ class Group{
 			if(el.parentNode){
 				el.parentNode.removeChild(el);
 			}
-
+			
 			if(!this.groupManager.blockRedraw){
 				this.generateGroupHeaderContents();
 				
@@ -11705,6 +11720,7 @@ class Group{
 		}
 		return count;
 	}
+
 	
 	toggleVisibility(){
 		if(this.visible){
@@ -11829,12 +11845,18 @@ class Group{
 		return output;
 	}
 	
-	getRows(component){
+	getRows(component, includeChildren){
 		var output = [];
 		
-		this.rows.forEach(function(row){
-			output.push(component ? row.getComponent() : row);
-		});
+		if(includeChildren && this.groupList.length){
+			this.groupList.forEach((group) => {
+				output = output.concat(group.getRows(component, includeChildren));
+			});
+		}else {
+			this.rows.forEach(function(row){
+				output.push(component ? row.getComponent() : row);
+			});
+		}
 		
 		return output;
 	}
@@ -11842,7 +11864,9 @@ class Group{
 	generateGroupHeaderContents(){
 		var data = [];
 		
-		this.rows.forEach(function(row){
+		var rows = this.getRows(false, true);
+		
+		rows.forEach(function(row){
 			data.push(row.getData());
 		});
 		
@@ -11947,6 +11971,8 @@ class Group{
 	clearCellHeight(){}
 	
 	deinitializeHeight(){}
+
+	rendered(){}
 	
 	//////////////// Object Generation /////////////////
 	getComponent(){
@@ -12613,8 +12639,12 @@ var defaultUndoers = {
 	},
 
 	rowMove: function(action){
-		this.table.rowManager.moveRowActual(action.component, this.table.rowManager.rows[action.data.posFrom], !action.data.after);
-		this.table.rowManager.redraw();
+		var after = (action.data.posFrom  - action.data.posTo) > 0;
+
+		this.table.rowManager.moveRowActual(action.component, this.table.rowManager.getRowFromPosition(action.data.posFrom), after);
+
+		this.table.rowManager.regenerateRowPositions();
+		this.table.rowManager.reRenderInPosition();
 	},
 };
 
@@ -12639,8 +12669,10 @@ var defaultRedoers = {
 	},
 
 	rowMove: function(action){
-		this.table.rowManager.moveRowActual(action.component, this.table.rowManager.rows[action.data.posTo], action.data.after);
-		this.table.rowManager.redraw();
+		this.table.rowManager.moveRowActual(action.component, this.table.rowManager.getRowFromPosition(action.data.posTo), action.data.after);
+		
+		this.table.rowManager.regenerateRowPositions();
+		this.table.rowManager.reRenderInPosition();
 	},
 };
 
@@ -12941,7 +12973,7 @@ class HtmlTableImport extends Module{
 			}
 
 			if(!col.field) {
-				col.field = header.textContent.trim().toLowerCase().replace(" ", "_");
+				col.field = header.textContent.trim().toLowerCase().replaceAll(" ", "_");
 			}
 
 			width = header.getAttribute("width");
@@ -13599,7 +13631,7 @@ var defaultBindings = {
 	scrollToEnd:35,
 	undo:["ctrl + 90", "meta + 90"],
 	redo:["ctrl + 89", "meta + 89"],
-	copyToClipboard:["ctrl + 67", "meta + 89"],
+	copyToClipboard:["ctrl + 67", "meta + 67"],
 };
 
 var defaultActions = {
@@ -17611,6 +17643,7 @@ class ResizeColumns extends Module{
 			if(cell.modules.resize && cell.modules.resize.handleEl){
 				if(frozenOffset){
 					cell.modules.resize.handleEl.style[column.modules.frozen.position] = frozenOffset;
+					cell.modules.resize.handleEl.style["z-index"] = 11;
 				}
 				
 				cell.element.after(cell.modules.resize.handleEl);
@@ -20550,19 +20583,21 @@ class BasicHorizontal extends Renderer{
 	constructor(table){
 		super(table);
 	}
-
-	renderRowCells(row) {
+	
+	renderRowCells(row, inFragment) {
 		const rowFrag = document.createDocumentFragment();
 		row.cells.forEach((cell) => {
 			rowFrag.appendChild(cell.getElement());
 		});
 		row.element.appendChild(rowFrag);
-
-		row.cells.forEach((cell) => {
-			cell.cellRendered();
-		});
+		
+		if(!inFragment){
+			row.cells.forEach((cell) => {
+				cell.cellRendered();
+			});
+		}
 	}
-
+	
 	reinitializeColumnWidths(columns){
 		columns.forEach(function(column){
 			column.reinitializeWidth();
@@ -21891,82 +21926,100 @@ class ColumnManager extends CoreFeature {
 class BasicVertical extends Renderer{
 	constructor(table){
 		super(table);
-
+		
 		this.verticalFillMode = "fill";
-
+		
 		this.scrollTop = 0;
 		this.scrollLeft = 0;
-
+		
 		this.scrollTop = 0;
 		this.scrollLeft = 0;
 	}
-
+	
 	clearRows(){
 		var element = this.tableElement;
-
+		
 		// element.children.detach();
 		while(element.firstChild) element.removeChild(element.firstChild);
-
+		
 		element.scrollTop = 0;
 		element.scrollLeft = 0;
-
+		
 		element.style.minWidth = "";
 		element.style.minHeight = "";
 		element.style.display = "";
 		element.style.visibility = "";
 	}
-
+	
 	renderRows() {
 		var element = this.tableElement,
 		onlyGroupHeaders = true,
-		tableFrag = document.createDocumentFragment();
-
-		this.rows().forEach((row, index) => {
+		tableFrag = document.createDocumentFragment(),
+		rows = this.rows();
+		
+		rows.forEach((row, index) => {
 			this.styleRow(row, index);
-			row.initialize(true);
-
+			row.initialize(false, true);
+			
 			if (row.type !== "group") {
 				onlyGroupHeaders = false;
 			}
-
+			
 			tableFrag.appendChild(row.getElement());
 		});
+		
 		element.appendChild(tableFrag);
-
+		
+		rows.forEach((row) => {
+			row.rendered();
+			
+			if(!row.heightInitialized) {
+				row.calcHeight(true);
+			}
+		});
+		
+		rows.forEach((row) => {
+			if(!row.heightInitialized) {
+				row.setCellHeight();
+			}
+		});
+		
+		
+		
 		if(onlyGroupHeaders){
 			element.style.minWidth = this.table.columnManager.getWidth() + "px";
 		}else {
 			element.style.minWidth = "";
 		}
 	}
-
-
+	
+	
 	rerenderRows(callback){	
 		this.clearRows();
-
+		
 		if(callback){
 			callback();
 		}
-
+		
 		this.renderRows();
 	}
-
+	
 	scrollToRowNearestTop(row){
 		var rowTop = Helpers.elOffset(row.getElement()).top;
-
+		
 		return !(Math.abs(this.elementVertical.scrollTop - rowTop) > Math.abs(this.elementVertical.scrollTop + this.elementVertical.clientHeight - rowTop));
 	}
-
+	
 	scrollToRow(row){
 		var rowEl = row.getElement();
-
+		
 		this.elementVertical.scrollTop = Helpers.elOffset(rowEl).top - Helpers.elOffset(this.elementVertical).top + this.elementVertical.scrollTop;
 	}
-
+	
 	visibleRows(includingBuffer){
 		return this.rows();
 	}
-
+	
 }
 
 class VirtualDomVertical extends Renderer{
@@ -22255,13 +22308,14 @@ class VirtualDomVertical extends Renderer{
 				rowFragment = document.createDocumentFragment();
 
 				i = 0;
+
 				while ((i < rowsToRender) && this.vDomBottom < rowsCount -1) {	
 					index = this.vDomBottom + 1,
 					row = rows[index];
 
 					this.styleRow(row, index);
 
-					row.initialize();
+					row.initialize(false, true);
 					if(!row.heightInitialized && !this.table.options.rowHeight){
 						row.clearCellHeight();
 					}
@@ -22275,21 +22329,23 @@ class VirtualDomVertical extends Renderer{
 				if(!renderedRows.length){
 					break;
 				}
+
 				element.appendChild(rowFragment);
 				
 				// NOTE: The next 3 loops are separate on purpose
 				// This is to batch up the dom writes and reads which drastically improves performance 
+
 				renderedRows.forEach((row) => {
+					row.rendered();
+
 					if(!row.heightInitialized) {
 						row.calcHeight(true);
-						
 					}
 				});
 
 				renderedRows.forEach((row) => {
 					if(!row.heightInitialized) {
 						row.setCellHeight();
-						
 					}
 				});
 
@@ -23582,6 +23638,8 @@ class RowManager extends CoreFeature{
 			
 			this.getElement().appendChild(this.placeholder);
 			this._positionPlaceholder();
+
+			this.adjustTableSize();
 		}
 	}
 	
@@ -24179,58 +24237,66 @@ class ComponentFunctionBinder{
 class DataLoader extends CoreFeature{
 	constructor(table){
 		super(table);
-
+		
 		this.requestOrder = 0; //prevent requests coming out of sequence if overridden by another load request
 		this.loading = false;
 	}
-
+	
 	initialize(){}
-
+	
 	load(data, params, config, replace, silent, columnsChanged){
 		var requestNo = ++this.requestOrder;
 
+		if(this.table.destroyed){
+			return Promise.resolve();
+		}
+		
 		this.dispatchExternal("dataLoading", data);
-
+		
 		//parse json data to array
 		if (data && (data.indexOf("{") == 0 || data.indexOf("[") == 0)){
 			data = JSON.parse(data);
 		}
-
+		
 		if(this.confirm("data-loading", [data, params, config, silent])){
 			this.loading = true;
-
+			
 			if(!silent){
 				this.alertLoader();
 			}
-
+			
 			//get params for request
 			params = this.chain("data-params", [data, config, silent], params || {}, params || {});
-
+			
 			params = this.mapParams(params, this.table.options.dataSendParams);
-
+			
 			var result = this.chain("data-load", [data, params, config, silent], false, Promise.resolve([]));
 			
 			return result.then((response) => {
-				if(!Array.isArray(response) && typeof response == "object"){
-					response = this.mapParams(response, this.objectInvert(this.table.options.dataReceiveParams));
-				}
-
-				var rowData = this.chain("data-loaded", response, null, response);
-
-				if(requestNo == this.requestOrder){
-					this.clearAlert();
-
-					if(rowData !== false){
-						this.dispatchExternal("dataLoaded", rowData);
-						this.table.rowManager.setData(rowData,  replace, typeof columnsChanged === "undefined" ? !replace : columnsChanged);
+				if(!this.table.destroyed){
+					if(!Array.isArray(response) && typeof response == "object"){
+						response = this.mapParams(response, this.objectInvert(this.table.options.dataReceiveParams));
+					}
+					
+					var rowData = this.chain("data-loaded", response, null, response);
+					
+					if(requestNo == this.requestOrder){
+						this.clearAlert();
+						
+						if(rowData !== false){
+							this.dispatchExternal("dataLoaded", rowData);
+							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");
 					}
 				}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");
+					console.warn("Data Load Response Blocked - Table has been destroyed");
 				}
 			}).catch((error) => {
 				console.error("Data Load Error: ", error);
 				this.dispatchExternal("dataLoadError", error);
-
+				
 				if(!silent){
 					this.alertError();
 				}
@@ -24244,52 +24310,52 @@ class DataLoader extends CoreFeature{
 				});
 		}else {
 			this.dispatchExternal("dataLoaded", data);
-
+			
 			if(!data){
 				data = [];
 			}
-
+			
 			this.table.rowManager.setData(data, replace, typeof columnsChanged === "undefined" ? !replace : columnsChanged);
 			return Promise.resolve();
 		}
 	}
-
+	
 	mapParams(params, map){
 		var output = {};
-
+		
 		for(let key in params){
 			output[map.hasOwnProperty(key) ? map[key] : key] = params[key];
 		}
-
+		
 		return output;
 	}
-
+	
 	objectInvert(obj){
 		var output = {};
-
+		
 		for(let key in obj){
 			output[obj[key]] = key;
 		}
-
+		
 		return output;
 	}
-
+	
 	blockActiveLoad(){
 		this.requestOrder++;
 	}
-
+	
 	alertLoader(){
 		var shouldLoad = typeof this.table.options.dataLoader === "function" ? this.table.options.dataLoader() : this.table.options.dataLoader;
-
+		
 		if(shouldLoad){
 			this.table.alertManager.alert(this.table.options.dataLoaderLoading || this.langText("data|loading"));
 		}
 	}
-
+	
 	alertError(){
 		this.table.alertManager.alert(this.table.options.dataLoaderError || this.langText("data|error"), "error");
 	}
-
+	
 	clearAlert(){
 		this.table.alertManager.clear();
 	}
@@ -24938,6 +25004,16 @@ class Layout extends Module{
 		}
 
 		this.table.element.setAttribute("tabulator-layout", this.mode);
+		this.subscribe("column-init", this.initializeColumn.bind(this));
+	}
+
+	initializeColumn(column){
+		if(column.definition.widthGrow){
+			column.definition.widthGrow = Number(column.definition.widthGrow);
+		}
+		if(column.definition.widthShrink){
+			column.definition.widthShrink = Number(column.definition.widthShrink);
+		}
 	}
 
 	getMode(){