tabulator-tables 5.4.4 → 5.5.0

package/dist/js/tabulator_esm.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.4.4 (c) Oliver Folkerd 2023 */
+/* Tabulator v5.5.0 (c) Oliver Folkerd 2023 */
 class CoreFeature{
 
 	constructor(table){
@@ -1505,10 +1505,12 @@ class CellComponent {
 		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();
 	}
@@ -1938,8 +1940,8 @@ class ColumnComponent {
 		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(){
@@ -3008,8 +3010,8 @@ class RowComponent {
 		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){
@@ -3586,6 +3588,13 @@ var defaultCalculations = {
 
 		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{
@@ -4460,7 +4469,7 @@ class DataTree extends Module{
 
 				row.create();
 
-				config = row.modules.dataTree.children;
+				config = row.modules.dataTree;
 
 				if(!config.index && config.children !== false){
 					children = this.getChildren(row);
@@ -4971,8 +4980,11 @@ function xlsx(list, options, setFileContents){
 	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 = {};
 
@@ -5058,7 +5070,7 @@ function xlsx(list, options, setFileContents){
 		return buf;
 	}
 
-	output = XLSX.write(workbook, {bookType:'xlsx', bookSST:true, type: 'binary', compression });
+	output = XLSX.write(workbook, writeOptions);
 
 	setFileContents(s2ab(output), "application/octet-stream");
 }
@@ -5356,7 +5368,7 @@ function input(cell, onRendered, success, cancel, editorParams){
 	input.value = typeof cellValue !== "undefined" ? cellValue : "";
 
 	onRendered(function(){
-		if(cell._getSelf){
+		if(cell.getType() === "cell"){
 			input.focus({preventScroll: true});
 			input.style.height = "100%";
 
@@ -5437,7 +5449,7 @@ function textarea(cell, onRendered, success, cancel, editorParams){
 	input.value = value;
 
 	onRendered(function(){
-		if(cell._getSelf){
+		if(cell.getType() === "cell"){
 			input.focus({preventScroll: true});
 			input.style.height = "100%";
 
@@ -5571,7 +5583,7 @@ function number(cell, onRendered, success, cancel, editorParams){
 	};
 
 	onRendered(function () {
-		if(cell._getSelf){
+		if(cell.getType() === "cell"){
 			//submit new value on blur
 			input.removeEventListener("blur", blurFunc);
 
@@ -5675,7 +5687,7 @@ function range(cell, onRendered, success, cancel, editorParams){
 	input.value = cellValue;
 	
 	onRendered(function () {
-		if(cell._getSelf){
+		if(cell.getType() === "cell"){
 			input.focus({preventScroll: true});
 			input.style.height = "100%";
 		}
@@ -5780,7 +5792,7 @@ function date(cell, onRendered, success, cancel, editorParams){
 	input.value = cellValue;
 	
 	onRendered(function(){
-		if(cell._getSelf){
+		if(cell.getType() === "cell"){
 			input.focus({preventScroll: true});
 			input.style.height = "100%";
 			
@@ -5907,7 +5919,7 @@ function time(cell, onRendered, success, cancel, editorParams){
 	input.value = cellValue;
 	
 	onRendered(function(){
-		if(cell._getSelf){
+		if(cell.getType() == "cell"){
 			input.focus({preventScroll: true});
 			input.style.height = "100%";
 			
@@ -6033,7 +6045,7 @@ function datetime(cell, onRendered, success, cancel, editorParams){
 	input.value = cellValue;
 	
 	onRendered(function(){
-		if(cell._getSelf){
+		if(cell.getType() === "cell"){
 			input.focus({preventScroll: true});
 			input.style.height = "100%";
 			
@@ -6128,7 +6140,7 @@ class Edit{
 		
 		this.initialValues = null; 
 		
-		this.isFilter = !cell._getSelf;
+		this.isFilter = cell.getType() === "header";
 		
 		this.filterTimeout = null;
 		this.filtered = false;
@@ -6194,7 +6206,7 @@ class Edit{
 		function clickStop(e){
 			e.stopPropagation();
 		}	
-	
+		
 		if(!this.isFilter){
 			this.input.style.height = "100%";
 			this.input.focus({preventScroll: true});
@@ -6418,6 +6430,7 @@ class Edit{
 				break;
 			
 			case 9: //tab
+				this._keyTab(e);
 				break;
 			
 			default:
@@ -6464,6 +6477,16 @@ class Edit{
 	//////// 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);
 		
@@ -7101,7 +7124,7 @@ class Edit{
 	
 	_resolveValue(blur){
 		var output, initialValue;
-
+		
 		if(this.popup){
 			this.popup.hide(true);
 		}
@@ -7481,7 +7504,7 @@ function tickCross(cell, onRendered, success, cancel, editorParams){
 	
 	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});
 			}
 		});
@@ -8070,8 +8093,8 @@ class Edit$1 extends Module{
 			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"){
@@ -8080,7 +8103,6 @@ class Edit$1 extends Module{
 			}
 			
 			if(cellEl.offsetLeft < leftEdge){
-				
 				this.table.rowManager.element.scrollLeft -= (leftEdge - cellEl.offsetLeft);
 			}else {
 				if(cellEl.offsetLeft + cellEl.offsetWidth  > rightEdge){
@@ -8788,6 +8810,9 @@ class Export extends Module{
 					getElement:function(){
 						return cellEl;
 					},
+					getType:function(){
+						return "cell";
+					},
 					getColumn:function(){
 						return column.getComponent();
 					},
@@ -9048,6 +9073,7 @@ class Filter extends Module{
 		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");
@@ -9083,6 +9109,7 @@ class Filter extends Module{
 		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));
@@ -9118,6 +9145,12 @@ class Filter extends Module{
 		return params;
 	}
 
+	generatePlaceholder(text){
+		if(this.table.options.placeholderHeaderFilter && Object.keys(this.headerFilters).length){
+			return this.table.options.placeholderHeaderFilter;
+		}
+	}
+
 	///////////////////////////////////
 	///////// Table Functions /////////
 	///////////////////////////////////
@@ -9401,6 +9434,9 @@ class Filter extends Module{
 					getTable:() => {
 						return this.table;
 					},
+					getType:() => {
+						return "header";
+					},
 					getRow:function(){
 						return {
 							normalizeHeight:function(){
@@ -9932,7 +9968,7 @@ function textarea$1(cell, formatterParams, onRendered){
 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 || ",";
@@ -9964,7 +10000,14 @@ function money(cell, formatterParams, onRendered){
 		}
 	}
 
-	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){
@@ -10670,6 +10713,9 @@ class Format extends Module{
 				getElement:function(){
 					return el;
 				},
+				getType:function(){
+					return "header";
+				},
 				getColumn:function(){
 					return column.getComponent();
 				},
@@ -11041,7 +11087,7 @@ class FrozenColumns extends Module{
 	layoutElement(element, column){
 		var position;
 		
-		if(column.modules.frozen){
+		if(column.modules.frozen && element){
 			element.style.position = "sticky";
 
 			if(this.table.rtl){
@@ -11305,6 +11351,10 @@ class GroupComponent {
 		this._group.toggleVisibility();
 	}
 
+	scrollTo(position, ifVisible){
+		return this._group.groupManager.table.rowManager.scrollToRow(this._group, position, ifVisible);
+	}
+
 	_getSelf(){
 		return this._group;
 	}
@@ -13338,8 +13388,20 @@ class Interaction extends Module{
 
 		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;
 
@@ -16295,6 +16357,7 @@ class Persistence extends Module{
 			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,
@@ -16345,6 +16408,7 @@ class Persistence extends Module{
 			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"));
@@ -16364,7 +16428,7 @@ class Persistence extends Module{
 	}
 
 	tableBuilt(){
-		var sorters, filters;
+		var sorters, filters, headerFilters;
 
 		if(this.config.sort){
 			sorters = this.load("sort");
@@ -16381,6 +16445,14 @@ class Persistence extends Module{
 				this.table.options.initialFilter = filters;
 			}
 		}
+		if(this.config.headerFilter){
+			headerFilters = this.load("headerFilter");
+
+			if(!headerFilters === false){
+				this.table.options.initialHeaderFilter = headerFilters;
+			}
+		}
+		
 	}
 
 	tableRedraw(force){
@@ -16541,6 +16613,10 @@ class Persistence extends Module{
 				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;
@@ -18273,6 +18349,9 @@ class ResponsiveLayout extends Module{
 						getData:function(){
 							return data;
 						},
+						getType:function(){
+							return "cell";
+						},
 						getElement:function(){
 							return document.createElement("div");
 						},
@@ -18537,7 +18616,7 @@ class SelectRow extends Module{
 	}
 
 	checkRowSelectability(row){
-		if(row.type === "row"){
+		if(row && row.type === "row"){
 			return this.table.options.selectableCheck.call(this.table, row.getComponent());
 		}
 
@@ -18557,48 +18636,44 @@ class SelectRow extends Module{
 	
 	//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
@@ -18636,7 +18711,9 @@ class SelectRow extends Module{
 				
 				this.dispatchExternal("rowSelected", row.getComponent());
 				
-				this._rowSelectionChanged(silent);
+				this._rowSelectionChanged(silent, row);
+
+				return row;
 			}
 		}else {
 			if(!silent){
@@ -18651,39 +18728,51 @@ class SelectRow extends Module{
 	
 	//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){
@@ -18691,8 +18780,13 @@ class SelectRow extends Module{
 			});
 			
 			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 = {};
 				}
@@ -18709,7 +18803,9 @@ class SelectRow extends Module{
 				
 				this.dispatchExternal("rowDeselected", row.getComponent());
 				
-				self._rowSelectionChanged(silent);
+				self._rowSelectionChanged(silent, undefined, row);
+
+				return row;
 			}
 		}else {
 			if(!silent){
@@ -18729,7 +18825,6 @@ class SelectRow extends Module{
 	}
 	
 	getSelectedRows(){
-		
 		var rows = [];
 		
 		this.selectedRows.forEach(function(row){
@@ -18739,7 +18834,7 @@ class SelectRow extends Module{
 		return rows;
 	}
 	
-	_rowSelectionChanged(silent){
+	_rowSelectionChanged(silent, selected = [], deselected = []){
 		if(this.headerCheckboxElement){
 			if(this.selectedRows.length === 0){
 				this.headerCheckboxElement.checked = false;
@@ -18754,7 +18849,19 @@ class SelectRow extends Module{
 		}
 		
 		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);
 		}
 	}
 	
@@ -20444,9 +20551,14 @@ class BasicHorizontal extends Renderer{
 		super(table);
 	}
 
-	renderRowCells(row){
+	renderRowCells(row) {
+		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();
 		});
 	}
@@ -20631,8 +20743,13 @@ class VirtualDomHorizontal extends Renderer{
 		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();
 			});
 		}
@@ -21067,6 +21184,8 @@ class ColumnManager extends CoreFeature {
 		
 		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));
@@ -21158,6 +21277,19 @@ class ColumnManager extends CoreFeature {
 		
 		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){
@@ -21784,19 +21916,22 @@ class BasicVertical extends Renderer{
 		element.style.visibility = "";
 	}
 
-	renderRows(){
+	renderRows() {
 		var element = this.tableElement,
-		onlyGroupHeaders = true;
+		onlyGroupHeaders = true,
+		tableFrag = document.createDocumentFragment();
 
 		this.rows().forEach((row, index) => {
 			this.styleRow(row, index);
-			element.appendChild(row.getElement());
 			row.initialize(true);
 
-			if(row.type !== "group"){
+			if (row.type !== "group") {
 				onlyGroupHeaders = false;
 			}
+
+			tableFrag.appendChild(row.getElement());
 		});
+		element.appendChild(tableFrag);
 
 		if(onlyGroupHeaders){
 			element.style.minWidth = this.table.columnManager.getWidth() + "px";
@@ -21877,7 +22012,6 @@ class VirtualDomVertical extends Renderer{
 
 		element.style.paddingTop = "";
 		element.style.paddingBottom = "";
-		// element.style.minWidth = "";
 		element.style.minHeight = "";
 		element.style.display = "";
 		element.style.visibility = "";
@@ -22056,17 +22190,27 @@ class VirtualDomVertical extends Renderer{
 	//////////////////////////////////////
 
 	//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;
 
@@ -22094,44 +22238,89 @@ class VirtualDomVertical extends Renderer{
 
 		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;
-
-				this.styleRow(row, index);
+			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;
+			}
 
-				element.appendChild(row.getElement());
+			while(((rowsToRender == rowsCount || rowsHeight <= containerHeight + this.vDomWindowBuffer) || totalRowsRendered < this.vDomWindowMinTotalRows) && this.vDomBottom < rowsCount -1) {
+				renderedRows = [];
+				rowFragment = document.createDocumentFragment();
 
-				row.initialize();
+				i = 0;
+				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();
+					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;
 				}
+				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) => {
+					if(!row.heightInitialized) {
+						row.calcHeight(true);
+						
+					}
+				});
 
-				this.vDomBottom ++;
-				i++;
+				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;
@@ -22139,9 +22328,9 @@ class VirtualDomVertical extends Renderer{
 				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);
@@ -22444,7 +22633,7 @@ class RowManager extends CoreFeature{
 		
 		this.dataPipeline = []; //hold data pipeline tasks
 		this.displayPipeline = []; //hold data display pipeline tasks
-
+		
 		this.scrollbarWidth = 0;
 		
 		this.renderer = null;
@@ -22473,12 +22662,18 @@ class RowManager extends CoreFeature{
 	
 	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");
@@ -22494,10 +22689,10 @@ class RowManager extends CoreFeature{
 				this.placeholderContents = placeholder;
 			}else {
 				console.warn("Invalid placeholder provided, must be string or HTML Element", placeholder);
-
+				
 				this.el = null;
 			}
-
+			
 			this.placeholder = el;
 		}
 	}
@@ -22658,15 +22853,15 @@ class RowManager extends CoreFeature{
 		this.destroy();
 		
 		this.adjustTableSize();
-
+		
 		this.dispatch("rows-wiped");
 	}
-
+	
 	destroy(){
 		this.rows.forEach((row) => {
 			row.wipe();
 		});
-
+		
 		this.rows = [];
 		this.activeRows = [];
 		this.activeRowsPipeline = [];
@@ -22739,7 +22934,7 @@ class RowManager extends CoreFeature{
 				rows.push(row);
 				this.dispatch("row-added", row, item, pos, index);
 			});
-
+			
 			this.refreshActiveData(refreshDisplayOnly ? "displayPipeline" : false, false, true);
 			
 			this.regenerateRowPositions();
@@ -23127,28 +23322,28 @@ class RowManager extends CoreFeature{
 			
 				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();
 		}
@@ -23184,7 +23379,7 @@ class RowManager extends CoreFeature{
 	//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;
 		}
@@ -23219,7 +23414,7 @@ class RowManager extends CoreFeature{
 	//return only actual rows (not group headers etc)
 	getRows(type){
 		var rows = [];
-
+		
 		switch(type){
 			case "active":
 				rows = this.activeRows;
@@ -23228,11 +23423,11 @@ class RowManager extends CoreFeature{
 			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;
 		}
@@ -23253,25 +23448,25 @@ class RowManager extends CoreFeature{
 			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);
@@ -23324,7 +23519,7 @@ class RowManager extends CoreFeature{
 			
 			if(this.firstRender){
 				this.firstRender = false;
-
+				
 				if(!this.fixedHeight){
 					this.adjustTableSize();
 				}
@@ -23344,7 +23539,7 @@ class RowManager extends CoreFeature{
 		if(!this.displayRowsCount){
 			this._showPlaceholder();
 		}
-
+		
 		this.scrollBarCheck();
 		
 		this.dispatchExternal("renderComplete");
@@ -23369,7 +23564,7 @@ class RowManager extends CoreFeature{
 		
 		this.renderer.clearRows();
 	}
-
+	
 	tableEmpty(){
 		this.renderEmptyScroll();
 		this._showPlaceholder();
@@ -23377,6 +23572,12 @@ class RowManager extends CoreFeature{
 	
 	_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);
@@ -23388,7 +23589,7 @@ class RowManager extends CoreFeature{
 		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 = "";
@@ -23423,7 +23624,8 @@ class RowManager extends CoreFeature{
 	
 	//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));
@@ -23431,12 +23633,14 @@ class RowManager extends CoreFeature{
 			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;
 			}
 			
@@ -23444,17 +23648,19 @@ class RowManager extends CoreFeature{
 			
 			//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
@@ -23489,15 +23695,14 @@ class RowManager extends CoreFeature{
 	
 	//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();
 		}