tabulator-tables 5.0.1 → 5.0.6

package/dist/js/tabulator_esm.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.0.1 (c) Oliver Folkerd 2021 */
+/* Tabulator v5.0.6 (c) Oliver Folkerd 2021 */
 class CoreFeature{
 
 	constructor(table){
@@ -195,7 +195,7 @@ class Module extends CoreFeature{
 	}
 }
 
-class Helpers$1{
+class Helpers{
 
 	static elVisible(el){
 		return !(el.offsetWidth <= 0 && el.offsetHeight <= 0);
@@ -210,18 +210,35 @@ class Helpers$1{
 		};
 	}
 
-	static deepClone(obj){
-		var clone = Object.assign(Array.isArray(obj) ? [] : {}, obj);
+	static deepClone(obj, clone, list = []){
+		var objectProto = {}.__proto__,
+		arrayProto = [].__proto__;
+
+		if (!clone){
+			clone = Object.assign(Array.isArray(obj) ? [] : {}, obj);
+		}
 
 		for(var i in obj) {
-			if(obj[i] != null && typeof(obj[i])  === "object"){
-				if (obj[i] instanceof Date) {
-					clone[i] = new Date(obj[i]);
-				} else {
-					clone[i] = this.deepClone(obj[i]);
+			let subject = obj[i],
+			match, copy;
+
+			if(subject != null && typeof subject === "object" && (subject.__proto__ === objectProto || subject.__proto__ === arrayProto)){
+				match = list.findIndex((item) => {
+					return item.subject === subject;
+				});
+
+				if(match > -1){
+					clone[i] = list[match].copy;
+				}else {
+					copy = Object.assign(Array.isArray(subject) ? [] : {}, subject);
+
+					list.unshift({subject, copy});
+
+					clone[i] = this.deepClone(subject, copy, list);
 				}
 			}
 		}
+
 		return clone;
 	}
 }
@@ -259,7 +276,7 @@ class Accessor extends Module{
 		var match = false,
 		config = {};
 
-		this.allowedTypes.forEach(function(type){
+		this.allowedTypes.forEach((type) => {
 			var key = "accessor" + (type.charAt(0).toUpperCase() + type.slice(1)),
 			accessor;
 
@@ -309,7 +326,7 @@ class Accessor extends Module{
 		rowComponent = row.getComponent();
 
 		//clone data object with deep copy to isolate internal data from returned result
-		var data = Helpers$1.deepClone(row.data || {});
+		var data = Helpers.deepClone(row.data || {});
 
 		this.table.columnManager.traverse(function(column){
 			var value, accessor, params, colCompnent;
@@ -475,6 +492,26 @@ function defaultLoaderPromise(url, config, params){
 	});
 }
 
+function generateParamsList$1(data, prefix){
+	var output = [];
+
+	prefix = prefix || "";
+
+	if(Array.isArray(data)){
+		data.forEach((item, i) => {
+			output = output.concat(generateParamsList$1(item, prefix ? prefix + "[" + i + "]" : i));
+		});
+	}else if (typeof data === "object"){
+		for (var key in data){
+			output = output.concat(generateParamsList$1(data[key], prefix ? prefix + "[" + key + "]" : key));
+		}
+	}else {
+		output.push({key:prefix, value:data});
+	}
+
+	return output;
+}
+
 var defaultContentTypeFormatters = {
 	"json":{
 		headers:{
@@ -488,7 +525,8 @@ var defaultContentTypeFormatters = {
 		headers:{
 		},
 		body:function(url, config, params){
-			var output = this.generateParamsList(params),
+
+			var output = generateParamsList$1(params),
 			form = new FormData();
 
 			output.forEach(function(item){
@@ -2292,7 +2330,7 @@ class Column$1 extends CoreFeature{
 				this.reinitializeWidth();
 			}
 
-			this.table.columnManager._verticalAlignHeaders();
+			this.table.columnManager.verticalAlignHeaders();
 
 			this.dispatch("column-show", this, responsiveToggle);
 
@@ -2317,7 +2355,7 @@ class Column$1 extends CoreFeature{
 
 			this.element.style.display = "none";
 
-			this.table.columnManager._verticalAlignHeaders();
+			this.table.columnManager.verticalAlignHeaders();
 
 			if(this.parent.isGroup){
 				this.parent.checkColumnVisibility();
@@ -2836,6 +2874,10 @@ class Row$1 extends CoreFeature{
 		}
 	}
 
+	deinitializeHeight(){
+		this.heightInitialized = false;
+	}
+
 	reinitialize(children){
 		this.initialized = false;
 		this.heightInitialized = false;
@@ -2892,7 +2934,6 @@ class Row$1 extends CoreFeature{
 
 	//normalize the height of elements in the row
 	normalizeHeight(force){
-
 		if(force){
 			this.clearCellHeight();
 		}
@@ -2946,7 +2987,7 @@ class Row$1 extends CoreFeature{
 
 	//update the rows data
 	updateData(updatedData){
-		var visible = this.element && Helpers$1.elVisible(this.element),
+		var visible = this.element && Helpers.elVisible(this.element),
 		tempData = {},
 		newRowData;
 
@@ -4281,7 +4322,7 @@ class DataTree extends Module{
 
 	checkForRestyle(cell){
 		if(!cell.row.cells.indexOf(cell)){
-			cell.row.reinitialize();
+			this.layoutRow(cell.row);
 		}
 	}
 
@@ -5589,7 +5630,7 @@ function select(cell, onRendered, success, cancel, editorParams){
 			}
 
 
-			var offset = Helpers$1.elOffset(cellEl);
+			var offset = Helpers.elOffset(cellEl);
 
 			listEl.style.minWidth = cellEl.offsetWidth + "px";
 
@@ -6066,7 +6107,7 @@ function autocomplete(cell, onRendered, success, cancel, editorParams){
 		if(!listEl.parentNode){
 			while(listEl.firstChild) listEl.removeChild(listEl.firstChild);
 
-			var offset = Helpers$1.elOffset(cellEl);
+			var offset = Helpers.elOffset(cellEl);
 
 			listEl.style.minWidth = cellEl.offsetWidth + "px";
 
@@ -6381,8 +6422,8 @@ function star(cell, onRendered, success, cancel, editorParams){
 //draggable progress bar
 function progress(cell, onRendered, success, cancel, editorParams){
 	var element = cell.getElement(),
-	max = typeof editorParams.max === "undefined" ? ( element.getElementsByTagName("div")[0].getAttribute("max") || 100) : editorParams.max,
-	min = typeof editorParams.min === "undefined" ? ( element.getElementsByTagName("div")[0].getAttribute("min") || 0) : editorParams.min,
+	max = typeof editorParams.max === "undefined" ? ( element.getElementsByTagName("div")[0]?.getAttribute("max") || 100) : editorParams.max,
+	min = typeof editorParams.min === "undefined" ? ( element.getElementsByTagName("div")[0]?.getAttribute("min") || 0) : editorParams.min,
 	percent = (max - min) / 100,
 	value = cell.getValue() || 0,
 	handle = document.createElement("div"),
@@ -6754,7 +6795,7 @@ class Edit extends Module{
 					nextCell = this.findNextEditableCell(prevRow, prevRow.cells.length);
 
 					if(nextCell){
-						nextCell.edit();
+						nextCell.getComponent().edit();
 						return true;
 					}
 				}
@@ -6785,7 +6826,7 @@ class Edit extends Module{
 					nextCell = this.findNextEditableCell(nextRow, -1);
 
 					if(nextCell){
-						nextCell.edit();
+						nextCell.getComponent().edit();
 						return true;
 					}
 				}
@@ -6809,7 +6850,7 @@ class Edit extends Module{
 			nextCell = this.findPrevEditableCell(cell.row, index);
 
 			if(nextCell){
-				nextCell.edit();
+				nextCell.getComponent().edit();
 				return true;
 			}
 		}
@@ -6831,7 +6872,7 @@ class Edit extends Module{
 			nextCell = this.findNextEditableCell(cell.row, index);
 
 			if(nextCell){
-				nextCell.edit();
+				nextCell.getComponent().edit();
 				return true;
 			}
 		}
@@ -6853,7 +6894,7 @@ class Edit extends Module{
 			nextRow = this.table.rowManager.prevDisplayRow(cell.row, true);
 
 			if(nextRow){
-				nextRow.cells[index].edit();
+				nextRow.cells[index].getComponent().edit();
 				return true;
 			}
 		}
@@ -6875,7 +6916,7 @@ class Edit extends Module{
 			nextRow = this.table.rowManager.nextDisplayRow(cell.row, true);
 
 			if(nextRow){
-				nextRow.cells[index].edit();
+				nextRow.cells[index].getComponent().edit();
 				return true;
 			}
 		}
@@ -8954,10 +8995,12 @@ function textarea$1(cell, formatterParams, onRendered){
 
 function money(cell, formatterParams, onRendered){
 	var floatVal = parseFloat(cell.getValue()),
+	sign = "",
 	number, integer, decimal, rgx;
 
 	var decimalSym = formatterParams.decimal || ".";
 	var thousandSym = formatterParams.thousand || ",";
+	var negativeSign = formatterParams.negativeSign || "-";
 	var symbol = formatterParams.symbol || "";
 	var after = !!formatterParams.symbolAfter;
 	var precision = typeof formatterParams.precision !== "undefined" ? formatterParams.precision : 2;
@@ -8966,6 +9009,11 @@ function money(cell, formatterParams, onRendered){
 		return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
 	}
 
+	if(floatVal < 0){
+		floatVal = Math.abs(floatVal);
+		sign = negativeSign;
+	}
+
 	number = precision !== false ? floatVal.toFixed(precision) : floatVal;
 	number = String(number).split(".");
 
@@ -8978,7 +9026,7 @@ function money(cell, formatterParams, onRendered){
 		integer = integer.replace(rgx, "$1" + thousandSym + "$2");
 	}
 
-	return after ? integer + decimal + symbol : symbol + integer + decimal;
+	return after ? sign + integer + decimal + symbol : sign + symbol + integer + decimal;
 }
 
 function link(cell, formatterParams, onRendered){
@@ -9865,12 +9913,33 @@ class FrozenColumns extends Module{
 			if(this.table.modules.columnCalcs.topInitialized && this.table.modules.columnCalcs.topRow){
 				this.layoutRow(this.table.modules.columnCalcs.topRow);
 			}
+
 			if(this.table.modules.columnCalcs.botInitialized && this.table.modules.columnCalcs.botRow){
 				this.layoutRow(this.table.modules.columnCalcs.botRow);
 			}
+
+			if(this.table.modExists("groupRows")){
+				this.layoutGroupCalcs(this.table.modules.groupRows.getGroups());
+			}
 		}
 	}
 
+	layoutGroupCalcs(groups){
+		groups.forEach((group) => {
+			if(group.calcs.top){
+				this.layoutRow(group.calcs.top);
+			}
+
+			if(group.calcs.bottom){
+				this.layoutRow(group.calcs.bottom);
+			}
+
+			if(group.groupList && group.groupList.length){
+				this.layoutGroupCalcs(group.groupList && group.groupList);
+			}
+		});
+	}
+
 	//calculate column positions and layout headers
 	layoutColumnPosition(allCells){
 
@@ -10794,7 +10863,7 @@ class Group{
 		this.initialized = false;
 		this.height = 0;
 
-		if(Helpers$1.elVisible(this.element)){
+		if(Helpers.elVisible(this.element)){
 			this.initialize(true);
 		}
 	}
@@ -10823,6 +10892,8 @@ class Group{
 
 	clearCellHeight(){}
 
+	deinitializeHeight(){}
+
 	//////////////// Object Generation /////////////////
 	getComponent(){
 		if(!this.component){
@@ -11159,14 +11230,12 @@ class GroupRows extends Module{
 	getRows(rows){
 		if(this.groupIDLookups.length){
 
-			if(!Object.keys(this.groups).length){
-				this.dispatchExternal("dataGrouping");
+			this.dispatchExternal("dataGrouping");
 
-				this.generateGroups(rows);
+			this.generateGroups(rows);
 
-				if(this.subscribedExternal("dataGrouped")){
-					this.dispatchExternal("dataGrouped", this.getGroups(true));
-				}
+			if(this.subscribedExternal("dataGrouped")){
+				this.dispatchExternal("dataGrouped", this.getGroups(true));
 			}
 
 			return this.updateGroupRows();
@@ -11403,6 +11472,7 @@ GroupRows.moduleName = "groupRows";
 var defaultUndoers = {
 	cellEdit: function(action){
 		action.component.setValueProcessData(action.data.oldValue);
+		action.component.cellRendered();
 	},
 
 	rowAdd: function(action){
@@ -11428,6 +11498,7 @@ var defaultUndoers = {
 var defaultRedoers = {
 	cellEdit: function(action){
 		action.component.setValueProcessData(action.data.newValue);
+		action.component.cellRendered();
 	},
 
 	rowAdd: function(action){
@@ -11624,17 +11695,17 @@ class HtmlTableImport extends Module{
 	}
 
 	initialize(){
-		this.subscribe("table-building", this.tableElementCheck.bind(this));
+		this.tableElementCheck();
 	}
 
 	tableElementCheck(){
-		if(this.table.element.tagName === "TABLE"){
+		if(this.table.originalElement && this.table.originalElement.tagName === "TABLE"){
 			this.parseTable();
 		}
 	}
 
 	parseTable(){
-		var element = this.table.element,
+		var element = this.table.originalElement,
 		options = this.table.options,
 		columns = options.columns,
 		headers = element.getElementsByTagName("th"),
@@ -11678,28 +11749,9 @@ class HtmlTableImport extends Module{
 			data.push(item);
 		}
 
-		//create new element
-		var newElement = document.createElement("div");
-
-		//transfer attributes to new element
-		var attributes = element.attributes;
-
-		// loop through attributes and apply them on div
-
-		for(var i in attributes){
-			if(typeof attributes[i] == "object"){
-				newElement.setAttribute(attributes[i].name, attributes[i].value);
-			}
-		}
-
-		// replace table with div element
-		element.parentNode.replaceChild(newElement, element);
-
 		options.data = data;
 
 		this.dispatchExternal("htmlImported");
-
-		this.table.element = newElement;
 	}
 
 	//extract tabulator attribute options
@@ -11776,7 +11828,7 @@ class HtmlTableImport extends Module{
 			header.attributes;
 
 			// //check for tablator inline options
-			this._extractOptions(header, col, Column.prototype.defaultOptionList);
+			this._extractOptions(header, col, Column$1.prototype.defaultOptionList);
 
 			this.fieldIndex[index] = col.field;
 
@@ -12682,7 +12734,7 @@ class Menu extends Module{
 
 			this.positionReversedX = false;
 		}else {
-			parentOffset = Helpers$1.elOffset(parentEl);
+			parentOffset = Helpers.elOffset(parentEl);
 			x = parentOffset.left + parentEl.offsetWidth;
 			y = parentOffset.top - 1;
 		}
@@ -12800,7 +12852,7 @@ class MoveColumns extends Module{
 
 			config.mousemove = function(e){
 				if(column.parent === self.moving.parent){
-					if((((self.touchMove ? e.touches[0].pageX : e.pageX) - Helpers$1.elOffset(colEl).left) + self.table.columnManager.element.scrollLeft) > (column.getWidth() / 2)){
+					if((((self.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(colEl).left) + self.table.columnManager.element.scrollLeft) > (column.getWidth() / 2)){
 						if(self.toCol !== column || !self.toColAfter){
 							colEl.parentNode.insertBefore(self.placeholderElement, colEl.nextSibling);
 							self.moveColumn(column, true);
@@ -12916,7 +12968,7 @@ class MoveColumns extends Module{
 		var element = column.getElement();
 
 		this.moving = column;
-		this.startX = (this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers$1.elOffset(element).left;
+		this.startX = (this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(element).left;
 
 		this.table.element.classList.add("tabulator-block-select");
 
@@ -13015,7 +13067,7 @@ class MoveColumns extends Module{
 	moveHover(e){
 		var columnHolder = this.table.columnManager.getElement(),
 		scrollLeft = columnHolder.scrollLeft,
-		xPos = ((this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers$1.elOffset(columnHolder).left) + scrollLeft,
+		xPos = ((this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(columnHolder).left) + scrollLeft,
 		scrollPos;
 
 		this.hoverElement.style.left = (xPos - this.startX) + "px";
@@ -13117,7 +13169,7 @@ class MoveRows extends Module{
 
 		//same table drag drop
 		config.mousemove = function(e){
-			if(((e.pageY - Helpers$1.elOffset(group.element).top) + self.table.rowManager.element.scrollTop) > (group.getHeight() / 2)){
+			if(((e.pageY - Helpers.elOffset(group.element).top) + self.table.rowManager.element.scrollTop) > (group.getHeight() / 2)){
 				if(self.toRow !== group || !self.toRowAfter){
 					var rowEl = group.getElement();
 					rowEl.parentNode.insertBefore(self.placeholderElement, rowEl.nextSibling);
@@ -13151,7 +13203,7 @@ class MoveRows extends Module{
 		config.mousemove = function(e){
 			var rowEl = row.getElement();
 
-			if(((e.pageY - Helpers$1.elOffset(rowEl).top) + self.table.rowManager.element.scrollTop) > (row.getHeight() / 2)){
+			if(((e.pageY - Helpers.elOffset(rowEl).top) + self.table.rowManager.element.scrollTop) > (row.getHeight() / 2)){
 				if(self.toRow !== row || !self.toRowAfter){
 					rowEl.parentNode.insertBefore(self.placeholderElement, rowEl.nextSibling);
 					self.moveRow(row, true);
@@ -13943,6 +13995,8 @@ class Page extends Module{
 
 			this.table.rowManager.getTableElement().removeChild(testElRow);
 		}
+
+		this.generatePageSizeSelectList();
 	}
 
 	initialLoadComplete(){
@@ -14202,8 +14256,6 @@ class Page extends Module{
 
 			this.page = this.table.options.paginationInitialPage;
 			this.count = this.table.options.paginationButtonCount;
-
-			this.generatePageSizeSelectList();
 		}
 
 		//set default values
@@ -15216,7 +15268,8 @@ class ReactiveData extends Module{
 	}
 
 	watchData(data){
-		var version;
+		var self = this,
+		version;
 
 		this.currentVersion ++;
 
@@ -15232,16 +15285,16 @@ class ReactiveData extends Module{
 		Object.defineProperty(this.data, "push", {
 			enumerable: false,
 			configurable: true,
-			value: () => {
+			value: function(){
 				var args = Array.from(arguments);
 
-				if(!this.blocked && version === this.currentVersion){
+				if(!self.blocked && version === self.currentVersion){
 					args.forEach((arg) => {
-						this.table.rowManager.addRowActual(arg, false);
+						self.table.rowManager.addRowActual(arg, false);
 					});
 				}
 
-				return this.origFuncs.push.apply(data, arguments);
+				return self.origFuncs.push.apply(data, arguments);
 			}
 		});
 
@@ -15251,16 +15304,16 @@ class ReactiveData extends Module{
 		Object.defineProperty(this.data, "unshift", {
 			enumerable: false,
 			configurable: true,
-			value: () => {
+			value: function(){
 				var args = Array.from(arguments);
 
-				if(!this.blocked && version === this.currentVersion){
+				if(!self.blocked && version === self.currentVersion){
 					args.forEach((arg) => {
-						this.table.rowManager.addRowActual(arg, true);
+						self.table.rowManager.addRowActual(arg, true);
 					});
 				}
 
-				return this.origFuncs.unshift.apply(data, arguments);
+				return self.origFuncs.unshift.apply(data, arguments);
 			}
 		});
 
@@ -15271,12 +15324,12 @@ class ReactiveData extends Module{
 		Object.defineProperty(this.data, "shift", {
 			enumerable: false,
 			configurable: true,
-			value: () => {
+			value: function(){
 				var row;
 
-				if(!this.blocked && version === this.currentVersion){
-					if(this.data.length){
-						row = this.table.rowManager.getRowFromDataObject(this.data[0]);
+				if(!self.blocked && version === self.currentVersion){
+					if(self.data.length){
+						row = self.table.rowManager.getRowFromDataObject(self.data[0]);
 
 						if(row){
 							row.deleteActual();
@@ -15284,7 +15337,7 @@ class ReactiveData extends Module{
 					}
 				}
 
-				return this.origFuncs.shift.call(data);
+				return self.origFuncs.shift.call(data);
 			}
 		});
 
@@ -15294,18 +15347,18 @@ class ReactiveData extends Module{
 		Object.defineProperty(this.data, "pop", {
 			enumerable: false,
 			configurable: true,
-			value: () => {
+			value: function(){
 				var row;
-				if(!this.blocked && version === this.currentVersion){
-					if(this.data.length){
-						row = this.table.rowManager.getRowFromDataObject(this.data[this.data.length - 1]);
+				if(!self.blocked && version === self.currentVersion){
+					if(self.data.length){
+						row = self.table.rowManager.getRowFromDataObject(self.data[self.data.length - 1]);
 
 						if(row){
 							row.deleteActual();
 						}
 					}
 				}
-				return this.origFuncs.pop.call(data);
+				return self.origFuncs.pop.call(data);
 			}
 		});
 
@@ -15316,28 +15369,28 @@ class ReactiveData extends Module{
 		Object.defineProperty(this.data, "splice", {
 			enumerable: false,
 			configurable: true,
-			value: () => {
+			value: function(){
 				var args = Array.from(arguments),
 				start = args[0] < 0 ? data.length + args[0] : args[0],
 				end = args[1],
 				newRows = args[2] ? args.slice(2) : false,
 				startRow;
 
-				if(!this.blocked && version === this.currentVersion){
+				if(!self.blocked && version === self.currentVersion){
 
 					//add new rows
 					if(newRows){
-						startRow = data[start] ? this.table.rowManager.getRowFromDataObject(data[start]) : false;
+						startRow = data[start] ? self.table.rowManager.getRowFromDataObject(data[start]) : false;
 
 						if(startRow){
 							newRows.forEach((rowData) => {
-								this.table.rowManager.addRowActual(rowData, true, startRow, true);
+								self.table.rowManager.addRowActual(rowData, true, startRow, true);
 							});
 						}else {
 							newRows = newRows.slice().reverse();
 
 							newRows.forEach((rowData) => {
-								this.table.rowManager.addRowActual(rowData, true, false, true);
+								self.table.rowManager.addRowActual(rowData, true, false, true);
 							});
 						}
 					}
@@ -15347,7 +15400,7 @@ class ReactiveData extends Module{
 						var oldRows = data.slice(start, typeof args[1] === "undefined" ? args[1] : start + end);
 
 						oldRows.forEach((rowData, i) => {
-							var row = this.table.rowManager.getRowFromDataObject(rowData);
+							var row = self.table.rowManager.getRowFromDataObject(rowData);
 
 							if(row){
 								row.deleteActual(i !== oldRows.length - 1);
@@ -15356,11 +15409,11 @@ class ReactiveData extends Module{
 					}
 
 					if(newRows || end !== 0){
-						this.table.rowManager.reRenderInPosition();
+						self.table.rowManager.reRenderInPosition();
 					}
 				}
 
-				return this.origFuncs.splice.apply(data, arguments);
+				return self.origFuncs.splice.apply(data, arguments);
 			}
 		});
 	}
@@ -16242,10 +16295,14 @@ class ResponsiveLayout extends Module{
 						},
 					};
 
+					function onRendered(callback){
+						callback();
+					}
+
 					output.push({
 						field: column.field,
 						title: column.definition.title,
-						value: column.modules.format.formatter.call(self.table.modules.format, mockCellComponent, column.modules.format.params)
+						value: column.modules.format.formatter.call(self.table.modules.format, mockCellComponent, column.modules.format.params, onRendered)
 					});
 				}else {
 					output.push({
@@ -18082,8 +18139,8 @@ class Renderer extends CoreFeature{
 
 				//check row visibility
 				if(!ifVisible){
-					if(Helpers$1.elVisible(rowEl)){
-						offset = Helpers$1.elOffset(rowEl).top - Helpers$1.elOffset(this.elementVertical).top;
+					if(Helpers.elVisible(rowEl)){
+						offset = Helpers.elOffset(rowEl).top - Helpers.elOffset(this.elementVertical).top;
 
 						if(offset > 0 && offset < this.elementVertical.clientHeight - rowEl.offsetHeight){
 							return false;
@@ -18686,6 +18743,7 @@ class ColumnManager extends CoreFeature {
 		var el = document.createElement("div");
 
 		el.classList.add("tabulator-headers");
+		el.setAttribute("role", "row");
 
 		return el;
 	}
@@ -18694,6 +18752,7 @@ class ColumnManager extends CoreFeature {
 		var el = document.createElement("div");
 
 		el.classList.add("tabulator-header");
+		el.setAttribute("role", "rowgroup");
 
 		if(!this.table.options.headerVisible){
 			el.classList.add("tabulator-header-hidden");
@@ -18852,7 +18911,6 @@ class ColumnManager extends CoreFeature {
 		index = nextToColumn ? this.findColumnIndex(nextToColumn) : nextToColumn;
 
 		if(nextToColumn && index > -1){
-
 			var parentIndex = this.columns.indexOf(nextToColumn.getTopColumn());
 			var nextEl = nextToColumn.getElement();
 
@@ -18863,7 +18921,6 @@ class ColumnManager extends CoreFeature {
 				this.columns.splice(parentIndex + 1, 0, column);
 				nextEl.parentNode.insertBefore(colEl, nextEl.nextSibling);
 			}
-
 		}else {
 			if(before){
 				this.columns.unshift(column);
@@ -18872,10 +18929,10 @@ class ColumnManager extends CoreFeature {
 				this.columns.push(column);
 				this.headersElement.appendChild(column.getElement());
 			}
-
-			column.columnRendered();
 		}
 
+		column.columnRendered();
+
 		return column;
 	}
 
@@ -18898,7 +18955,7 @@ class ColumnManager extends CoreFeature {
 	}
 
 	//ensure column headers take up the correct amount of space in column groups
-	_verticalAlignHeaders(){
+	verticalAlignHeaders(){
 		var minHeight = 0;
 
 		this.columns.forEach((column) => {
@@ -19055,7 +19112,7 @@ class ColumnManager extends CoreFeature {
 			to.element.parentNode.insertBefore(to.element, from.element);
 		}
 
-		this._verticalAlignHeaders();
+		this.verticalAlignHeaders();
 
 		this.table.rowManager.reinitialize();
 	}
@@ -19236,7 +19293,7 @@ class ColumnManager extends CoreFeature {
 				column.reinitializeWidth();
 			}
 
-			this._verticalAlignHeaders();
+			this.verticalAlignHeaders();
 
 			this.table.rowManager.reinitialize();
 
@@ -19270,18 +19327,18 @@ class ColumnManager extends CoreFeature {
 			this.columns.splice(index, 1);
 		}
 
-		this._verticalAlignHeaders();
+		this.verticalAlignHeaders();
 
 		this.redraw();
 	}
 
 	//redraw columns
 	redraw(force){
-		if(force){
-			if(Helpers$1.elVisible(this.element)){
-				this._verticalAlignHeaders();
-			}
+		if(Helpers.elVisible(this.element)){
+			this.verticalAlignHeaders();
+		}
 
+		if(force){
 			this.table.rowManager.resetScroll();
 			this.table.rowManager.reinitialize();
 		}
@@ -19355,7 +19412,7 @@ class BaiscVertical extends Renderer{
 	}
 
 	scrollToRowNearestTop(row){
-		var rowTop = Helpers$1.elOffset(row.getElement()).top;
+		var rowTop = Helpers.elOffset(row.getElement()).top;
 
 		return !(Math.abs(this.elementVertical.scrollTop - rowTop) > Math.abs(this.elementVertical.scrollTop + this.elementVertical.clientHeight - rowTop));
 	}
@@ -19363,7 +19420,7 @@ class BaiscVertical extends Renderer{
 	scrollToRow(row){
 		var rowEl = row.getElement();
 
-		this.elementVertical.scrollTop = Helpers$1.elOffset(rowEl).top - Helpers$1.elOffset(this.elementVertical).top + this.elementVertical.scrollTop;
+		this.elementVertical.scrollTop = Helpers.elOffset(rowEl).top - Helpers.elOffset(this.elementVertical).top + this.elementVertical.scrollTop;
 	}
 
 	visibleRows(includingBuffer){
@@ -19461,6 +19518,10 @@ class VirtualDomVertical extends Renderer{
 			}
 		}
 
+		rows.forEach((row) => {
+			row.deinitializeHeight();
+		});
+
 		if(callback){
 			callback();
 		}
@@ -19621,7 +19682,7 @@ class VirtualDomVertical extends Renderer{
 			position -= topPad;
 		}
 
-		if(rowsCount && Helpers$1.elVisible(this.elementVertical)){
+		if(rowsCount && Helpers.elVisible(this.elementVertical)){
 			this.vDomTop = position;
 
 			this.vDomBottom = position -1;
@@ -19980,6 +20041,7 @@ class RowManager extends CoreFeature{
 
 		el.classList.add("tabulator-tableholder");
 		el.setAttribute("tabindex", 0);
+		el.setAttribute("role", "rowgroup");
 
 		return el;
 	}
@@ -19988,6 +20050,7 @@ class RowManager extends CoreFeature{
 		var el = document.createElement("div");
 
 		el.classList.add("tabulator-table");
+		el.setAttribute("role", "rowgroup");
 
 		return el;
 	}
@@ -20110,13 +20173,12 @@ class RowManager extends CoreFeature{
 					});
 				}
 			}else {
-				if(this.table.options.autoColumns && columnsChanged){
+				if(this.table.options.autoColumns && columnsChanged && this.table.initialized){
 					this.table.columnManager.generateColumnsFromRowData(data);
 				}
 				this.resetScroll();
 
 				this._setDataActual(data);
-
 			}
 
 			resolve();
@@ -20236,7 +20298,7 @@ class RowManager extends CoreFeature{
 				this.dispatch("row-added", row, data, pos, index);
 			});
 
-			this.reRenderInPosition();
+			this.refreshActiveData(false, false, true);
 
 			this.regenerateRowNumbers();
 
@@ -20618,7 +20680,7 @@ class RowManager extends CoreFeature{
 				//case to handle scenario when trying to skip past end stage
 			}
 
-			if(Helpers$1.elVisible(this.element)){
+			if(Helpers.elVisible(this.element)){
 				if(renderInPosition){
 					this.reRenderInPosition();
 				}else {
@@ -20781,13 +20843,13 @@ class RowManager extends CoreFeature{
 	}
 
 	renderTable(){
-
 		this.dispatchExternal("renderStarted");
 
 		this.element.scrollTop = 0;
 
+		this._clearTable();
+
 		if(this.displayRowsCount){
-			this._clearTable();
 			this.renderer.renderRows();
 
 			if(this.firstRender){
@@ -20978,7 +21040,7 @@ class FooterManager extends CoreFeature{
 	}
 
 	initialize(){
-
+		this.initializeElement();
 	}
 
 	createElement (){
@@ -20989,7 +21051,7 @@ class FooterManager extends CoreFeature{
 		return el;
 	}
 
-	initializeElement(element){
+	initializeElement(){
 		if(this.table.options.footerElement){
 
 			switch(typeof this.table.options.footerElement){
@@ -21155,6 +21217,7 @@ class InteractionManager extends CoreFeature {
 				if(!listener.handler){
 					listener.handler = this.track.bind(this, key);
 					this.el.addEventListener(key, listener.handler);
+					console.log("add", key);
 					// this.el.addEventListener(key, listener.handler, {passive: true})
 				}
 			}else {
@@ -21390,7 +21453,7 @@ class DataLoader extends CoreFeature{
 					this.hideLoader();
 
 					if(rowData !== false){
-						this.dispatchExternal("dataLoaded", data);
+						this.dispatchExternal("dataLoaded", rowData);
 						this.table.rowManager.setData(rowData,  replace, !replace);
 					}
 				}else {
@@ -21494,7 +21557,8 @@ class DataLoader extends CoreFeature{
 
 class ExternalEventBus {
 
-	constructor(optionsList, debug){
+	constructor(table, optionsList, debug){
+		this.table = table;
 		this.events = {};
 		this.optionsList = optionsList || {};
 		this.subscriptionNotifiers = {};
@@ -21572,7 +21636,7 @@ class ExternalEventBus {
 
 		if(this.events[key]){
 			this.events[key].forEach((callback, i) => {
-				let callResult = callback.apply(this, args);
+				let callResult = callback.apply(this.table, args);
 
 				if(!i){
 					result = callResult;
@@ -22155,7 +22219,7 @@ class Localize extends Module{
 	}
 
 	initialize(){
-		this.langList = Helpers$1.deepClone(Localize.langs);
+		this.langList = Helpers.deepClone(Localize.langs);
 
 		if(this.table.options.columnDefaults.headerFilterPlaceholder !== false){
 			this.setHeaderFilterPlaceholder(this.table.options.columnDefaults.headerFilterPlaceholder);
@@ -22247,7 +22311,7 @@ class Localize extends Module{
 		this.locale = desiredLocale;
 
 		//load default lang template
-		this.lang = Helpers$1.deepClone(this.langList.default || {});
+		this.lang = Helpers.deepClone(this.langList.default || {});
 
 		if(desiredLocale != "default"){
 			traverseLang(this.langList[desiredLocale], this.lang);
@@ -22399,7 +22463,7 @@ class ModuleBinder {
 
 		tabulator.extendModule = function(name, property, values){
 			if(tabulator.moduleBindings[name]){
-				var source = tabulator.moduleBindings[name].prototype[property];
+				var source = tabulator.moduleBindings[name][property];
 
 				if(source){
 					if(typeof values == "object"){
@@ -22484,6 +22548,7 @@ class Tabulator {
 		this.browserSlow = false; //handle reduced functionality for slower browsers
 		this.browserMobile = false; //check if running on moble, prevent resize cancelling edit on keyboard appearence
 		this.rtl = false; //check if the table is in RTL mode
+		this.originalElement = null; //hold original table element if it has been replaced
 
 		this.componentFunctionBinder = new ComponentFuctionBinder(this); //bind component functions
 		this.dataLoader = false; //bind component functions
@@ -22542,7 +22607,7 @@ class Tabulator {
 
 		this._mapDepricatedFunctionality();
 
-		this.externalEvents = new ExternalEventBus(this.options, this.options.debugEventsExternal);
+		this.externalEvents = new ExternalEventBus(this, this.options, this.options.debugEventsExternal);
 		this.eventBus = new InternalEventBus(this.options.debugEventsInternal);
 
 		this.interactionMonitor = new InteractionManager(this);
@@ -22553,27 +22618,6 @@ class Tabulator {
 		this.footerManager.initialize();
 	}
 
-	rtlCheck(){
-		var style = window.getComputedStyle(this.element);
-
-		switch(this.options.textDirection){
-			case"auto":
-			if(style.direction !== "rtl"){
-				break;
-			}
-			case "rtl":
-			this.element.classList.add("tabulator-rtl");
-			this.rtl = true;
-			break;
-
-			case "ltr":
-			this.element.classList.add("tabulator-ltr");
-
-			default:
-			this.rtl = false;
-		}
-	}
-
 	//convert depricated functionality to new functions
 	_mapDepricatedFunctionality(){
 		//all previously deprecated functionality removed in the 5.0 release
@@ -22601,13 +22645,38 @@ class Tabulator {
 		this.externalEvents.dispatch("tableBuilding");
 		this.eventBus.dispatch("table-building");
 
-		this.rtlCheck();
+		this._rtlCheck();
 
 		this._buildElement();
 
+		this._initializeTable();
+
 		this._loadInitialData();
 
 		this.initialized = true;
+
+		this.externalEvents.dispatch("tableBuilt");
+	}
+
+	_rtlCheck(){
+		var style = window.getComputedStyle(this.element);
+
+		switch(this.options.textDirection){
+			case"auto":
+			if(style.direction !== "rtl"){
+				break;
+			}
+			case "rtl":
+			this.element.classList.add("tabulator-rtl");
+			this.rtl = true;
+			break;
+
+			case "ltr":
+			this.element.classList.add("tabulator-ltr");
+
+			default:
+			this.rtl = false;
+		}
 	}
 
 	//clear pointers to objects in default config object
@@ -22622,7 +22691,28 @@ class Tabulator {
 	//build tabulator element
 	_buildElement(){
 		var element = this.element,
-		options = this.options;
+		options = this.options,
+		newElement;
+
+		if(element.tagName === "TABLE"){
+			this.originalElement = this.element;
+			newElement = document.createElement("div");
+
+			//transfer attributes to new element
+			var attributes = element.attributes;
+
+			// loop through attributes and apply them on div
+			for(var i in attributes){
+				if(typeof attributes[i] == "object"){
+					newElement.setAttribute(attributes[i].name, attributes[i].value);
+				}
+			}
+
+			// replace table with div element
+			element.parentNode.replaceChild(newElement, element);
+
+			this.element = element = newElement;
+		}
 
 		element.classList.add("tabulator");
 		element.setAttribute("role", "grid");
@@ -22647,6 +22737,12 @@ class Tabulator {
 			options.maxHeight = isNaN(options.maxHeight) ? options.maxHeight : options.maxHeight + "px";
 			element.style.maxHeight = options.maxHeight;
 		}
+	}
+
+	//initialize core systems and modules
+	_initializeTable(){
+		var element = this.element,
+		options = this.options;
 
 		this.columnManager.initialize();
 		this.rowManager.initialize();
@@ -22662,7 +22758,6 @@ class Tabulator {
 
 		//configure placeholder element
 		if(typeof options.placeholder == "string"){
-
 			var el = document.createElement("div");
 			el.classList.add("tabulator-placeholder");
 
@@ -22682,7 +22777,8 @@ class Tabulator {
 			this.footerManager.activate();
 		}
 
-		if(options.autoColumns && this.options.data){
+		if(options.autoColumns && options.data){
+
 			this.columnManager.generateColumnsFromRowData(this.options.data);
 		}
 
@@ -22696,7 +22792,6 @@ class Tabulator {
 		this.columnManager.setColumns(options.columns);
 
 		this.eventBus.dispatch("table-built");
-		this.externalEvents.dispatch("tableBuilt");
 	}
 
 	_loadInitialData(){
@@ -23088,7 +23183,11 @@ class Tabulator {
 
 	/////////////// Column Functions  ///////////////
 	setColumns(definition){
-		this.columnManager.setColumns(definition);
+		if(this.initialized){
+			this.columnManager.setColumns(definition);
+		}else {
+			console.warn("setColumns failed - table not yet initialized. To set initial data please use the 'columns' property in the table constructor.");
+		}
 	}
 
 	getColumns(structured){