tabulator-tables 5.1.0 → 5.1.1

package/dist/js/tabulator_esm.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.1.0 (c) Oliver Folkerd 2022 */
+/* Tabulator v5.1.1 (c) Oliver Folkerd 2022 */
 class CoreFeature{
 
 	constructor(table){
@@ -1653,7 +1653,7 @@ var defaultColumnOptions = {
 	"editableTitle": undefined,
 };
 
-class Column$1 extends CoreFeature{
+class Column extends CoreFeature{
 
 	constructor(def, parent){
 		super(parent.table);
@@ -1707,7 +1707,7 @@ class Column$1 extends CoreFeature{
 			this.isGroup = true;
 
 			this.definition.columns.forEach((def, i) => {
-				var newCol = new Column$1(def, this);
+				var newCol = new Column(def, this);
 				this.attachColumn(newCol);
 			});
 
@@ -1751,12 +1751,12 @@ class Column$1 extends CoreFeature{
 			}
 		}
 
-		this.definition = this.table.columnManager.optionsList.generate(Column$1.defaultOptionList, this.definition);
+		this.definition = this.table.columnManager.optionsList.generate(Column.defaultOptionList, this.definition);
 	}
 
 	checkDefinition(){
 		Object.keys(this.definition).forEach((key) => {
-			if(Column$1.defaultOptionList.indexOf(key) === -1){
+			if(Column.defaultOptionList.indexOf(key) === -1){
 				console.warn("Invalid column definition option in '" + (this.field || this.definition.title) + "' column:", key);
 			}
 		});
@@ -2680,7 +2680,7 @@ class Column$1 extends CoreFeature{
 	}
 }
 
-Column$1.defaultOptionList = defaultColumnOptions;
+Column.defaultOptionList = defaultColumnOptions;
 
 //public row object
 class RowComponent$1 {
@@ -3315,7 +3315,7 @@ class ColumnCalcs extends Module{
 	}
 
 	initialize(){
-		this.genColumn = new Column$1({field:"value"}, this);
+		this.genColumn = new Column({field:"value"}, this);
 
 		this.subscribe("cell-value-changed", this.cellValueChanged.bind(this));
 		this.subscribe("column-init", this.initializeColumnCheck.bind(this));
@@ -3604,12 +3604,12 @@ class ColumnCalcs extends Module{
 
 	rowsToData(rows){
 		var data = [];
-
+		
 		rows.forEach((row) => {
 			data.push(row.getData());
 
 			if(this.table.options.dataTree && this.table.options.dataTreeChildColumnCalcs){
-				if(row.modules.dataTree.open){
+				if(row.modules.dataTree && row.modules.dataTree.open){
 					var children = this.rowsToData(this.table.modules.dataTree.getFilteredTreeChildren(row));
 					data = data.concat(children);
 				}
@@ -4358,7 +4358,6 @@ class DataTree extends Module{
 	}
 
 	redrawNeeded(data){
-		console.log("needed?", data);
 		return (this.field ? typeof data[this.field] !== "undefined" : false) || (this.elementField ? typeof data[this.elementField] !== "undefined" : false);
 	}
 }
@@ -6757,7 +6756,7 @@ class Edit extends Module{
 		this.subscribe("column-layout", this.initializeColumnCheck.bind(this));
 		this.subscribe("column-delete", this.columnDeleteCheck.bind(this));
 		this.subscribe("row-deleting", this.rowDeleteCheck.bind(this));
-		this.subscribe("data-refeshing", this.cancelEdit.bind(this));
+		this.subscribe("data-refreshing", this.cancelEdit.bind(this));
 
 		this.subscribe("keybinding-nav-prev", this.navigatePrev.bind(this, undefined));
 		this.subscribe("keybinding-nav-next", this.keybindingNavigateNext.bind(this));
@@ -6779,7 +6778,7 @@ class Edit extends Module{
 		if(cell){
 			if(!this.navigateNext(cell, e)){
 				if(newRow){
-					// cell.getElement().firstChild.blur();
+					cell.getElement().firstChild.blur();
 
 					if(newRow === true){
 						newRow = this.table.addRow({});
@@ -10267,7 +10266,7 @@ class GroupComponent {
 				if (typeof target[name] !== "undefined") {
 					return target[name];
 				}else {
-					return target._group.table.componentFunctionBinder.handle("row", target._group, name)
+					return target._group.groupManager.table.componentFunctionBinder.handle("row", target._group, name)
 				}
 			}
 		})
@@ -12087,9 +12086,7 @@ class Import extends Module{
 
     structureData(parsedData){
         var data = [];
-
-        console.log("structure", parsedData);
-
+        
         if(Array.isArray(parsedData) && parsedData.length && Array.isArray(parsedData[0])){
             if(this.table.options.autoColumns){
                 data = this.structureArrayToObject(parsedData);
@@ -12449,7 +12446,7 @@ class Interaction extends Module{
 
 			if(component instanceof Cell){
 				callback = component.column.definition[action];
-			}else if(component instanceof Column$1){
+			}else if(component instanceof Column){
 				callback = component.definition[action];
 			}
 
@@ -15095,9 +15092,11 @@ class Page extends Module{
 					margin = this.table.options.progressiveLoadScrollMargin || (this.table.rowManager.element.clientHeight * 2);
 					
 					if(this.table.rowManager.element.scrollHeight <= (this.table.rowManager.element.clientHeight + margin)){
-						setTimeout(() => {
-							this.nextPage();
-						});
+						if(this.page < this.max){
+							setTimeout(() => {
+								this.nextPage();
+							});
+						}
 					}
 					break;
 				}
@@ -16577,14 +16576,14 @@ class ResponsiveLayout extends Module{
 		this.hiddenColumns = [];
 
 		//determine level of responsivity for each column
-		this.table.columnManager.columnsByIndex.forEach(function(column, i){
+		this.table.columnManager.columnsByIndex.forEach((column, i) => {
 			if(column.modules.responsive){
 				if(column.modules.responsive.order && column.modules.responsive.visible){
 					column.modules.responsive.index = i;
 					columns.push(column);
 
-					if(!column.visible && self.mode === "collapse"){
-						self.hiddenColumns.push(column);
+					if(!column.visible && this.mode === "collapse"){
+						this.hiddenColumns.push(column);
 					}
 				}
 			}
@@ -16592,7 +16591,7 @@ class ResponsiveLayout extends Module{
 
 		//sort list by responsivity
 		columns = columns.reverse();
-		columns = columns.sort(function(a, b){
+		columns = columns.sort((a, b) => {
 			var diff = b.modules.responsive.order - a.modules.responsive.order;
 			return diff || (b.modules.responsive.index - a.modules.responsive.index);
 		});
@@ -16898,7 +16897,7 @@ class SelectRow extends Module{
 			this.subscribe("rows-retrieve", this.rowRetrieve.bind(this));
 
 			if(this.table.options.selectable && !this.table.options.selectablePersistence){
-				this.subscribe("data-refeshing", this.deselectRows.bind(this));
+				this.subscribe("data-refreshing", this.deselectRows.bind(this));
 			}
 		}
 	}
@@ -19429,7 +19428,7 @@ class ColumnManager extends CoreFeature {
 	}
 
 	_addColumn(definition, before, nextToColumn){
-		var column = new Column$1(definition, this),
+		var column = new Column(definition, this),
 		colEl = column.getElement(),
 		index = nextToColumn ? this.findColumnIndex(nextToColumn) : nextToColumn;
 
@@ -19505,7 +19504,7 @@ class ColumnManager extends CoreFeature {
 	findColumn(subject){
 		if(typeof subject == "object"){
 
-			if(subject instanceof Column$1){
+			if(subject instanceof Column){
 				//subject is column element
 				return subject;
 			}else if(subject instanceof ColumnComponent){
@@ -20522,72 +20521,91 @@ class VirtualDomVertical extends Renderer{
 }
 
 class RowManager extends CoreFeature{
-
+	
 	constructor(table){
 		super(table);
-
+		
 		this.element = this.createHolderElement(); //containing element
 		this.tableElement = this.createTableElement(); //table element
 		this.heightFixer = this.createTableElement(); //table element
-
+		this.placeholder = null; //placeholder element
+		this.placeholderContents = null; //placeholder element
+		
 		this.firstRender = false; //handle first render
 		this.renderMode = "virtual"; //current rendering mode
 		this.fixedHeight = false; //current rendering mode
-
+		
 		this.rows = []; //hold row data objects
 		this.activeRowsPipeline = []; //hold calculation of active rows
 		this.activeRows = []; //rows currently available to on display in the table
 		this.activeRowsCount = 0; //count of active rows
-
+		
 		this.displayRows = []; //rows currently on display in the table
 		this.displayRowsCount = 0; //count of display rows
-
+		
 		this.scrollTop = 0;
 		this.scrollLeft = 0;
-
+		
 		this.rowNumColumn = false; //hold column component for row number column
-
+		
 		this.redrawBlock = false; //prevent redraws to allow multiple data manipulations before continuing
 		this.redrawBlockRestoreConfig = false; //store latest redraw function calls for when redraw is needed
 		this.redrawBlockRenderInPosition = false; //store latest redraw function calls for when redraw is needed
-
+		
 		this.dataPipeline = []; //hold data pipeline tasks
 		this.displayPipeline = []; //hold data display pipeline tasks
-
+		
 		this.renderer = null;
 	}
-
+	
 	//////////////// Setup Functions /////////////////
-
+	
 	createHolderElement (){
 		var el = document.createElement("div");
-
+		
 		el.classList.add("tabulator-tableholder");
 		el.setAttribute("tabindex", 0);
 		el.setAttribute("role", "rowgroup");
-
+		
 		return el;
 	}
-
+	
 	createTableElement (){
 		var el = document.createElement("div");
-
+		
 		el.classList.add("tabulator-table");
 		el.setAttribute("role", "rowgroup");
-
+		
 		return el;
 	}
-
+	
+	initializePlaceholder(){
+		//configure placeholder element
+		if(typeof this.table.options.placeholder == "string"){
+			let el = document.createElement("div");
+			el.classList.add("tabulator-placeholder");
+			
+			let contents = document.createElement("div");
+			contents.classList.add("tabulator-placeholder-contents");
+			contents.innerHTML = this.table.options.placeholder;
+			
+			el.appendChild(contents);
+			
+			this.placeholderContents = contents;
+			this.placeholder = el;
+		}
+	}
+	
 	//return containing element
 	getElement(){
 		return this.element;
 	}
-
+	
 	//return table element
 	getTableElement(){
 		return this.tableElement;
 	}
-
+	
 	//return position of row in table
 	getRowPosition(row, active){
 		if(active){
@@ -20596,42 +20614,45 @@ class RowManager extends CoreFeature{
 			return this.rows.indexOf(row);
 		}
 	}
-
+	
 	initialize(){
+		this.initializePlaceholder();
 		this.initializeRenderer();
-
+		
 		//initialize manager
 		this.element.appendChild(this.tableElement);
-
+		
 		this.firstRender = true;
-
+		
 		//scroll header along with table body
 		this.element.addEventListener("scroll", () => {
 			var left = this.element.scrollLeft,
 			leftDir = this.scrollLeft > left,
 			top = this.element.scrollTop,
 			topDir = this.scrollTop > top;
-
+			
 			//handle horizontal scrolling
 			if(this.scrollLeft != left){
 				this.scrollLeft = left;
-
+				
 				this.dispatch("scroll-horizontal", left, leftDir);
 				this.dispatchExternal("scrollHorizontal", left, leftDir);
-			}
 
-			//handle verical scrolling
+				this._positionPlaceholder();
+			}
+			
+			//handle vertical scrolling
 			if(this.scrollTop != top){
 				this.scrollTop = top;
-
+				
 				this.renderer.scrollRows(top, topDir);
-
+				
 				this.dispatch("scroll-vertical", top, topDir);
 				this.dispatchExternal("scrollVertical", top, topDir);
 			}
 		});
 	}
-
+	
 	////////////////// Row Manipulation //////////////////
 	findRow(subject){
 		if(typeof subject == "object"){
@@ -20646,7 +20667,7 @@ class RowManager extends CoreFeature{
 				let match = this.rows.find((row) => {
 					return row.getElement() === subject;
 				});
-
+				
 				return match || false;
 			}
 		}else if(typeof subject == "undefined" || subject === null){
@@ -20656,22 +20677,22 @@ class RowManager extends CoreFeature{
 			let match = this.rows.find((row) => {
 				return row.data[this.table.options.index] == subject;
 			});
-
+			
 			return match || false;
 		}
-
+		
 		//catch all for any other type of input
 		return false;
 	}
-
+	
 	getRowFromDataObject(data){
 		var match = this.rows.find((row) => {
 			return row.data === data;
 		});
-
+		
 		return match || false;
 	}
-
+	
 	getRowFromPosition(position, active){
 		if(active){
 			return this.activeRows[position];
@@ -20679,11 +20700,11 @@ class RowManager extends CoreFeature{
 			return this.rows[position];
 		}
 	}
-
+	
 	scrollToRow(row, position, ifVisible){
 		return this.renderer.scrollToRowPosition(row, position, ifVisible);
 	}
-
+	
 	////////////////// Data Handling //////////////////
 	setData(data, renderInPosition, columnsChanged){
 		return new Promise((resolve, reject)=>{
@@ -20700,22 +20721,22 @@ class RowManager extends CoreFeature{
 					this.table.columnManager.generateColumnsFromRowData(data);
 				}
 				this.resetScroll();
-
+				
 				this._setDataActual(data);
 			}
-
+			
 			resolve();
 		});
 	}
-
+	
 	_setDataActual(data, renderInPosition){
 		this.dispatchExternal("dataProcessing", data);
-
+		
 		this._wipeElements();
-
+		
 		if(Array.isArray(data)){
 			this.dispatch("data-processing", data);
-
+			
 			data.forEach((def, i) => {
 				if(def && typeof def === "object"){
 					var row = new Row(def, this);
@@ -20724,260 +20745,257 @@ class RowManager extends CoreFeature{
 					console.warn("Data Loading Warning - Invalid row data detected and ignored, expecting object but received:", def);
 				}
 			});
-
+			
 			this.refreshActiveData(false, false, renderInPosition);
-
+			
 			this.dispatch("data-processed", data);
 			this.dispatchExternal("dataProcessed", data);
 		}else {
 			console.error("Data Loading Error - Unable to process data due to invalid data type \nExpecting: array \nReceived: ", typeof data, "\nData:     ", data);
 		}
 	}
-
+	
 	_wipeElements(){
 		this.dispatch("rows-wipe");
-
+		
 		this.rows.forEach((row) => {
 			row.wipe();
 		});
-
+		
 		this.rows = [];
 		this.activeRows = [];
 		this.activeRowsPipeline = [];
 		this.activeRowsCount = 0;
 		this.displayRows = [];
 		this.displayRowsCount = 0;
-
+		
 		this.adjustTableSize();
 	}
-
+	
 	deleteRow(row, blockRedraw){
 		var allIndex = this.rows.indexOf(row),
 		activeIndex = this.activeRows.indexOf(row);
-
+		
 		if(activeIndex > -1){
 			this.activeRows.splice(activeIndex, 1);
 		}
-
+		
 		if(allIndex > -1){
 			this.rows.splice(allIndex, 1);
 		}
-
+		
 		this.setActiveRows(this.activeRows);
-
+		
 		this.displayRowIterator((rows) => {
 			var displayIndex = rows.indexOf(row);
-
+			
 			if(displayIndex > -1){
 				rows.splice(displayIndex, 1);
 			}
 		});
-
+		
 		if(!blockRedraw){
 			this.reRenderInPosition();
 		}
-
+		
 		this.regenerateRowNumbers();
-
+		
 		this.dispatchExternal("rowDeleted", row.getComponent());
-
+		
 		if(!this.displayRowsCount){
 			this._showPlaceholder();
 		}
-
+		
 		if(this.subscribedExternal("dataChanged")){
 			this.dispatchExternal("dataChanged", this.getData());
 		}
 	}
-
+	
 	addRow(data, pos, index, blockRedraw){
 		var row = this.addRowActual(data, pos, index, blockRedraw);
-
-		this.dispatch("row-added", row, data, pos, index);
-
 		return row;
 	}
-
+	
 	//add multiple rows
 	addRows(data, pos, index){
 		var rows = [];
-
+		
 		return new Promise((resolve, reject) => {
 			pos = this.findAddRowPos(pos);
-
+			
 			if(!Array.isArray(data)){
 				data = [data];
 			}
-
+			
 			data.length - 1;
-
+			
 			if((typeof index == "undefined" && pos) || (typeof index !== "undefined" && !pos)){
 				data.reverse();
 			}
-
+			
 			data.forEach((item, i) => {
 				var row = this.addRow(item, pos, index, true);
 				rows.push(row);
 				this.dispatch("row-added", row, data, pos, index);
 			});
-
+			
 			this.refreshActiveData(false, false, true);
-
+			
 			this.regenerateRowNumbers();
-
+			
 			if(rows.length){
 				this._clearPlaceholder();
 			}
-
+			
 			resolve(rows);
 		});
 	}
-
+	
 	findAddRowPos(pos){
 		if(typeof pos === "undefined"){
 			pos = this.table.options.addRowPos;
 		}
-
+		
 		if(pos === "pos"){
 			pos = true;
 		}
-
+		
 		if(pos === "bottom"){
 			pos = false;
 		}
-
+		
 		return pos;
 	}
-
+	
 	addRowActual(data, pos, index, blockRedraw){
 		var row = data instanceof Row ? data : new Row(data || {}, this),
 		top = this.findAddRowPos(pos),
 		allIndex = -1,
 		activeIndex, chainResult;
-
+		
 		if(!index){
 			chainResult = this.chain("row-adding-position", [row, top], null, {index, top});
-
+			
 			index = chainResult.index;
 			top = chainResult.top;
 		}
-
+		
 		if(typeof index !== "undefined"){
 			index = this.findRow(index);
 		}
-
+		
 		index = this.chain("row-adding-index", [row, index, top], null, index);
-
+		
 		if(index){
 			allIndex = this.rows.indexOf(index);
 		}
-
+		
 		if(index && allIndex > -1){
 			activeIndex = this.activeRows.indexOf(index);
-
+			
 			this.displayRowIterator(function(rows){
 				var displayIndex = rows.indexOf(index);
-
+				
 				if(displayIndex > -1){
 					rows.splice((top ? displayIndex : displayIndex + 1), 0, row);
 				}
 			});
-
+			
 			if(activeIndex > -1){
 				this.activeRows.splice((top ? activeIndex : activeIndex + 1), 0, row);
 			}
-
+			
 			this.rows.splice((top ? allIndex : allIndex + 1), 0, row);
-
+			
 		}else {
-
+			
 			if(top){
-
+				
 				this.displayRowIterator(function(rows){
 					rows.unshift(row);
 				});
-
+				
 				this.activeRows.unshift(row);
 				this.rows.unshift(row);
 			}else {
 				this.displayRowIterator(function(rows){
 					rows.push(row);
 				});
-
+				
 				this.activeRows.push(row);
 				this.rows.push(row);
 			}
 		}
-
+		
 		this.setActiveRows(this.activeRows);
-
+		
 		this.dispatchExternal("rowAdded", row.getComponent());
-
+		
 		if(this.subscribedExternal("dataChanged")){
 			this.dispatchExternal("dataChanged", this.table.rowManager.getData());
 		}
-
+		
 		if(!blockRedraw){
 			this.reRenderInPosition();
 		}
-
+		
 		return row;
 	}
-
+	
 	moveRow(from, to, after){
 		this.dispatch("row-move", from, to, after);
-
+		
 		this.moveRowActual(from, to, after);
-
+		
 		this.regenerateRowNumbers();
-
+		
 		this.dispatch("row-moved", from, to, after);
 		this.dispatchExternal("rowMoved", from.getComponent());
 	}
-
+	
 	moveRowActual(from, to, after){
 		this.moveRowInArray(this.rows, from, to, after);
 		this.moveRowInArray(this.activeRows, from, to, after);
-
+		
 		this.displayRowIterator((rows) => {
 			this.moveRowInArray(rows, from, to, after);
 		});
-
+		
 		this.dispatch("row-moving", from, to, after);
 	}
-
+	
 	moveRowInArray(rows, from, to, after){
 		var	fromIndex, toIndex, start, end;
-
+		
 		if(from !== to){
-
+			
 			fromIndex = rows.indexOf(from);
-
+			
 			if (fromIndex > -1) {
-
+				
 				rows.splice(fromIndex, 1);
-
+				
 				toIndex = rows.indexOf(to);
-
+				
 				if (toIndex > -1) {
-
+					
 					if(after){
 						rows.splice(toIndex+1, 0, from);
 					}else {
 						rows.splice(toIndex, 0, from);
 					}
-
+					
 				}else {
 					rows.splice(fromIndex, 0, from);
 				}
 			}
-
+			
 			//restyle rows
 			if(rows === this.getDisplayRows()){
-
+				
 				start = fromIndex < toIndex ? fromIndex : toIndex;
 				end = toIndex > fromIndex ? toIndex : fromIndex +1;
-
+				
 				for(let i = start; i <= end; i++){
 					if(rows[i]){
 						this.styleRow(rows[i], i);
@@ -20986,104 +21004,104 @@ class RowManager extends CoreFeature{
 			}
 		}
 	}
-
+	
 	clearData(){
 		this.setData([]);
 	}
-
+	
 	getRowIndex(row){
 		return this.findRowIndex(row, this.rows);
 	}
-
+	
 	getDisplayRowIndex(row){
 		var index = this.getDisplayRows().indexOf(row);
 		return index > -1 ? index : false;
 	}
-
+	
 	nextDisplayRow(row, rowOnly){
 		var index = this.getDisplayRowIndex(row),
 		nextRow = false;
-
-
+		
+		
 		if(index !== false && index < this.displayRowsCount -1){
 			nextRow = this.getDisplayRows()[index+1];
 		}
-
+		
 		if(nextRow && (!(nextRow instanceof Row) || nextRow.type != "row")){
 			return this.nextDisplayRow(nextRow, rowOnly);
 		}
-
+		
 		return nextRow;
 	}
-
+	
 	prevDisplayRow(row, rowOnly){
 		var index = this.getDisplayRowIndex(row),
 		prevRow = false;
-
+		
 		if(index){
 			prevRow = this.getDisplayRows()[index-1];
 		}
-
+		
 		if(rowOnly && prevRow && (!(prevRow instanceof Row) || prevRow.type != "row")){
 			return this.prevDisplayRow(prevRow, rowOnly);
 		}
-
+		
 		return prevRow;
 	}
-
+	
 	findRowIndex(row, list){
 		var rowIndex;
-
+		
 		row = this.findRow(row);
-
+		
 		if(row){
 			rowIndex = list.indexOf(row);
-
+			
 			if(rowIndex > -1){
 				return rowIndex;
 			}
 		}
-
+		
 		return false;
 	}
-
+	
 	getData(active, transform){
 		var output = [],
 		rows = this.getRows(active);
-
+		
 		rows.forEach(function(row){
 			if(row.type == "row"){
 				output.push(row.getData(transform || "data"));
 			}
 		});
-
+		
 		return output;
 	}
-
+	
 	getComponents(active){
 		var	output = [],
 		rows = this.getRows(active);
-
+		
 		rows.forEach(function(row){
 			output.push(row.getComponent());
 		});
-
+		
 		return output;
 	}
-
+	
 	getDataCount(active){
 		var rows = this.getRows(active);
-
+		
 		return rows.length;
 	}
-
+	
 	scrollHorizontal(left){
 		this.scrollLeft = left;
 		this.element.scrollLeft = left;
-
+		
 		this.dispatch("scroll-horizontal", left);
 	}
-
+	
 	registerDataPipelineHandler(handler, priority){
 		if(typeof priority !== "undefined"){
 			this.dataPipeline.push({handler, priority});
@@ -21094,7 +21112,7 @@ class RowManager extends CoreFeature{
 			console.error("Data pipeline handlers must have a priority in order to be registered");
 		}
 	}
-
+	
 	registerDisplayPipelineHandler(handler, priority){
 		if(typeof priority !== "undefined"){
 			this.displayPipeline.push({handler, priority});
@@ -21105,23 +21123,23 @@ class RowManager extends CoreFeature{
 			console.error("Display pipeline handlers must have a priority in order to be registered");
 		}
 	}
-
+	
 	//set active data set
 	refreshActiveData(handler, skipStage, renderInPosition){
 		var table = this.table,
 		stage = "",
 		index = 0,
 		cascadeOrder = ["all", "dataPipeline", "display", "displayPipeline", "end"];
-
-
+		
+		
 		if(typeof handler === "function"){
 			index = this.dataPipeline.findIndex((item) => {
 				return item.handler === handler;
 			});
-
+			
 			if(index > -1){
 				stage = "dataPipeline";
-
+				
 				if(skipStage){
 					if(index == this.dataPipeline.length - 1){
 						stage = "display";
@@ -21133,10 +21151,10 @@ class RowManager extends CoreFeature{
 				index = this.displayPipeline.findIndex((item) => {
 					return item.handler === handler;
 				});
-
+				
 				if(index > -1){
 					stage = "displayPipeline";
-
+					
 					if(skipStage){
 						if(index == this.displayPipeline.length - 1){
 							stage = "end";
@@ -21153,7 +21171,7 @@ class RowManager extends CoreFeature{
 			stage = handler || "all";
 			index = 0;
 		}
-
+		
 		if(this.redrawBlock){
 			if(!this.redrawBlockRestoreConfig || (this.redrawBlockRestoreConfig && ((this.redrawBlockRestoreConfig.stage === stage && index < this.redrawBlockRestoreConfig.index) || (cascadeOrder.indexOf(stage) < cascadeOrder.indexOf(this.redrawBlockRestoreConfig.stage))))){
 				this.redrawBlockRestoreConfig = {
@@ -21164,102 +21182,107 @@ class RowManager extends CoreFeature{
 					index:index,
 				};
 			}
-
+			
 			return;
 		}else {
-			this.dispatch("data-refeshing");
-
-			if(!handler){
-				this.activeRowsPipeline[0] = this.rows.slice(0);
-			}
-
-			//cascade through data refresh stages
-			switch(stage){
-				case "all":
-				//handle case where alldata needs refreshing
-
-				case "dataPipeline":
-
-				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]);
-
-				this.regenerateRowNumbers();
-
-				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 to handle scenario when trying to skip past end stage
-			}
-
 			if(Helpers.elVisible(this.element)){
 				if(renderInPosition){
-					this.reRenderInPosition();
+					this.reRenderInPosition(this.refreshPipelines.bind(this, handler, stage, index, renderInPosition));
 				}else {
-
+					this.refreshPipelines(handler, stage, index, renderInPosition);
+					
 					if(!handler){
 						this.table.columnManager.renderer.renderColumns();
 					}
-
+					
 					this.renderTable();
-
+					
 					if(table.options.layoutColumnsOnNewData){
 						this.table.columnManager.redraw(true);
 					}
 				}
+			}else {
+				this.refreshPipelines(handler, stage, index, renderInPosition);
 			}
-
+			
 			this.dispatch("data-refreshed");
 		}
 	}
-
+	
+	refreshPipelines(handler, stage, index, renderInPosition){
+		this.dispatch("data-refreshing");
+		
+		if(!handler){
+			this.activeRowsPipeline[0] = this.rows.slice(0);
+		}
+		
+		//cascade through data refresh stages
+		switch(stage){
+			case "all":
+			//handle case where alldata needs refreshing
+			
+			case "dataPipeline":
+			
+			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]);
+			
+			this.regenerateRowNumbers();
+			
+			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 to handle scenario when trying to skip past end stage
+		}
+	}
+	
 	//regenerate row numbers for row number formatter if in use
 	regenerateRowNumbers(){
 		if(this.rowNumColumn){
 			this.activeRows.forEach((row) => {
 				var cell = row.getCell(this.rowNumColumn);
-
+				
 				if(cell){
 					cell._generateContents();
 				}
 			});
 		}
 	}
-
+	
 	setActiveRows(activeRows){
 		this.activeRows = activeRows;
 		this.activeRowsCount = this.activeRows.length;
 	}
-
+	
 	//reset display rows array
 	resetDisplayRows(){
 		this.displayRows = [];
-
+		
 		this.displayRows.push(this.activeRows.slice(0));
-
+		
 		this.displayRowsCount = this.displayRows[0].length;
 	}
-
+	
 	getNextDisplayIndex(){
 		return this.displayRows.length;
 	}
-
+	
 	//set display row pipeline data
 	setDisplayRows(displayRows, index){
-
+		
 		var output = true;
-
+		
 		if(index && typeof this.displayRows[index] != "undefined"){
 			this.displayRows[index] = displayRows;
 			output = true;
@@ -21267,14 +21290,14 @@ class RowManager extends CoreFeature{
 			this.displayRows.push(displayRows);
 			output = index = this.displayRows.length -1;
 		}
-
+		
 		if(index == this.displayRows.length -1){
 			this.displayRowsCount = this.displayRows[this.displayRows.length -1].length;
 		}
-
+		
 		return output;
 	}
-
+	
 	getDisplayRows(index){
 		if(typeof index == "undefined"){
 			return this.displayRows.length ? this.displayRows[this.displayRows.length -1] : [];
@@ -21282,49 +21305,49 @@ class RowManager extends CoreFeature{
 			return this.displayRows[index] || [];
 		}
 	}
-
+	
 	getVisibleRows(chain, viewable){
 		var rows =  Object.assign([], this.renderer.visibleRows(!viewable));
-
+		
 		if(chain){
 			rows = this.chain("rows-visible", [viewable], rows, rows);
 		}
-
+		
 		return rows;
 	}
-
+	
 	//repeat action accross display rows
 	displayRowIterator(callback){
 		this.activeRowsPipeline.forEach(callback);
 		this.displayRows.forEach(callback);
-
+		
 		this.displayRowsCount = this.displayRows[this.displayRows.length -1].length;
 	}
-
+	
 	//return only actual rows (not group headers etc)
 	getRows(type){
 		var rows;
-
+		
 		switch(type){
 			case "active":
 			rows = this.activeRows;
 			break;
-
+			
 			case "display":
 			rows = this.table.rowManager.getDisplayRows();
 			break;
-
+			
 			case "visible":
-			rows = this.getVisibleRows(true);
+			rows = this.getVisibleRows(false, true);
 			break;
-
+			
 			default:
 			rows = this.chain("rows-retrieve", type, null, this.rows) || this.rows;
 		}
-
+		
 		return rows;
 	}
-
+	
 	///////////////// Table Rendering /////////////////
 	//trigger rerender of table in current position
 	reRenderInPosition(callback){
@@ -21338,25 +21361,25 @@ class RowManager extends CoreFeature{
 			this.renderer.rerenderRows(callback);
 		}
 	}
-
+	
 	initializeRenderer(){
 		var renderClass;
-
+		
 		var renderers = {
 			"virtual": VirtualDomVertical,
 			"basic": BaiscVertical,
 		};
-
+		
 		if(typeof this.table.options.renderVertical === "string"){
 			renderClass = renderers[this.table.options.renderVertical];
 		}else {
 			renderClass = this.table.options.renderVertical;
 		}
-
+		
 		if(renderClass){
 			this.renderer = new renderClass(this.table, this.element, this.tableElement);
 			this.renderer.initialize();
-
+			
 			if((this.table.element.clientHeight || this.table.options.height)){
 				this.fixedHeight = true;
 			}else {
@@ -21366,21 +21389,21 @@ class RowManager extends CoreFeature{
 			console.error("Unable to find matching renderer:", table.options.renderVertical);
 		}
 	}
-
+	
 	getRenderMode(){
 		return this.renderMode;
 	}
-
+	
 	renderTable(){
 		this.dispatchExternal("renderStarted");
-
+		
 		this.element.scrollTop = 0;
-
+		
 		this._clearTable();
-
+		
 		if(this.displayRowsCount){
 			this.renderer.renderRows();
-
+			
 			if(this.firstRender){
 				this.firstRender = false;
 				this.layoutRefresh();
@@ -21388,23 +21411,23 @@ class RowManager extends CoreFeature{
 		}else {
 			this.renderEmptyScroll();
 		}
-
+		
 		if(!this.fixedHeight){
 			this.adjustTableSize();
 		}
-
+		
 		this.dispatch("table-layout");
-
+		
 		if(!this.displayRowsCount){
 			this._showPlaceholder();
 		}
-
+		
 		this.dispatchExternal("renderComplete");
 	}
-
+	
 	//show scrollbars on empty table div
 	renderEmptyScroll(){
-		if(this.table.options.placeholder){
+		if(this.placeholder){
 			this.tableElement.style.display = "none";
 		}else {
 			this.tableElement.style.minWidth = this.table.columnManager.getWidth() + "px";
@@ -21412,37 +21435,44 @@ class RowManager extends CoreFeature{
 			// this.tableElement.style.visibility = "hidden";
 		}
 	}
-
+	
 	_clearTable(){
 		var element = this.tableElement;
-
+		
 		this._clearPlaceholder();
-
+		
 		this.scrollTop = 0;
 		this.scrollLeft = 0;
-
+		
 		this.renderer.clearRows();
 	}
-
+	
 	_showPlaceholder(){
-		if(this.table.options.placeholder){
-
-			this.table.options.placeholder.setAttribute("tabulator-render-mode", this.renderMode);
-
-			this.getElement().appendChild(this.table.options.placeholder);
-			this.table.options.placeholder.style.width = this.table.columnManager.getWidth() + "px";
+		if(this.placeholder){
+			this.placeholder.setAttribute("tabulator-render-mode", this.renderMode);
+			
+			this.getElement().appendChild(this.placeholder);
+			this._positionPlaceholder();
 		}
 	}
-
+	
 	_clearPlaceholder(){
-		if(this.table.options.placeholder && this.table.options.placeholder.parentNode){
-			this.table.options.placeholder.parentNode.removeChild(this.table.options.placeholder);
+		if(this.placeholder && this.placeholder.parentNode){
+			this.placeholder.parentNode.removeChild(this.placeholder);
 		}
 	}
-
+	
+	_positionPlaceholder(){
+		if(this.placeholder && this.placeholder.parentNode){
+			this.placeholder.style.width = this.table.columnManager.getWidth() + "px";
+			this.placeholderContents.style.width = this.table.rowManager.element.clientWidth + "px";
+			this.placeholderContents.style.marginLeft = this.scrollLeft + "px";
+		}
+	}
+	
 	styleRow(row, index){
 		var rowEl = row.getElement();
-
+		
 		if(index % 2){
 			rowEl.classList.add("tabulator-row-even");
 			rowEl.classList.remove("tabulator-row-odd");
@@ -21451,21 +21481,21 @@ class RowManager extends CoreFeature{
 			rowEl.classList.remove("tabulator-row-even");
 		}
 	}
-
+	
 	//normalize height of active rows
 	normalizeHeight(){
 		this.activeRows.forEach(function(row){
 			row.normalizeHeight();
 		});
 	}
-
+	
 	//adjust the height of the table holder to fit in the Tabulator element
 	adjustTableSize(){
 		var initialHeight = this.element.clientHeight;
-
+		
 		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));
-
+			
 			if(this.fixedHeight){
 				this.element.style.minHeight = "calc(100% - " + otherHeight + "px)";
 				this.element.style.height = "calc(100% - " + otherHeight + "px)";
@@ -21475,9 +21505,9 @@ class RowManager extends CoreFeature{
 				this.element.style.height = (this.table.element.clientHeight - otherHeight) + "px";
 				this.element.scrollTop = this.scrollTop;
 			}
-
+			
 			this.renderer.resize();
-
+			
 			//check if the table has changed size when dealing with variable height tables
 			if(!this.fixedHeight && initialHeight != this.element.clientHeight){
 				if(this.subscribed("table-resize")){
@@ -21487,50 +21517,52 @@ class RowManager extends CoreFeature{
 				}
 			}
 		}
-	}
 
+		this._positionPlaceholder();
+	}
+	
 	//renitialize all rows
 	reinitialize(){
 		this.rows.forEach(function(row){
 			row.reinitialize(true);
 		});
 	}
-
+	
 	//prevent table from being redrawn
 	blockRedraw (){
 		this.redrawBlock = true;
 		this.redrawBlockRestoreConfig = false;
 	}
-
+	
 	//restore table redrawing
 	restoreRedraw (){
 		this.redrawBlock = false;
-
+		
 		if(this.redrawBlockRestoreConfig){
 			this.refreshActiveData(this.redrawBlockRestoreConfig.handler, this.redrawBlockRestoreConfig.skipStage, this.redrawBlockRestoreConfig.renderInPosition);
-
+			
 			this.redrawBlockRestoreConfig = false;
 		}else {
 			if(this.redrawBlockRenderInPosition){
 				this.reRenderInPosition();
 			}
 		}
-
+		
 		this.redrawBlockRenderInPosition = false;
 	}
-
+	
 	//redraw table
 	redraw (force){
 		var left = this.scrollLeft;
-
+		
 		this.adjustTableSize();
-
+		
 		this.table.tableWidth = this.table.element.clientWidth;
-
+		
 		if(!force){
 			this.reRenderInPosition();
 			this.scrollHorizontal(left);
-
+			
 			if(!this.displayRowsCount){
 				if(this.table.options.placeholder){
 					this.getElement().appendChild(this.table.options.placeholder);
@@ -21540,11 +21572,11 @@ class RowManager extends CoreFeature{
 			this.renderTable();
 		}
 	}
-
+	
 	resetScroll(){
 		this.element.scrollLeft = 0;
 		this.element.scrollTop = 0;
-
+		
 		if(this.table.browser === "ie"){
 			var event = document.createEvent("Event");
 			event.initEvent("scroll", false, true);
@@ -21562,6 +21594,7 @@ class FooterManager extends CoreFeature{
 
 		this.active = false;
 		this.element = this.createElement(); //containing element
+		this.containerElement = this.createContainerElement(); //containing element
 		this.external = false;
 		this.links = [];
 
@@ -21572,7 +21605,7 @@ class FooterManager extends CoreFeature{
 		this.initializeElement();
 	}
 
-	createElement (){
+	createElement(){
 		var el = document.createElement("div");
 
 		el.classList.add("tabulator-footer");
@@ -21580,6 +21613,17 @@ class FooterManager extends CoreFeature{
 		return el;
 	}
 
+	
+	createContainerElement(){
+		var el = document.createElement("div");
+
+		el.classList.add("tabulator-footer-contents");
+
+		this.element.appendChild(el);
+
+		return el;
+	}
+
 	initializeElement(){
 		if(this.table.options.footerElement){
 
@@ -21607,7 +21651,7 @@ class FooterManager extends CoreFeature{
 	append(element, parent){
 		this.activate(parent);
 
-		this.element.appendChild(element);
+		this.containerElement.appendChild(element);
 		this.table.rowManager.adjustTableSize();
 	}
 
@@ -21683,7 +21727,7 @@ class InteractionManager extends CoreFeature {
 			"tabulator-group":"group",
 			"tabulator-col":"column",
 		};
-
+		
 		this.pseudoTrackers = {
 			"row":{
 				subscriber:null,
@@ -21702,12 +21746,13 @@ class InteractionManager extends CoreFeature {
 				target:null,
 			},
 		};
-
+		
 		this.pseudoTracking = false;
 	}
 	
 	initialize(){
 		this.el = this.table.element;
+		
 		this.buildListenerMap();
 		this.bindSubscriptionWatchers();
 	}
@@ -21724,55 +21769,55 @@ class InteractionManager extends CoreFeature {
 		
 		this.listeners = listenerMap;
 	}
-
+	
 	bindPseudoEvents(){
 		Object.keys(this.pseudoTrackers).forEach((key) => {
 			this.pseudoTrackers[key].subscriber = this.pseudoMouseEnter.bind(this, key);
 			this.subscribe(key + "-mouseover", this.pseudoTrackers[key].subscriber);
 		});
-
+		
 		this.pseudoTracking = true;
 	}
-
+	
 	pseudoMouseEnter(key, e, target){
 		if(this.pseudoTrackers[key].target !== target){
 			
 			if(this.pseudoTrackers[key].target){
 				this.dispatch(key + "-mouseleave", e, target);
 			}
-
+			
 			this.pseudoMouseLeave(key, e);
-
+			
 			this.pseudoTrackers[key].target = target;
-
+			
 			this.dispatch(key + "-mouseenter", e, target);
 		}
 	}
-
+	
 	pseudoMouseLeave(key, e){
 		var leaveList = Object.keys(this.pseudoTrackers),
 		linkedKeys = {
 			"row":["cell"],
 			"cell":["row"],
 		};
-
+		
 		leaveList = leaveList.filter((item) => {
 			var links = linkedKeys[key];
 			return item !== key && (!links || (links && !links.includes(item)));
 		});
-
-	
+		
+		
 		leaveList.forEach((key) => {
 			var target = this.pseudoTrackers[key].target;
-
+			
 			if(this.pseudoTrackers[key].target){
 				this.dispatch(key + "-mouseleave", e, target);
-
+				
 				this.pseudoTrackers[key].target = null;
 			}
 		});
 	}
-
+	
 	
 	bindSubscriptionWatchers(){
 		var listeners = Object.keys(this.listeners),
@@ -21793,7 +21838,7 @@ class InteractionManager extends CoreFeature {
 		var listener = this.listeners[key].components,
 		index = listener.indexOf(component),
 		changed = false;
-
+		
 		if(added){
 			if(index === -1){
 				listener.push(component);
@@ -21807,7 +21852,7 @@ class InteractionManager extends CoreFeature {
 				}
 			}
 		}
-
+		
 		if((key === "mouseenter" || key === "mouseleave") && !this.pseudoTracking){
 			this.bindPseudoEvents();
 		}
@@ -21841,9 +21886,9 @@ class InteractionManager extends CoreFeature {
 		
 		var targets = this.findTargets(path);
 		targets = this.bindComponents(type, targets);
-
+		
 		this.triggerEvents(type, e, targets);
-
+		
 		if(this.pseudoTracking && (type == "mouseover" || type == "mouseleave") && !Object.keys(targets).length){
 			this.pseudoMouseLeave("none", e);
 		}
@@ -21904,6 +21949,10 @@ class InteractionManager extends CoreFeature {
 						component = rows.find((row) => {
 							return row.getElement() === target;
 						});
+						
+						if(targets["row"].parentNode && targets["row"].parentNode.closest(".tabulator-row")){
+							targets[key] = false;
+						}
 					}
 					break;
 					
@@ -21915,10 +21964,12 @@ class InteractionManager extends CoreFeature {
 					
 					case "cell":
 					if(listener.components.includes("cell")){
-						if(targets["row"]){
+						if(targets["row"] instanceof Row){
 							component = targets["row"].findCell(target);
-						}else {
-							console.warn("Event Target Lookup Error - The row this cell is attached to cannot be found, has the table been reinitialized without being destroyed first?");
+						}else {	
+							if(targets["row"]){
+								console.warn("Event Target Lookup Error - The row this cell is attached to cannot be found, has the table been reinitialized without being destroyed first?");
+							}
 						}
 					}
 					break;
@@ -21952,7 +22003,7 @@ class InteractionManager extends CoreFeature {
 	clearWatchers(){
 		for(let key in this.listeners){
 			let listener = this.listeners[key];
-		
+			
 			if(listener.handler){
 				this.el.removeEventListener(key, listener.handler);
 				listener.handler = null;