tabulator-tables 5.4.4 → 5.5.1

package/dist/js/tabulator.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.4.4 (c) Oliver Folkerd 2023 */
+/* Tabulator v5.5.1 (c) Oliver Folkerd 2023 */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 	typeof define === 'function' && define.amd ? define(factory) :
@@ -310,8 +310,8 @@
 			return this._column;
 		}
 
-		scrollTo(){
-			return this._column.table.columnManager.scrollToColumn(this._column);
+		scrollTo(position, ifVisible){
+			return this._column.table.columnManager.scrollToColumn(this._column, position, ifVisible);
 		}
 
 		getTable(){
@@ -419,10 +419,12 @@
 			return this._cell.row.getComponent();
 		}
 
-		getData(){
-			return this._cell.row.getData();
+		getData(transform){
+			return this._cell.row.getData(transform);
+		}
+		getType(){
+			return "cell";
 		}
-
 		getField(){
 			return this._cell.column.getField();
 		}
@@ -1995,14 +1997,21 @@
 		constructor(table){
 			super(table);
 		}
-
-		renderRowCells(row){
+		
+		renderRowCells(row, inFragment) {
+			const rowFrag = document.createDocumentFragment();
 			row.cells.forEach((cell) => {
-				row.element.appendChild(cell.getElement());
-				cell.cellRendered();
+				rowFrag.appendChild(cell.getElement());
 			});
+			row.element.appendChild(rowFrag);
+			
+			if(!inFragment){
+				row.cells.forEach((cell) => {
+					cell.cellRendered();
+				});
+			}
 		}
-
+		
 		reinitializeColumnWidths(columns){
 			columns.forEach(function(column){
 				column.reinitializeWidth();
@@ -2183,8 +2192,13 @@
 			if(this.initialized){
 				this.initializeRow(row);
 			}else {
+				const rowFrag = document.createDocumentFragment();
+				row.cells.forEach((cell) => {
+					rowFrag.appendChild(cell.getElement());
+				});
+				row.element.appendChild(rowFrag);
+
 				row.cells.forEach((cell) => {
-					row.element.appendChild(cell.getElement());
 					cell.cellRendered();
 				});
 			}
@@ -2619,6 +2633,8 @@
 			
 			this.contentsElement.insertBefore(this.headersElement, this.contentsElement.firstChild);
 			this.element.insertBefore(this.contentsElement, this.element.firstChild);
+
+			this.initializeScrollWheelWatcher();
 			
 			this.subscribe("scroll-horizontal", this.scrollHorizontal.bind(this));
 			this.subscribe("scrollbar-vertical", this.padVerticalScrollbar.bind(this));
@@ -2710,6 +2726,19 @@
 			
 			this.renderer.scrollColumns(left);
 		}
+
+		initializeScrollWheelWatcher(){
+			this.contentsElement.addEventListener("wheel", (e) => {
+				var left;
+
+				if(e.deltaX){
+					left = this.contentsElement.scrollLeft + e.deltaX;
+
+					this.table.rowManager.scrollHorizontal(left);
+					this.table.columnManager.scrollHorizontal(left);
+				}
+			});
+		}
 		
 		///////////// Column Setup Functions /////////////
 		generateColumnsFromRowData(data){
@@ -3364,8 +3393,8 @@
 			return this._row.delete();
 		}
 
-		scrollTo(){
-			return this._row.table.rowManager.scrollToRow(this._row);
+		scrollTo(position, ifVisible){
+			return this._row.table.rowManager.scrollToRow(this._row, position, ifVisible);
 		}
 
 		move(to, after){
@@ -3466,7 +3495,7 @@
 		}
 		
 		//functions to setup on first render
-		initialize(force){
+		initialize(force, inFragment){
 			this.create();
 			
 			if(!this.initialized || force){
@@ -3481,7 +3510,7 @@
 				
 				this.initialized = true;
 				
-				this.table.columnManager.renderer.renderRowCells(this);
+				this.table.columnManager.renderer.renderRowCells(this, inFragment);
 				
 				if(force){
 					this.normalizeHeight();
@@ -3495,9 +3524,15 @@
 				
 				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;
@@ -3860,79 +3895,100 @@
 	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(){
+		
+		renderRows() {
 			var element = this.tableElement,
-			onlyGroupHeaders = true;
-
-			this.rows().forEach((row, index) => {
+			onlyGroupHeaders = true,
+			tableFrag = document.createDocumentFragment(),
+			rows = this.rows();
+			
+			rows.forEach((row, index) => {
 				this.styleRow(row, index);
-				element.appendChild(row.getElement());
-				row.initialize(true);
-
-				if(row.type !== "group"){
+				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{
@@ -3978,7 +4034,6 @@
 
 			element.style.paddingTop = "";
 			element.style.paddingBottom = "";
-			// element.style.minWidth = "";
 			element.style.minHeight = "";
 			element.style.display = "";
 			element.style.visibility = "";
@@ -4157,17 +4212,27 @@
 		//////////////////////////////////////
 
 		//full virtual render
-		_virtualRenderFill(position, forceMove, offset){
+		_virtualRenderFill(position, forceMove, offset) {
 			var	element = this.tableElement,
 			holder = this.elementVertical,
 			topPad = 0,
 			rowsHeight = 0,
+			rowHeight = 0,
 			heightOccupied = 0,
 			topPadHeight = 0,
 			i = 0,
 			rows = this.rows(),
 			rowsCount = rows.length,
-			containerHeight = this.elementVertical.clientHeight;
+			index = 0,
+			row,
+			rowFragment,
+			renderedRows = [],
+			totalRowsRendered = 0,
+			rowsToRender = 0,
+			fixedHeight = this.table.rowManager.fixedHeight,
+			containerHeight = this.elementVertical.clientHeight, 
+			avgRowHeight = this.table.options.rowHeight, 
+			resized = true;
 
 			position = position || 0;
 
@@ -4195,44 +4260,92 @@
 
 			if(rowsCount && Helpers.elVisible(this.elementVertical)){
 				this.vDomTop = position;
-
 				this.vDomBottom = position -1;
 
-				while ((rowsHeight <= containerHeight + this.vDomWindowBuffer || i < this.vDomWindowMinTotalRows) && this.vDomBottom < rowsCount -1){
-					var index = this.vDomBottom + 1,
-					row = rows[index],
-					rowHeight = 0;
+				if(fixedHeight || this.table.options.maxHeight) {
+					if(avgRowHeight) {
+						rowsToRender = (containerHeight / avgRowHeight) + (this.vDomWindowBuffer / avgRowHeight);
+					}
+					rowsToRender = Math.max(this.vDomWindowMinTotalRows, Math.ceil(rowsToRender));
+				}
+				else {
+					rowsToRender = rowsCount;
+				}
 
-					this.styleRow(row, index);
+				while(((rowsToRender == rowsCount || rowsHeight <= containerHeight + this.vDomWindowBuffer) || totalRowsRendered < this.vDomWindowMinTotalRows) && this.vDomBottom < rowsCount -1) {
+					renderedRows = [];
+					rowFragment = document.createDocumentFragment();
 
-					element.appendChild(row.getElement());
+					i = 0;
 
-					row.initialize();
+					while ((i < rowsToRender) && this.vDomBottom < rowsCount -1) {	
+						index = this.vDomBottom + 1,
+						row = rows[index];
 
-					if(!row.heightInitialized){
-						row.normalizeHeight(true);
-					}
+						this.styleRow(row, index);
 
-					rowHeight = row.getHeight();
+						row.initialize(false, true);
+						if(!row.heightInitialized && !this.table.options.rowHeight){
+							row.clearCellHeight();
+						}
 
-					if(i < topPad){
-						topPadHeight += rowHeight;
-					}else {
-						rowsHeight += rowHeight;
+						rowFragment.appendChild(row.getElement());
+						renderedRows.push(row);
+						this.vDomBottom ++;
+						i++;
 					}
 
-					if(rowHeight > this.vDomWindowBuffer){
-						this.vDomWindowBuffer = rowHeight * 2;
+					if(!renderedRows.length){
+						break;
 					}
 
-					this.vDomBottom ++;
-					i++;
+					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();
+						}
+					});
+
+					renderedRows.forEach((row) => {
+						rowHeight = row.getHeight();
+						
+						if(totalRowsRendered < topPad){
+							topPadHeight += rowHeight;
+						}else {
+							rowsHeight += rowHeight;
+						}
+
+						if(rowHeight > this.vDomWindowBuffer){
+							this.vDomWindowBuffer = rowHeight * 2;
+						}
+						totalRowsRendered++;
+					});
+
+					resized = this.table.rowManager.adjustTableSize();
+					containerHeight = this.elementVertical.clientHeight;
+					if(resized && (fixedHeight || this.table.options.maxHeight))
+					{
+						avgRowHeight = rowsHeight / totalRowsRendered;
+						rowsToRender = Math.max(this.vDomWindowMinTotalRows, Math.ceil((containerHeight / avgRowHeight) + (this.vDomWindowBuffer / avgRowHeight)));
+					}
 				}
 
 				if(!position){
 					this.vDomTopPad = 0;
 					//adjust row height to match average of rendered elements
-					this.vDomRowHeight = Math.floor((rowsHeight + topPadHeight) / i);
+					this.vDomRowHeight = Math.floor((rowsHeight + topPadHeight) / totalRowsRendered);
 					this.vDomBottomPad = this.vDomRowHeight * (rowsCount - this.vDomBottom -1);
 
 					this.vDomScrollHeight = topPadHeight + rowsHeight + this.vDomBottomPad - containerHeight;
@@ -4240,9 +4353,9 @@
 					this.vDomTopPad = !forceMove ? this.scrollTop - topPadHeight : (this.vDomRowHeight * this.vDomTop) + offset;
 					this.vDomBottomPad = this.vDomBottom == rowsCount-1 ? 0 : Math.max(this.vDomScrollHeight - this.vDomTopPad - rowsHeight - topPadHeight, 0);
 				}
-
-				element.style.paddingTop = this.vDomTopPad + "px";
-				element.style.paddingBottom = this.vDomBottomPad + "px";
+				
+				element.style.paddingTop = this.vDomTopPad+"px";
+				element.style.paddingBottom = this.vDomBottomPad+"px";
 
 				if(forceMove){
 					this.scrollTop = this.vDomTopPad + (topPadHeight) + offset - (this.elementVertical.scrollWidth > this.elementVertical.clientWidth ? this.elementVertical.offsetHeight - containerHeight : 0);
@@ -4545,7 +4658,7 @@
 			
 			this.dataPipeline = []; //hold data pipeline tasks
 			this.displayPipeline = []; //hold data display pipeline tasks
-
+			
 			this.scrollbarWidth = 0;
 			
 			this.renderer = null;
@@ -4574,12 +4687,18 @@
 		
 		initializePlaceholder(){
 			var placeholder = this.table.options.placeholder;
-
+			
+			if(typeof placeholder === "function"){
+				placeholder = placeholder.call(this.table);
+			}
+			
+			placeholder = this.chain("placeholder", [placeholder], placeholder, placeholder) || placeholder;
+			
 			//configure placeholder element
 			if(placeholder){	
 				let el = document.createElement("div");
 				el.classList.add("tabulator-placeholder");
-
+				
 				if(typeof placeholder == "string"){
 					let contents = document.createElement("div");
 					contents.classList.add("tabulator-placeholder-contents");
@@ -4595,10 +4714,10 @@
 					this.placeholderContents = placeholder;
 				}else {
 					console.warn("Invalid placeholder provided, must be string or HTML Element", placeholder);
-
+					
 					this.el = null;
 				}
-
+				
 				this.placeholder = el;
 			}
 		}
@@ -4759,15 +4878,15 @@
 			this.destroy();
 			
 			this.adjustTableSize();
-
+			
 			this.dispatch("rows-wiped");
 		}
-
+		
 		destroy(){
 			this.rows.forEach((row) => {
 				row.wipe();
 			});
-
+			
 			this.rows = [];
 			this.activeRows = [];
 			this.activeRowsPipeline = [];
@@ -4840,7 +4959,7 @@
 					rows.push(row);
 					this.dispatch("row-added", row, item, pos, index);
 				});
-
+				
 				this.refreshActiveData(refreshDisplayOnly ? "displayPipeline" : false, false, true);
 				
 				this.regenerateRowPositions();
@@ -5228,28 +5347,28 @@
 				
 					for(let i = index; i < this.dataPipeline.length; i++){
 						let result = this.dataPipeline[i].handler(this.activeRowsPipeline[i].slice(0));
-						
+					
 						this.activeRowsPipeline[i + 1] = result || this.activeRowsPipeline[i].slice(0);
 					}
-					
+				
 					this.setActiveRows(this.activeRowsPipeline[this.dataPipeline.length]);
-					
+				
 				case "display":
 					index = 0;
 					this.resetDisplayRows();
-					
+				
 				case "displayPipeline":
 					for(let i = index; i < this.displayPipeline.length; i++){
 						let result = this.displayPipeline[i].handler((i ? this.getDisplayRows(i - 1) : this.activeRows).slice(0), renderInPosition);
-
+					
 						this.setDisplayRows(result || this.getDisplayRows(i - 1).slice(0), i);
 					}
 				
 				case "end":
-					//case to handle scenario when trying to skip past end stage
+				//case to handle scenario when trying to skip past end stage
 					this.regenerateRowPositions();
 			}
-
+			
 			if(this.getDisplayRows().length){
 				this._clearPlaceholder();
 			}
@@ -5285,7 +5404,7 @@
 		//set display row pipeline data
 		setDisplayRows(displayRows, index){
 			this.displayRows[index] = displayRows;
-
+			
 			if(index == this.displayRows.length -1){
 				this.displayRowsCount = this.displayRows[this.displayRows.length -1].length;
 			}
@@ -5320,7 +5439,7 @@
 		//return only actual rows (not group headers etc)
 		getRows(type){
 			var rows = [];
-
+			
 			switch(type){
 				case "active":
 					rows = this.activeRows;
@@ -5329,11 +5448,11 @@
 				case "display":
 					rows = this.table.rowManager.getDisplayRows();
 					break;
-					
+				
 				case "visible":
 					rows = this.getVisibleRows(false, true);
 					break;
-
+				
 				default:
 					rows = this.chain("rows-retrieve", type, null, this.rows) || this.rows;
 			}
@@ -5354,25 +5473,25 @@
 				this.dispatchExternal("renderStarted");
 				
 				this.renderer.rerenderRows(callback);
-
+				
 				if(!this.fixedHeight){
 					this.adjustTableSize();
 				}
-
+				
 				this.scrollBarCheck();
 				
 				this.dispatchExternal("renderComplete");
 			}
 		}
-
+		
 		scrollBarCheck(){
 			var scrollbarWidth = 0;
-
+			
 			//adjust for vertical scrollbar moving table when present
 			if(this.element.scrollHeight > this.element.clientHeight){
 				scrollbarWidth = this.element.offsetWidth - this.element.clientWidth;
 			}
-
+			
 			if(scrollbarWidth !== this.scrollbarWidth){
 				this.scrollbarWidth = scrollbarWidth;
 				this.dispatch("scrollbar-vertical", scrollbarWidth);
@@ -5425,7 +5544,7 @@
 				
 				if(this.firstRender){
 					this.firstRender = false;
-
+					
 					if(!this.fixedHeight){
 						this.adjustTableSize();
 					}
@@ -5445,7 +5564,7 @@
 			if(!this.displayRowsCount){
 				this._showPlaceholder();
 			}
-
+			
 			this.scrollBarCheck();
 			
 			this.dispatchExternal("renderComplete");
@@ -5470,7 +5589,7 @@
 			
 			this.renderer.clearRows();
 		}
-
+		
 		tableEmpty(){
 			this.renderEmptyScroll();
 			this._showPlaceholder();
@@ -5478,10 +5597,18 @@
 		
 		_showPlaceholder(){
 			if(this.placeholder){
+				if(this.placeholder && this.placeholder.parentNode){
+					this.placeholder.parentNode.removeChild(this.placeholder);
+				}
+				
+				this.initializePlaceholder();
+				
 				this.placeholder.setAttribute("tabulator-render-mode", this.renderMode);
 				
 				this.getElement().appendChild(this.placeholder);
 				this._positionPlaceholder();
+
+				this.adjustTableSize();
 			}
 		}
 		
@@ -5489,7 +5616,7 @@
 			if(this.placeholder && this.placeholder.parentNode){
 				this.placeholder.parentNode.removeChild(this.placeholder);
 			}
-
+			
 			// clear empty table placeholder min
 			this.tableElement.style.minWidth = "";
 			this.tableElement.style.display = "";
@@ -5524,7 +5651,8 @@
 		
 		//adjust the height of the table holder to fit in the Tabulator element
 		adjustTableSize(){
-			var initialHeight = this.element.clientHeight, minHeight;
+			let initialHeight = this.element.clientHeight, minHeight;
+			let resized = false;
 			
 			if(this.renderer.verticalFillMode === "fill"){
 				let otherHeight =  Math.floor(this.table.columnManager.getElement().getBoundingClientRect().height + (this.table.footerManager && this.table.footerManager.active && !this.table.footerManager.external ? this.table.footerManager.getElement().getBoundingClientRect().height : 0));
@@ -5532,12 +5660,14 @@
 				if(this.fixedHeight){
 					minHeight = isNaN(this.table.options.minHeight) ? this.table.options.minHeight : this.table.options.minHeight + "px";
 					
+					const height = "calc(100% - " + otherHeight + "px)";
 					this.element.style.minHeight = minHeight || "calc(100% - " + otherHeight + "px)";
-					this.element.style.height = "calc(100% - " + otherHeight + "px)";
-					this.element.style.maxHeight = "calc(100% - " + otherHeight + "px)";
-				}else {
+					this.element.style.height = height;
+					this.element.style.maxHeight = height;
+				} else {
 					this.element.style.height = "";
-					this.element.style.height = (this.table.element.clientHeight - otherHeight) + "px";
+					this.element.style.height =
+					this.table.element.clientHeight - otherHeight + "px";
 					this.element.scrollTop = this.scrollTop;
 				}
 				
@@ -5545,17 +5675,19 @@
 				
 				//check if the table has changed size when dealing with variable height tables
 				if(!this.fixedHeight && initialHeight != this.element.clientHeight){
+					resized = true;
 					if(this.subscribed("table-resize")){
 						this.dispatch("table-resize");
 					}else {
 						this.redraw();
 					}
 				}
-
+				
 				this.scrollBarCheck();
 			}
 			
 			this._positionPlaceholder();
+			return resized;
 		}
 		
 		//reinitialize all rows
@@ -5590,15 +5722,14 @@
 		
 		//redraw table
 		redraw (force){
-			var left = this.scrollLeft;
-			
-			this.adjustTableSize();
-			
+			const resized = this.adjustTableSize();
 			this.table.tableWidth = this.table.element.clientWidth;
 			
 			if(!force){
-				this.reRenderInPosition();
-				this.scrollHorizontal(left);
+				if(resized) {
+					this.reRenderInPosition();
+				}
+				this.scrollHorizontal(this.scrollLeft);
 			}else {
 				this.renderTable();
 			}
@@ -6075,58 +6206,66 @@
 	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();
 					}
@@ -6140,52 +6279,52 @@
 					});
 			}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();
 		}
@@ -9525,6 +9664,13 @@
 
 			return output;
 		},
+		"unique":function(values, data, calcParams){
+			var unique = values.filter((value, index) => {
+				return (values || value === 0) && values.indexOf(value) === index;
+			});
+
+			return unique.length;
+		},
 	};
 
 	class ColumnCalcs extends Module{
@@ -10161,6 +10307,9 @@
 							this.branchEl = options.dataTreeBranchElement;
 						}
 					}
+				}else {
+					this.branchEl = document.createElement("div");
+					this.branchEl.classList.add("tabulator-data-tree-branch-empty");
 				}
 
 				if(options.dataTreeCollapseElement){
@@ -10399,7 +10548,7 @@
 
 					row.create();
 
-					config = row.modules.dataTree.children;
+					config = row.modules.dataTree;
 
 					if(!config.index && config.children !== false){
 						children = this.getChildren(row);
@@ -10664,7 +10813,7 @@
 			var config = row.modules.dataTree,
 			output = [];
 
-			if(config.children){
+			if(config && config.children){
 
 				if(!Array.isArray(config.children)){
 					config.children = this.generateChildren(row);
@@ -10910,8 +11059,11 @@
 		workbook = XLSX.utils.book_new(),
 		tableFeatures = new CoreFeature(this),
 		compression =  'compress' in options ? options.compress : true,
+		writeOptions = options.writeOptions || {bookType:'xlsx', bookSST:true, compression},
 		output;
 
+		writeOptions.type = 'binary';
+
 		workbook.SheetNames = [];
 		workbook.Sheets = {};
 
@@ -10997,7 +11149,7 @@
 			return buf;
 		}
 
-		output = XLSX.write(workbook, {bookType:'xlsx', bookSST:true, type: 'binary', compression });
+		output = XLSX.write(workbook, writeOptions);
 
 		setFileContents(s2ab(output), "application/octet-stream");
 	}
@@ -11295,7 +11447,7 @@
 		input.value = typeof cellValue !== "undefined" ? cellValue : "";
 
 		onRendered(function(){
-			if(cell._getSelf){
+			if(cell.getType() === "cell"){
 				input.focus({preventScroll: true});
 				input.style.height = "100%";
 
@@ -11376,7 +11528,7 @@
 		input.value = value;
 
 		onRendered(function(){
-			if(cell._getSelf){
+			if(cell.getType() === "cell"){
 				input.focus({preventScroll: true});
 				input.style.height = "100%";
 
@@ -11510,7 +11662,7 @@
 		};
 
 		onRendered(function () {
-			if(cell._getSelf){
+			if(cell.getType() === "cell"){
 				//submit new value on blur
 				input.removeEventListener("blur", blurFunc);
 
@@ -11614,7 +11766,7 @@
 		input.value = cellValue;
 		
 		onRendered(function () {
-			if(cell._getSelf){
+			if(cell.getType() === "cell"){
 				input.focus({preventScroll: true});
 				input.style.height = "100%";
 			}
@@ -11719,7 +11871,7 @@
 		input.value = cellValue;
 		
 		onRendered(function(){
-			if(cell._getSelf){
+			if(cell.getType() === "cell"){
 				input.focus({preventScroll: true});
 				input.style.height = "100%";
 				
@@ -11846,7 +11998,7 @@
 		input.value = cellValue;
 		
 		onRendered(function(){
-			if(cell._getSelf){
+			if(cell.getType() == "cell"){
 				input.focus({preventScroll: true});
 				input.style.height = "100%";
 				
@@ -11972,7 +12124,7 @@
 		input.value = cellValue;
 		
 		onRendered(function(){
-			if(cell._getSelf){
+			if(cell.getType() === "cell"){
 				input.focus({preventScroll: true});
 				input.style.height = "100%";
 				
@@ -12067,7 +12219,7 @@
 			
 			this.initialValues = null; 
 			
-			this.isFilter = !cell._getSelf;
+			this.isFilter = cell.getType() === "header";
 			
 			this.filterTimeout = null;
 			this.filtered = false;
@@ -12133,7 +12285,7 @@
 			function clickStop(e){
 				e.stopPropagation();
 			}	
-		
+			
 			if(!this.isFilter){
 				this.input.style.height = "100%";
 				this.input.focus({preventScroll: true});
@@ -12357,6 +12509,7 @@
 					break;
 				
 				case 9: //tab
+					this._keyTab(e);
 					break;
 				
 				default:
@@ -12403,6 +12556,16 @@
 		//////// Keyboard Navigation /////////
 		//////////////////////////////////////
 		
+		_keyTab(e){
+			if(this.params.autocomplete && this.lastAction === "typing"){
+				this._resolveValue(true);
+			}else {
+				if(this.focusedItem){
+					this._chooseItem(this.focusedItem, true);
+				}
+			}
+		}
+		
 		_keyUp(e){
 			var index = this.displayItems.indexOf(this.focusedItem);
 			
@@ -13040,7 +13203,7 @@
 		
 		_resolveValue(blur){
 			var output, initialValue;
-
+			
 			if(this.popup){
 				this.popup.hide(true);
 			}
@@ -13420,7 +13583,7 @@
 		
 		if(this.table.browser != "firefox" && this.table.browser != "safari"){ //prevent blur issue on mac firefox
 			onRendered(function(){
-				if(cell._getSelf){
+				if(cell.getType() === "cell"){
 					input.focus({preventScroll: true});
 				}
 			});
@@ -14009,8 +14172,8 @@
 				cellEl = cell.getElement();
 				
 				if(this.table.modExists("frozenColumns")){
-					leftEdge += parseInt(this.table.modules.frozenColumns.leftMargin);
-					rightEdge -= parseInt(this.table.modules.frozenColumns.rightMargin);
+					leftEdge += parseInt(this.table.modules.frozenColumns.leftMargin || 0);
+					rightEdge -= parseInt(this.table.modules.frozenColumns.rightMargin || 0);
 				}
 				
 				if(this.table.options.renderHorizontal === "virtual"){
@@ -14019,7 +14182,6 @@
 				}
 				
 				if(cellEl.offsetLeft < leftEdge){
-					
 					this.table.rowManager.element.scrollLeft -= (leftEdge - cellEl.offsetLeft);
 				}else {
 					if(cellEl.offsetLeft + cellEl.offsetWidth  > rightEdge){
@@ -14727,6 +14889,9 @@
 						getElement:function(){
 							return cellEl;
 						},
+						getType:function(){
+							return "cell";
+						},
 						getColumn:function(){
 							return column.getComponent();
 						},
@@ -14987,6 +15152,7 @@
 			this.registerTableOption("initialFilter", false); //initial filtering criteria
 			this.registerTableOption("initialHeaderFilter", false); //initial header filtering criteria
 			this.registerTableOption("headerFilterLiveFilterDelay", 300); //delay before updating column after user types in header filter
+			this.registerTableOption("placeholderHeaderFilter", false); //placeholder when header filter is empty
 
 			this.registerColumnOption("headerFilter");
 			this.registerColumnOption("headerFilterPlaceholder");
@@ -15022,6 +15188,7 @@
 			this.subscribe("column-width-fit-before", this.hideHeaderFilterElements.bind(this));
 			this.subscribe("column-width-fit-after", this.showHeaderFilterElements.bind(this));
 			this.subscribe("table-built", this.tableBuilt.bind(this));
+			this.subscribe("placeholder", this.generatePlaceholder.bind(this));
 
 			if(this.table.options.filterMode === "remote"){
 				this.subscribe("data-params", this.remoteFilterParams.bind(this));
@@ -15057,6 +15224,12 @@
 			return params;
 		}
 
+		generatePlaceholder(text){
+			if(this.table.options.placeholderHeaderFilter && Object.keys(this.headerFilters).length){
+				return this.table.options.placeholderHeaderFilter;
+			}
+		}
+
 		///////////////////////////////////
 		///////// Table Functions /////////
 		///////////////////////////////////
@@ -15340,6 +15513,9 @@
 						getTable:() => {
 							return this.table;
 						},
+						getType:() => {
+							return "header";
+						},
 						getRow:function(){
 							return {
 								normalizeHeight:function(){
@@ -15871,7 +16047,7 @@
 	function money(cell, formatterParams, onRendered){
 		var floatVal = parseFloat(cell.getValue()),
 		sign = "",
-		number, integer, decimal, rgx;
+		number, integer, decimal, rgx, value;
 
 		var decimalSym = formatterParams.decimal || ".";
 		var thousandSym = formatterParams.thousand || ",";
@@ -15903,7 +16079,14 @@
 			}
 		}
 
-		return after ? sign + integer + decimal + symbol : sign + symbol + integer + decimal;
+		value = integer + decimal;
+		
+		if(sign === true){
+			value = "(" + value  + ")";
+			return after ? value + symbol : symbol + value;
+		}else {
+			return after ? sign + value + symbol : sign + symbol + value;
+		}
 	}
 
 	function link(cell, formatterParams, onRendered){
@@ -16609,6 +16792,9 @@
 					getElement:function(){
 						return el;
 					},
+					getType:function(){
+						return "header";
+					},
 					getColumn:function(){
 						return column.getComponent();
 					},
@@ -16980,7 +17166,7 @@
 		layoutElement(element, column){
 			var position;
 			
-			if(column.modules.frozen){
+			if(column.modules.frozen && element){
 				element.style.position = "sticky";
 
 				if(this.table.rtl){
@@ -17244,6 +17430,10 @@
 			this._group.toggleVisibility();
 		}
 
+		scrollTo(position, ifVisible){
+			return this._group.groupManager.table.rowManager.scrollToRow(this._group, position, ifVisible);
+		}
+
 		_getSelf(){
 			return this._group;
 		}
@@ -17323,7 +17513,7 @@
 			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);
@@ -17346,9 +17536,15 @@
 				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();
+					});
 				});
 			}
 		}
@@ -17469,7 +17665,7 @@
 				if(el.parentNode){
 					el.parentNode.removeChild(el);
 				}
-
+				
 				if(!this.groupManager.blockRedraw){
 					this.generateGroupHeaderContents();
 					
@@ -17594,6 +17790,7 @@
 			}
 			return count;
 		}
+
 		
 		toggleVisibility(){
 			if(this.visible){
@@ -17718,12 +17915,18 @@
 			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;
 		}
@@ -17731,7 +17934,9 @@
 		generateGroupHeaderContents(){
 			var data = [];
 			
-			this.rows.forEach(function(row){
+			var rows = this.getRows(false, true);
+			
+			rows.forEach(function(row){
 				data.push(row.getData());
 			});
 			
@@ -17836,6 +18041,8 @@
 		clearCellHeight(){}
 		
 		deinitializeHeight(){}
+
+		rendered(){}
 		
 		//////////////// Object Generation /////////////////
 		getComponent(){
@@ -18502,8 +18709,12 @@
 		},
 
 		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();
 		},
 	};
 
@@ -18528,8 +18739,10 @@
 		},
 
 		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();
 		},
 	};
 
@@ -19277,8 +19490,20 @@
 
 			this.subscribe("column-init", this.initializeColumn.bind(this));
 			this.subscribe("cell-dblclick", this.cellContentsSelectionFixer.bind(this));
+			this.subscribe("scroll-horizontal", this.clearTouchWatchers.bind(this));
+			this.subscribe("scroll-vertical", this.clearTouchWatchers.bind(this));
 		}
 
+		clearTouchWatchers(){
+			var types = Object.values(this.touchWatchers);
+
+			types.forEach((type) => {
+				for(let key in type){
+					type[key] = null;
+				}
+			});
+		}
+			
 		cellContentsSelectionFixer(e, cell){
 			var range;
 
@@ -22234,6 +22459,7 @@
 				this.config = {
 					sort:this.table.options.persistence === true || this.table.options.persistence.sort,
 					filter:this.table.options.persistence === true || this.table.options.persistence.filter,
+					headerFilter:this.table.options.persistence === true || this.table.options.persistence.headerFilter,
 					group:this.table.options.persistence === true || this.table.options.persistence.group,
 					page:this.table.options.persistence === true || this.table.options.persistence.page,
 					columns:this.table.options.persistence === true ? ["title", "width", "visible"] : this.table.options.persistence.columns,
@@ -22284,6 +22510,7 @@
 				this.subscribe("table-redraw", this.tableRedraw.bind(this));
 
 				this.subscribe("filter-changed", this.eventSave.bind(this, "filter"));
+				this.subscribe("filter-changed", this.eventSave.bind(this, "headerFilter"));
 				this.subscribe("sort-changed", this.eventSave.bind(this, "sort"));
 				this.subscribe("group-changed", this.eventSave.bind(this, "group"));
 				this.subscribe("page-changed", this.eventSave.bind(this, "page"));
@@ -22303,7 +22530,7 @@
 		}
 
 		tableBuilt(){
-			var sorters, filters;
+			var sorters, filters, headerFilters;
 
 			if(this.config.sort){
 				sorters = this.load("sort");
@@ -22320,6 +22547,14 @@
 					this.table.options.initialFilter = filters;
 				}
 			}
+			if(this.config.headerFilter){
+				headerFilters = this.load("headerFilter");
+
+				if(!headerFilters === false){
+					this.table.options.initialHeaderFilter = headerFilters;
+				}
+			}
+			
 		}
 
 		tableRedraw(force){
@@ -22480,6 +22715,10 @@
 					data = this.table.modules.filter.getFilters();
 					break;
 
+				case "headerFilter":
+					data = this.table.modules.filter.getHeaderFilters();
+					break;
+
 				case "sort":
 					data = this.validateSorters(this.table.modules.sort.getSort());
 					break;
@@ -24212,6 +24451,9 @@
 							getData:function(){
 								return data;
 							},
+							getType:function(){
+								return "cell";
+							},
 							getElement:function(){
 								return document.createElement("div");
 							},
@@ -24476,7 +24718,7 @@
 		}
 
 		checkRowSelectability(row){
-			if(row.type === "row"){
+			if(row && row.type === "row"){
 				return this.table.options.selectableCheck.call(this.table, row.getComponent());
 			}
 
@@ -24496,48 +24738,44 @@
 		
 		//select a number of rows
 		selectRows(rows){
-			var rowMatch;
+			var changes = [], 
+			rowMatch, change;
 			
 			switch(typeof rows){
 				case "undefined":
-					this.table.rowManager.rows.forEach((row) => {
-						this._selectRow(row, true, true);
-					});
-				
-					this._rowSelectionChanged();
+					rowMatch = this.table.rowManager.rows;
 					break;
 				
 				case "string":
 					rowMatch = this.table.rowManager.findRow(rows);
 				
-					if(rowMatch){
-						this._selectRow(rowMatch, true, true);
-						this._rowSelectionChanged();
-					}else {
+					if(!rowMatch){
 						rowMatch = this.table.rowManager.getRows(rows);
-						
-						rowMatch.forEach((row) => {
-							this._selectRow(row, true, true);
-						});
-
-						if(rowMatch.length){
-							this._rowSelectionChanged();
-						}
 					}
 					break;
 				
 				default:
-					if(Array.isArray(rows)){
-						rows.forEach((row) => {
-							this._selectRow(row, true, true);
-						});
-					
-						this._rowSelectionChanged();
-					}else {
-						this._selectRow(rows, false, true);
-					}
+					rowMatch = rows;
 					break;
 			}
+
+			if(Array.isArray(rowMatch)){
+				if(rowMatch.length){
+					rowMatch.forEach((row) => {
+						change = this._selectRow(row, true, true);
+
+						if(change){
+							changes.push(change);
+						}
+					});
+
+					this._rowSelectionChanged(false, changes);
+				}
+			}else {
+				if(rowMatch){
+					this._selectRow(rowMatch, false, true);
+				}
+			}	
 		}
 		
 		//select an individual row
@@ -24575,7 +24813,9 @@
 					
 					this.dispatchExternal("rowSelected", row.getComponent());
 					
-					this._rowSelectionChanged(silent);
+					this._rowSelectionChanged(silent, row);
+
+					return row;
 				}
 			}else {
 				if(!silent){
@@ -24590,39 +24830,51 @@
 		
 		//deselect a number of rows
 		deselectRows(rows, silent){
-			var self = this,
-			rowCount;
+			var changes = [], 
+			rowMatch, change;
 			
-			if(typeof rows == "undefined"){
+			switch(typeof rows){
+				case "undefined":
+					rowMatch = Object.assign([], this.selectedRows);
+					break;
 				
-				rowCount = self.selectedRows.length;
+				case "string":
+					rowMatch = this.table.rowManager.findRow(rows);
 				
-				for(let i = 0; i < rowCount; i++){
-					self._deselectRow(self.selectedRows[0], true);
-				}
+					if(!rowMatch){
+						rowMatch = this.table.rowManager.getRows(rows);
+					}
+					break;
 				
-				if(rowCount){
-					self._rowSelectionChanged(silent);
+				default:
+					rowMatch = rows;
+					break;
+			}
+
+			if(Array.isArray(rowMatch)){
+				if(rowMatch.length){
+					rowMatch.forEach((row) => {
+						change = this._deselectRow(row, true, true);
+
+						if(change){
+							changes.push(change);
+						}
+					});
+
+					this._rowSelectionChanged(silent, [], changes);
 				}
-				
 			}else {
-				if(Array.isArray(rows)){
-					rows.forEach(function(row){
-						self._deselectRow(row, true);
-					});
-					
-					self._rowSelectionChanged(silent);
-				}else {
-					self._deselectRow(rows, silent);
+				if(rowMatch){
+					this._deselectRow(rowMatch, silent, true);
 				}
-			}
+			}	
 		}
 		
 		//deselect an individual row
 		_deselectRow(rowInfo, silent){
 			var self = this,
 			row = self.table.rowManager.findRow(rowInfo),
-			index;
+			index, element;
 			
 			if(row){
 				index = self.selectedRows.findIndex(function(selectedRow){
@@ -24630,8 +24882,13 @@
 				});
 				
 				if(index > -1){
+
+					element = row.getElement();
+					
+					if(element){
+						element.classList.remove("tabulator-selected");
+					}
 					
-					row.getElement().classList.remove("tabulator-selected");
 					if(!row.modules.select){
 						row.modules.select = {};
 					}
@@ -24648,7 +24905,9 @@
 					
 					this.dispatchExternal("rowDeselected", row.getComponent());
 					
-					self._rowSelectionChanged(silent);
+					self._rowSelectionChanged(silent, undefined, row);
+
+					return row;
 				}
 			}else {
 				if(!silent){
@@ -24668,7 +24927,6 @@
 		}
 		
 		getSelectedRows(){
-			
 			var rows = [];
 			
 			this.selectedRows.forEach(function(row){
@@ -24678,7 +24936,7 @@
 			return rows;
 		}
 		
-		_rowSelectionChanged(silent){
+		_rowSelectionChanged(silent, selected = [], deselected = []){
 			if(this.headerCheckboxElement){
 				if(this.selectedRows.length === 0){
 					this.headerCheckboxElement.checked = false;
@@ -24693,7 +24951,19 @@
 			}
 			
 			if(!silent){
-				this.dispatchExternal("rowSelectionChanged", this.getSelectedData(), this.getSelectedRows());
+				if(!Array.isArray(selected)){
+					selected = [selected];
+				}
+
+				selected = selected.map(row => row.getComponent());
+
+				if(!Array.isArray(deselected)){
+					deselected = [deselected];
+				}
+
+				deselected = deselected.map(row => row.getComponent());
+
+				this.dispatchExternal("rowSelectionChanged", this.getSelectedData(), this.getSelectedRows(), selected, deselected);
 			}
 		}