tabulator-tables 5.0.3 → 5.0.8

package/dist/js/tabulator_esm.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.0.3 (c) Oliver Folkerd 2021 */
+/* Tabulator v5.0.8 (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,25 +210,31 @@ class Helpers$1{
 		};
 	}
 
-	static deepClone(obj, clone, list = {}){
+	static deepClone(obj, clone, list = []){
+		var objectProto = {}.__proto__,
+		arrayProto = [].__proto__;
+
 		if (!clone){
 			clone = Object.assign(Array.isArray(obj) ? [] : {}, obj);
 		}
 
 		for(var i in obj) {
-			let subject = obj[i];
-
-			if(subject != null && typeof(subject)  === "object"){
-				if (subject instanceof Date) {
-					clone[i] = new Date(subject);
-				} else {
-					if(list[subject]){
-						clone[i] = list[subject];
-					}else {
-						list[subject] = Object.assign(Array.isArray(obj) ? [] : {}, obj);
-						clone[i] = this.deepClone(subject, list[subject], list);
-					}
+			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);
 				}
 			}
 		}
@@ -320,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;
@@ -486,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:{
@@ -499,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){
@@ -1153,7 +1180,7 @@ class CellComponent {
 	}
 }
 
-class Cell$1 extends CoreFeature{
+class Cell extends CoreFeature{
 	constructor(column, row){
 		super(column.table);
 
@@ -1621,7 +1648,7 @@ class ColumnComponent {
 	}
 }
 
-var defaultOptions = {
+var defaultColumnOptions = {
 	"title": undefined,
 	"field": undefined,
 	"columns": undefined,
@@ -2303,7 +2330,7 @@ class Column$1 extends CoreFeature{
 				this.reinitializeWidth();
 			}
 
-			this.table.columnManager._verticalAlignHeaders();
+			this.table.columnManager.verticalAlignHeaders();
 
 			this.dispatch("column-show", this, responsiveToggle);
 
@@ -2328,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();
@@ -2530,7 +2557,7 @@ class Column$1 extends CoreFeature{
 	//////////////// Cell Management /////////////////
 	//generate cell for this column
 	generateCell(row){
-		var cell = new Cell$1(this, row);
+		var cell = new Cell(this, row);
 
 		this.cells.push(cell);
 
@@ -2652,7 +2679,7 @@ class Column$1 extends CoreFeature{
 	}
 }
 
-Column$1.defaultOptionList = defaultOptions;
+Column$1.defaultOptionList = defaultColumnOptions;
 
 //public row object
 class RowComponent$1 {
@@ -2745,7 +2772,7 @@ class RowComponent$1 {
 	}
 }
 
-class Row$1 extends CoreFeature{
+class Row extends CoreFeature{
 	constructor (data, parent, type = "row"){
 		super(parent.table);
 
@@ -2960,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;
 
@@ -3587,7 +3614,7 @@ class ColumnCalcs extends Module{
 			this.table.modules.mutator.disable();
 		}
 
-		row = new Row$1(rowData, this, "calc");
+		row = new Row(rowData, this, "calc");
 
 		if(this.table.modExists("mutator")){
 			this.table.modules.mutator.enable();
@@ -3599,7 +3626,7 @@ class ColumnCalcs extends Module{
 
 		row.getComponent = () => {
 			if(!row.component){
-				row.component = new CalcComponent(this);
+				row.component = new CalcComponent(row);
 			}
 
 			return row.component;
@@ -3631,7 +3658,7 @@ class ColumnCalcs extends Module{
 					this.genColumn.definition.cssClass = column.definition.cssClass;
 
 					//generate cell and assign to correct column
-					var cell = new Cell$1(this.genColumn, row);
+					var cell = new Cell(this.genColumn, row);
 					cell.getElement();
 					cell.column = column;
 					cell.setWidth();
@@ -4014,7 +4041,7 @@ class DataTree extends Module{
 
 			output.push(row);
 
-			if(row instanceof Row$1){
+			if(row instanceof Row){
 
 				row.create();
 
@@ -4078,7 +4105,7 @@ class DataTree extends Module{
 		}
 
 		childArray.forEach((childData) => {
-			var childRow = new Row$1(childData || {}, this.table.rowManager);
+			var childRow = new Row(childData || {}, this.table.rowManager);
 
 			childRow.create();
 
@@ -4155,7 +4182,7 @@ class DataTree extends Module{
 			}
 
 			children.forEach((childRow) => {
-				if(childRow instanceof Row$1){
+				if(childRow instanceof Row){
 					output.push(childRow);
 				}
 			});
@@ -4226,7 +4253,7 @@ class DataTree extends Module{
 
 		if(typeof subject == "object"){
 
-			if(subject instanceof Row$1){
+			if(subject instanceof Row){
 				//subject is row element
 				match = subject.data;
 			}else if(subject instanceof RowComponent){
@@ -4235,7 +4262,7 @@ class DataTree extends Module{
 			}else if(typeof HTMLElement !== "undefined" && subject instanceof HTMLElement){
 				if(parent.modules.dataTree){
 					match = parent.modules.dataTree.children.find((childRow) => {
-						return childRow instanceof Row$1 ? childRow.element === subject : false;
+						return childRow instanceof Row ? childRow.element === subject : false;
 					});
 
 					if(match){
@@ -4280,7 +4307,7 @@ class DataTree extends Module{
 			}
 
 			config.children.forEach((childRow) => {
-				if(childRow instanceof Row$1){
+				if(childRow instanceof Row){
 					output.push(component ? childRow.getComponent() : childRow);
 
 					if(recurse){
@@ -4295,7 +4322,7 @@ class DataTree extends Module{
 
 	checkForRestyle(cell){
 		if(!cell.row.cells.indexOf(cell)){
-			cell.row.reinitialize();
+			this.layoutRow(cell.row);
 		}
 	}
 
@@ -5603,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";
 
@@ -6080,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";
 
@@ -6395,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] && element.getElementsByTagName("div")[0].getAttribute("max")) || 100) : editorParams.max,
+	min = typeof editorParams.min === "undefined" ? ((element.getElementsByTagName("div")[0] && element.getElementsByTagName("div")[0].getAttribute("min")) || 0) : editorParams.min,
 	percent = (max - min) / 100,
 	value = cell.getValue() || 0,
 	handle = document.createElement("div"),
@@ -6768,7 +6795,7 @@ class Edit extends Module{
 					nextCell = this.findNextEditableCell(prevRow, prevRow.cells.length);
 
 					if(nextCell){
-						nextCell.edit();
+						nextCell.getComponent().edit();
 						return true;
 					}
 				}
@@ -6799,7 +6826,7 @@ class Edit extends Module{
 					nextCell = this.findNextEditableCell(nextRow, -1);
 
 					if(nextCell){
-						nextCell.edit();
+						nextCell.getComponent().edit();
 						return true;
 					}
 				}
@@ -6823,7 +6850,7 @@ class Edit extends Module{
 			nextCell = this.findPrevEditableCell(cell.row, index);
 
 			if(nextCell){
-				nextCell.edit();
+				nextCell.getComponent().edit();
 				return true;
 			}
 		}
@@ -6845,7 +6872,7 @@ class Edit extends Module{
 			nextCell = this.findNextEditableCell(cell.row, index);
 
 			if(nextCell){
-				nextCell.edit();
+				nextCell.getComponent().edit();
 				return true;
 			}
 		}
@@ -6867,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;
 			}
 		}
@@ -6889,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;
 			}
 		}
@@ -8091,6 +8118,7 @@ class Filter extends Module{
 		this.prevHeaderFilterChangeCheck = "{}";
 
 		this.changed = false; //has filtering changed since last render
+		this.tableInitialized = false;
 
 		this.registerTableOption("filterMode", "local"); //local or remote filtering
 
@@ -8158,6 +8186,8 @@ class Filter extends Module{
 				}
 			});
 		}
+
+		this.tableInitialized = true;
 	}
 
 	remoteFilterParams(data, config, silent, params){
@@ -8621,10 +8651,12 @@ class Filter extends Module{
 	}
 
 	refreshFilter(){
-		if(this.table.options.filterMode === "remote"){
-			this.reloadData();
-		}else {
-			this.refreshData();
+		if(this.tableInitialized){
+			if(this.table.options.filterMode === "remote"){
+				this.reloadData();
+			}else {
+				this.refreshData(true);
+			}
 		}
 
 		//TODO - Persist left position of row manager
@@ -8968,10 +9000,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;
@@ -8980,6 +9014,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(".");
 
@@ -8992,7 +9031,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){
@@ -9134,7 +9173,7 @@ function datetime(cell, formatterParams, onRendered){
 	var value = cell.getValue();
 
 	if(typeof DT != "undefined"){
-		var newDatetime = (window.DateTime || luxon.DateTime).fromFormat(value, inputFormat);
+		var newDatetime = DT.fromFormat(String(value), inputFormat);
 
 		if(newDatetime.isValid){
 
@@ -9145,7 +9184,7 @@ function datetime(cell, formatterParams, onRendered){
 			return newDatetime.toFormat(outputFormat);
 		}else {
 
-			if(invalid === true){
+			if(invalid === true || !value){
 				return value;
 			}else if(typeof invalid === "function"){
 				return invalid(value);
@@ -9169,7 +9208,7 @@ function datetimediff (cell, formatterParams, onRendered) {
 	var value = cell.getValue();
 
 	if(typeof DT != "undefined"){
-		var newDatetime = DT.fromFormat(value, inputFormat);
+		var newDatetime = DT.fromFormat(String(value), inputFormat);
 
 		if (newDatetime.isValid){
 			if(humanize);else {
@@ -9879,12 +9918,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){
 
@@ -10119,7 +10179,10 @@ class FrozenRows extends Module{
 
 		if(index > -1){
 			var rowEl = row.getElement();
-			rowEl.parentNode.removeChild(rowEl);
+
+			if(rowEl.parentNode){
+				rowEl.parentNode.removeChild(rowEl);
+			}
 
 			this.rows.splice(index, 1);
 		}
@@ -10242,10 +10305,16 @@ class Group{
 				group.wipe();
 			});
 		}else {
-			this.element = false;
-			this.arrowElement = false;
-			this.elementContents = false;
+			this.rows.forEach((row) => {
+				if(row.modules){
+					delete row.modules.group;
+				}
+			});
 		}
+
+		this.element = false;
+		this.arrowElement = false;
+		this.elementContents = false;
 	}
 
 	createElements(){
@@ -10467,7 +10536,7 @@ class Group{
 			}
 
 			this.generateGroupHeaderContents();
-
+			
 			if(this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.options.columnCalcs != "table"){
 				this.groupManager.table.modules.columnCalcs.recalcGroup(this);
 			}
@@ -10808,7 +10877,7 @@ class Group{
 		this.initialized = false;
 		this.height = 0;
 
-		if(Helpers$1.elVisible(this.element)){
+		if(Helpers.elVisible(this.element)){
 			this.initialize(true);
 		}
 	}
@@ -10891,6 +10960,34 @@ class GroupRows extends Module{
 
 	//initialize group configuration
 	initialize(){
+		if(this.table.options.groupBy){
+
+			this.configureGroupSetup();
+
+			if(this.table.options.groupUpdateOnCellEdit){
+				this.subscribe("cell-value-updated", this.cellUpdated.bind(this));
+				this.subscribe("row-data-changed", this.reassignRowToGroup.bind(this), 0);
+			}
+
+			this.subscribe("row-deleting", this.rowDeleting.bind(this));
+			this.subscribe("row-deleted", this.rowsUpdated.bind(this));
+			this.subscribe("scroll-horizontal", this.scrollHeaders.bind(this));
+			this.subscribe("rows-wipe", this.wipe.bind(this));
+			this.subscribe("rows-added", this.rowsUpdated.bind(this));
+			this.subscribe("row-moving", this.rowMoving.bind(this));
+			this.subscribe("row-adding-index", this.rowAddingIndex.bind(this));
+
+			this.subscribe("rows-sample", this.rowSample.bind(this));
+
+			this.subscribe("render-virtual-fill", this.virtualRenderFill.bind(this));
+
+			this.registerDisplayHandler(this.displayHandler, 20);
+
+			this.initialized = true;
+		}
+	}
+
+	configureGroupSetup(){
 		if(this.table.options.groupBy){
 			var groupBy = this.table.options.groupBy,
 			startOpen = this.table.options.groupStartOpen,
@@ -10978,27 +11075,6 @@ class GroupRows extends Module{
 			if(groupHeader){
 				this.headerGenerator = Array.isArray(groupHeader) ? groupHeader : [groupHeader];
 			}
-
-			if(this.table.options.groupUpdateOnCellEdit){
-				this.subscribe("cell-value-updated", this.cellUpdated.bind(this));
-				this.subscribe("row-data-changed", this.reassignRowToGroup.bind(this), 0);
-			}
-
-			this.subscribe("row-deleting", this.rowDeleting.bind(this));
-			this.subscribe("row-deleted", this.rowsUpdated.bind(this));
-			this.subscribe("scroll-horizontal", this.scrollHeaders.bind(this));
-			this.subscribe("rows-wipe", this.wipe.bind(this));
-			this.subscribe("rows-added", this.rowsUpdated.bind(this));
-			this.subscribe("row-moving", this.rowMoving.bind(this));
-			this.subscribe("row-adding-index", this.rowAddingIndex.bind(this));
-
-			this.subscribe("rows-sample", this.rowSample.bind(this));
-
-			this.subscribe("render-virtual-fill", this.virtualRenderFill.bind(this));
-
-			this.registerDisplayHandler(this.displayHandler, 20);
-
-			this.initialized = true;
 		}
 	}
 
@@ -11063,23 +11139,28 @@ class GroupRows extends Module{
 
 	setGroupBy(groups){
 		this.table.options.groupBy = groups;
-		this.initialize();
-		this.refreshData(false, "display");
+		if(!this.initialized){
+			this.initialize();
+		}else {
+			this.configureGroupSetup();
+		}
+
+		this.refreshData();
 
 		this.trackChanges();
 	}
 
 	setGroupValues(groupValues){
 		this.table.options.groupValues = groupValues;
-		this.initialize();
-		this.refreshData(false, "display");
+		this.configureGroupSetup();
+		this.refreshData();
 
 		this.trackChanges();
 	}
 
 	setGroupStartOpen(values){
 		this.table.options.groupStartOpen = values;
-		this.initialize();
+		this.configureGroupSetup();
 
 		if(this.table.options.groupBy){
 			this.refreshData();
@@ -11092,7 +11173,7 @@ class GroupRows extends Module{
 
 	setGroupHeader(values){
 		this.table.options.groupHeader = values;
-		this.initialize();
+		this.configureGroupSetup();
 
 		if(this.table.options.groupBy){
 			this.refreshData();
@@ -11173,7 +11254,7 @@ class GroupRows extends Module{
 
 	//return appropriate rows with group headers
 	getRows(rows){
-		if(this.groupIDLookups.length){
+		if(this.table.options.groupBy && this.groupIDLookups.length){
 
 			this.dispatchExternal("dataGrouping");
 
@@ -11288,7 +11369,7 @@ class GroupRows extends Module{
 		var oldGroups = this.groups;
 
 		this.groups = {};
-		this.groupList =[];
+		this.groupList = [];
 
 		if(this.allowedValues && this.allowedValues[0]){
 			this.allowedValues[0].forEach((value) => {
@@ -11417,6 +11498,7 @@ GroupRows.moduleName = "groupRows";
 var defaultUndoers = {
 	cellEdit: function(action){
 		action.component.setValueProcessData(action.data.oldValue);
+		action.component.cellRendered();
 	},
 
 	rowAdd: function(action){
@@ -11442,6 +11524,7 @@ var defaultUndoers = {
 var defaultRedoers = {
 	cellEdit: function(action){
 		action.component.setValueProcessData(action.data.newValue);
+		action.component.cellRendered();
 	},
 
 	rowAdd: function(action){
@@ -11519,7 +11602,7 @@ class History extends Module{
 			}
 		}
 
-		this.history.action("rowDelete", row, {data:row.getData(), pos:!index, index:index});
+		this.action("rowDelete", row, {data:row.getData(), pos:!index, index:index});
 	}
 
 	cellUpdated(cell){
@@ -11638,17 +11721,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"),
@@ -11661,7 +11744,7 @@ class HtmlTableImport extends Module{
 
 		rows = rows ? rows.getElementsByTagName("tr") : [];
 
-		//check for tablator inline options
+		//check for Tabulator inline options
 		this._extractOptions(element, options);
 
 		if(headers.length){
@@ -11692,34 +11775,15 @@ 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
 	_extractOptions(element, options, defaultOptions){
 		var attributes = element.attributes;
-		var optionsArr = defaultOptions ? Object.assign([], defaultOptions) : Object.keys(options);
+		var optionsArr = defaultOptions ? Object.keys(defaultOptions) : Object.keys(options);
 		var optionsList = {};
 
 		optionsArr.forEach((item) => {
@@ -11786,11 +11850,8 @@ class HtmlTableImport extends Module{
 				col.width = width;
 			}
 
-			//check for tablator inline options
-			header.attributes;
-
-			// //check for tablator inline options
-			this._extractOptions(header, col, Column.prototype.defaultOptionList);
+			//check for Tabulator inline options
+			this._extractOptions(header, col, this.table.columnManager.optionsList.registeredDefaults);
 
 			this.fieldIndex[index] = col.field;
 
@@ -12110,7 +12171,7 @@ class Interaction extends Module{
 
 		if(this.columnSubscribers[action]){
 
-			if(component instanceof Cell$1){
+			if(component instanceof Cell){
 				callback = component.column.definition[action];
 			}else if(component instanceof Column$1){
 				callback = component.definition[action];
@@ -12696,7 +12757,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;
 		}
@@ -12767,10 +12828,10 @@ class Menu extends Module{
 Menu.moduleName = "menu";
 
 class MoveColumns extends Module{
-
+	
 	constructor(table){
 		super(table);
-
+		
 		this.placeholderElement = this.createPlaceholderElement();
 		this.hoverElement = false; //floating column header element
 		this.checkTimeout = false; //click check timeout holder
@@ -12783,38 +12844,39 @@ class MoveColumns extends Module{
 		this.autoScrollStep = 5; //auto scroll distance in pixels
 		this.autoScrollTimeout = false; //auto scroll timeout
 		this.touchMove = false;
-
+		
 		this.moveHover = this.moveHover.bind(this);
 		this.endMove = this.endMove.bind(this);
-
+		
 		this.registerTableOption("movableColumns", false); //enable movable columns
 	}
-
+	
 	createPlaceholderElement(){
 		var el = document.createElement("div");
-
+		
 		el.classList.add("tabulator-col");
 		el.classList.add("tabulator-col-placeholder");
-
+		
 		return el;
 	}
-
+	
 	initialize(){
-		this.subscribe("column-init", this.initializeColumn.bind(this));
+		if(this.table.options.movableColumns){
+			this.subscribe("column-init", this.initializeColumn.bind(this));
+		}
 	}
-
+	
 	initializeColumn(column){
 		var self = this,
 		config = {},
 		colEl;
-
+		
 		if(!column.modules.frozen){
-
 			colEl = column.getElement();
-
+			
 			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);
@@ -12827,7 +12889,7 @@ class MoveColumns extends Module{
 					}
 				}
 			}.bind(self);
-
+			
 			colEl.addEventListener("mousedown", function(e){
 				self.touchMove = false;
 				if(e.which === 1){
@@ -12836,7 +12898,7 @@ class MoveColumns extends Module{
 					}, self.checkPeriod);
 				}
 			});
-
+			
 			colEl.addEventListener("mouseup", function(e){
 				if(e.which === 1){
 					if(self.checkTimeout){
@@ -12844,18 +12906,18 @@ class MoveColumns extends Module{
 					}
 				}
 			});
-
+			
 			self.bindTouchEvents(column);
 		}
-
+		
 		column.modules.moveColumn = config;
 	}
-
+	
 	bindTouchEvents(column){
 		var colEl = column.getElement(),
 		startXMove = false, //shifting center position of the cell
 		nextCol, prevCol, nextColWidth, prevColWidth, nextColWidthLast, prevColWidthLast;
-
+		
 		colEl.addEventListener("touchstart", (e) => {
 			this.checkTimeout = setTimeout(() => {
 				this.touchMove = true;
@@ -12866,27 +12928,27 @@ class MoveColumns extends Module{
 				nextColWidthLast = 0;
 				prevColWidthLast = 0;
 				startXMove = false;
-
+				
 				this.startMove(e, column);
 			}, this.checkPeriod);
 		}, {passive: true});
-
+		
 		colEl.addEventListener("touchmove", (e) => {
 			var diff, moveToCol;
-
+			
 			if(this.moving){
 				this.moveHover(e);
-
+				
 				if(!startXMove){
 					startXMove = e.touches[0].pageX;
 				}
-
+				
 				diff = e.touches[0].pageX - startXMove;
-
+				
 				if(diff > 0){
 					if(nextCol && diff - nextColWidthLast > nextColWidth){
 						moveToCol = nextCol;
-
+						
 						if(moveToCol !== column){
 							startXMove = e.touches[0].pageX;
 							moveToCol.getElement().parentNode.insertBefore(this.placeholderElement, moveToCol.getElement().nextSibling);
@@ -12896,7 +12958,7 @@ class MoveColumns extends Module{
 				}else {
 					if(prevCol && -diff - prevColWidthLast >  prevColWidth){
 						moveToCol = prevCol;
-
+						
 						if(moveToCol !== column){
 							startXMove = e.touches[0].pageX;
 							moveToCol.getElement().parentNode.insertBefore(this.placeholderElement, moveToCol.getElement());
@@ -12904,7 +12966,7 @@ class MoveColumns extends Module{
 						}
 					}
 				}
-
+				
 				if(moveToCol){
 					nextCol = moveToCol.nextColumn();
 					nextColWidthLast = nextColWidth;
@@ -12915,7 +12977,7 @@ class MoveColumns extends Module{
 				}
 			}
 		}, {passive: true});
-
+		
 		colEl.addEventListener("touchend", (e) => {
 			if(this.checkTimeout){
 				clearTimeout(this.checkTimeout);
@@ -12925,41 +12987,43 @@ class MoveColumns extends Module{
 			}
 		});
 	}
-
+	
 	startMove(e, column){
-		var element = column.getElement();
-
+		var element = column.getElement(),
+		headerElement = this.table.columnManager.getElement(),
+		headersElement = this.table.columnManager.getHeadersElement();
+		
 		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");
-
+		
 		//create placeholder
 		this.placeholderElement.style.width = column.getWidth() + "px";
 		this.placeholderElement.style.height = column.getHeight() + "px";
-
+		
 		element.parentNode.insertBefore(this.placeholderElement, element);
 		element.parentNode.removeChild(element);
-
+		
 		//create hover element
 		this.hoverElement = element.cloneNode(true);
 		this.hoverElement.classList.add("tabulator-moving");
-
+		
 		this.table.columnManager.getElement().appendChild(this.hoverElement);
-
+		
 		this.hoverElement.style.left = "0";
-		this.hoverElement.style.bottom = "0";
-
+		this.hoverElement.style.bottom = (headerElement.clientHeight - headersElement.offsetHeight) + "px";
+		
 		if(!this.touchMove){
 			this._bindMouseMove();
-
+			
 			document.body.addEventListener("mousemove", this.moveHover);
 			document.body.addEventListener("mouseup", this.endMove);
 		}
-
+		
 		this.moveHover(e);
 	}
-
+	
 	_bindMouseMove(){
 		this.table.columnManager.columnsByIndex.forEach(function(column){
 			if(column.modules.moveColumn.mousemove){
@@ -12967,7 +13031,7 @@ class MoveColumns extends Module{
 			}
 		});
 	}
-
+	
 	_unbindMouseMove(){
 		this.table.columnManager.columnsByIndex.forEach(function(column){
 			if(column.modules.moveColumn.mousemove){
@@ -12975,65 +13039,65 @@ class MoveColumns extends Module{
 			}
 		});
 	}
-
+	
 	moveColumn(column, after){
 		var movingCells = this.moving.getCells();
-
+		
 		this.toCol = column;
 		this.toColAfter = after;
-
+		
 		if(after){
 			column.getCells().forEach(function(cell, i){
 				var cellEl = cell.getElement(true);
-
-				if(cellEl.parentNode){
+				
+				if(cellEl.parentNode && movingCells[i]){
 					cellEl.parentNode.insertBefore(movingCells[i].getElement(), cellEl.nextSibling);
 				}
 			});
 		}else {
 			column.getCells().forEach(function(cell, i){
 				var cellEl = cell.getElement(true);
-
-				if(cellEl.parentNode){
+				
+				if(cellEl.parentNode && movingCells[i]){
 					cellEl.parentNode.insertBefore(movingCells[i].getElement(), cellEl);
 				}
 			});
 		}
 	}
-
+	
 	endMove(e){
 		if(e.which === 1 || this.touchMove){
 			this._unbindMouseMove();
-
+			
 			this.placeholderElement.parentNode.insertBefore(this.moving.getElement(), this.placeholderElement.nextSibling);
 			this.placeholderElement.parentNode.removeChild(this.placeholderElement);
 			this.hoverElement.parentNode.removeChild(this.hoverElement);
-
+			
 			this.table.element.classList.remove("tabulator-block-select");
-
+			
 			if(this.toCol){
 				this.table.columnManager.moveColumnActual(this.moving, this.toCol, this.toColAfter);
 			}
-
+			
 			this.moving = false;
 			this.toCol = false;
 			this.toColAfter = false;
-
+			
 			if(!this.touchMove){
 				document.body.removeEventListener("mousemove", this.moveHover);
 				document.body.removeEventListener("mouseup", this.endMove);
 			}
 		}
 	}
-
+	
 	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";
-
+		
 		if(xPos - scrollLeft < this.autoScrollMargin){
 			if(!this.autoScrollTimeout){
 				this.autoScrollTimeout = setTimeout(() => {
@@ -13043,7 +13107,7 @@ class MoveColumns extends Module{
 				}, 1);
 			}
 		}
-
+		
 		if(scrollLeft + columnHolder.clientWidth - xPos < this.autoScrollMargin){
 			if(!this.autoScrollTimeout){
 				this.autoScrollTimeout = setTimeout(() => {
@@ -13131,7 +13195,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);
@@ -13165,7 +13229,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);
@@ -14019,7 +14083,8 @@ class Page extends Module{
 			margin = this.table.options.progressiveLoadScrollMargin || (element.clientHeight * 2);
 
 			if(diff < margin){
-				this.nextPage();
+				this.nextPage()
+				.catch(() => {}); //consume the exception thrown when on the last page
 			}
 		}
 	}
@@ -16257,10 +16322,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({
@@ -16344,9 +16413,9 @@ class SelectRow extends Module{
 			this.subscribe("row-init", this.initializeRow.bind(this));
 			this.subscribe("row-deleting", this.rowDeleted.bind(this));
 			this.subscribe("rows-wipe", this.clearSelectionData.bind(this));
-			this.subscribe("rows-retrieve", this.clearSelectionData.bind(this));
+			this.subscribe("rows-retrieve", this.rowRetrieve.bind(this));
 
-			if(this.table.options.selectable && this.table.options.selectablePersistence){
+			if(this.table.options.selectable && !this.table.options.selectablePersistence){
 				this.subscribe("data-refeshing", this.deselectRows.bind(this));
 			}
 		}
@@ -16360,7 +16429,6 @@ class SelectRow extends Module{
 		this._deselectRow(row, true);
 	}
 
-
 	clearSelectionData(silent){
 		this.selecting = false;
 		this.lastClickedRow = false;
@@ -16608,6 +16676,7 @@ class SelectRow extends Module{
 		var self = this,
 		rowCount;
 
+		console.trace("deselect");
 		if(typeof rows == "undefined"){
 
 			rowCount = self.selectedRows.length;
@@ -16825,8 +16894,9 @@ function datetime$1(a, b, aRow, bRow, column, dir, params){
 	emptyAlign = 0;
 
 	if(typeof DT != "undefined"){
-		a = DT.fromFormat(a, format);
-		b = DT.fromFormat(b, format);
+		a = DT.fromFormat(String(a), format);
+		b = DT.fromFormat(String(b), format);
+
 		if(!a.isValid){
 			emptyAlign = !b.isValid ? 0 : -1;
 		}else if(!b.isValid){
@@ -17197,7 +17267,7 @@ class Sort extends Module{
 		if(this.table.options.sortMode === "remote"){
 			this.reloadData();
 		}else {
-			this.refreshData();
+			this.refreshData(true);
 		}
 
 		//TODO - Persist left position of row manager
@@ -17851,7 +17921,7 @@ var modules = /*#__PURE__*/Object.freeze({
 	ValidateModule: Validate
 });
 
-var defaultOptions$1 = {
+var defaultOptions = {
 
 	debugEventsExternal:false, //flag to console log events
 	debugEventsInternal:false, //flag to console log events
@@ -17913,10 +17983,10 @@ var defaultOptions$1 = {
 };
 
 class OptionsList {
-	constructor(table, msgType){
+	constructor(table, msgType, defaults = {}){
 		this.table = table;
 		this.msgType = msgType;
-		this.registeredDefaults = {};
+		this.registeredDefaults = Object.assign({}, defaults);
 	}
 
 	register(option, value){
@@ -18097,8 +18167,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;
@@ -18656,7 +18726,7 @@ class ColumnManager extends CoreFeature {
 		this.columnsByIndex = []; //columns by index
 		this.columnsByField = {}; //columns by field
 		this.scrollLeft = 0;
-		this.optionsList = new OptionsList(this.table, "column definition");
+		this.optionsList = new OptionsList(this.table, "column definition", defaultColumnOptions);
 
 		this.renderer = null;
 	}
@@ -18701,6 +18771,7 @@ class ColumnManager extends CoreFeature {
 		var el = document.createElement("div");
 
 		el.classList.add("tabulator-headers");
+		el.setAttribute("role", "row");
 
 		return el;
 	}
@@ -18709,6 +18780,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");
@@ -18867,9 +18939,9 @@ 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();
+			var topColumn = nextToColumn.getTopColumn();
+			var parentIndex = this.columns.indexOf(topColumn);
+			var nextEl = topColumn.getElement();
 
 			if(before){
 				this.columns.splice(parentIndex, 0, column);
@@ -18878,7 +18950,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);
@@ -18887,10 +18958,10 @@ class ColumnManager extends CoreFeature {
 				this.columns.push(column);
 				this.headersElement.appendChild(column.getElement());
 			}
-
-			column.columnRendered();
 		}
 
+		column.columnRendered();
+
 		return column;
 	}
 
@@ -18913,7 +18984,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) => {
@@ -19070,7 +19141,7 @@ class ColumnManager extends CoreFeature {
 			to.element.parentNode.insertBefore(to.element, from.element);
 		}
 
-		this._verticalAlignHeaders();
+		this.verticalAlignHeaders();
 
 		this.table.rowManager.reinitialize();
 	}
@@ -19245,13 +19316,11 @@ class ColumnManager extends CoreFeature {
 
 			this.dispatch("column-add", definition, before, nextToColumn);
 
-			this.redraw(true);
-
 			if(this.layoutMode() != "fitColumns"){
 				column.reinitializeWidth();
 			}
 
-			this._verticalAlignHeaders();
+			this.redraw(true);
 
 			this.table.rowManager.reinitialize();
 
@@ -19285,18 +19354,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();
 		}
@@ -19370,7 +19439,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));
 	}
@@ -19378,7 +19447,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){
@@ -19640,7 +19709,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;
@@ -19999,6 +20068,7 @@ class RowManager extends CoreFeature{
 
 		el.classList.add("tabulator-tableholder");
 		el.setAttribute("tabindex", 0);
+		el.setAttribute("role", "rowgroup");
 
 		return el;
 	}
@@ -20007,6 +20077,7 @@ class RowManager extends CoreFeature{
 		var el = document.createElement("div");
 
 		el.classList.add("tabulator-table");
+		el.setAttribute("role", "rowgroup");
 
 		return el;
 	}
@@ -20068,7 +20139,7 @@ class RowManager extends CoreFeature{
 	////////////////// Row Manipulation //////////////////
 	findRow(subject){
 		if(typeof subject == "object"){
-			if(subject instanceof Row$1){
+			if(subject instanceof Row){
 				//subject is row element
 				return subject;
 			}else if(subject instanceof RowComponent$1){
@@ -20151,7 +20222,7 @@ class RowManager extends CoreFeature{
 
 			data.forEach((def, i) => {
 				if(def && typeof def === "object"){
-					var row = new Row$1(def, this);
+					var row = new Row(def, this);
 					this.rows.push(row);
 				}else {
 					console.warn("Data Loading Warning - Invalid row data detected and ignored, expecting object but received:", def);
@@ -20254,7 +20325,7 @@ class RowManager extends CoreFeature{
 				this.dispatch("row-added", row, data, pos, index);
 			});
 
-			this.reRenderInPosition();
+			this.refreshActiveData(false, false, true);
 
 			this.regenerateRowNumbers();
 
@@ -20283,7 +20354,7 @@ class RowManager extends CoreFeature{
 	}
 
 	addRowActual(data, pos, index, blockRedraw){
-		var row = data instanceof Row$1 ? data : new Row$1(data || {}, this),
+		var row = data instanceof Row ? data : new Row(data || {}, this),
 		top = this.findAddRowPos(pos),
 		allIndex = -1,
 		activeIndex, chainResult;
@@ -20442,7 +20513,7 @@ class RowManager extends CoreFeature{
 			nextRow = this.getDisplayRows()[index+1];
 		}
 
-		if(nextRow && (!(nextRow instanceof Row$1) || nextRow.type != "row")){
+		if(nextRow && (!(nextRow instanceof Row) || nextRow.type != "row")){
 			return this.nextDisplayRow(nextRow, rowOnly);
 		}
 
@@ -20457,7 +20528,7 @@ class RowManager extends CoreFeature{
 			prevRow = this.getDisplayRows()[index-1];
 		}
 
-		if(rowOnly && prevRow && (!(prevRow instanceof Row$1) || prevRow.type != "row")){
+		if(rowOnly && prevRow && (!(prevRow instanceof Row) || prevRow.type != "row")){
 			return this.prevDisplayRow(prevRow, rowOnly);
 		}
 
@@ -20636,7 +20707,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 {
@@ -20799,13 +20870,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){
@@ -21085,7 +21156,7 @@ class InteractionManager extends CoreFeature {
 	constructor (table){
 		super(table);
 
-		this.el = this.table.element;
+		this.el = null;
 
 		this.abortClasses = ["tabulator-headers", "tabulator-table"];
 
@@ -21110,7 +21181,10 @@ class InteractionManager extends CoreFeature {
 			"tabulator-group":"group",
 			"tabulator-col":"column",
 		};
+	}
 
+	initialize(){
+		this.el = this.table.element;
 		this.buildListenerMap();
 		this.bindSubscriptionWatchers();
 	}
@@ -21288,7 +21362,7 @@ class InteractionManager extends CoreFeature {
 	}
 }
 
-class ComponentFuctionBinder{
+class ComponentFunctionBinder{
 
 	constructor(table){
 		this.table = table;
@@ -22174,7 +22248,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);
@@ -22266,7 +22340,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);
@@ -22501,10 +22575,11 @@ class Tabulator {
 		this.interactionMonitor = false; //track user interaction
 		this.browser = ""; //hold current browser type
 		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.browserMobile = false; //check if running on mobile, prevent resize cancelling edit on keyboard appearance
 		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.componentFunctionBinder = new ComponentFunctionBinder(this); //bind component functions
 		this.dataLoader = false; //bind component functions
 
 		this.modules = {}; //hold all modules bound to this table
@@ -22519,13 +22594,13 @@ class Tabulator {
 
 			this.initialzeCoreSystems(options);
 
-			//delay table creation to allow event bindings immediatly after the constructor
+			//delay table creation to allow event bindings immediately after the constructor
 			setTimeout(() => {
 				this._create();
 			});
 		}
 
-		TableRegistry.register(this); //register table for inderdevice communication
+		TableRegistry.register(this); //register table for inter-device communication
 	}
 
 	initializeElement(element){
@@ -22559,7 +22634,7 @@ class Tabulator {
 
 		this._clearObjectPointers();
 
-		this._mapDepricatedFunctionality();
+		this._mapDeprecatedFunctionality();
 
 		this.externalEvents = new ExternalEventBus(this, this.options, this.options.debugEventsExternal);
 		this.eventBus = new InternalEventBus(this.options.debugEventsInternal);
@@ -22572,29 +22647,8 @@ 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(){
+	//convert deprecated functionality to new functions
+	_mapDeprecatedFunctionality(){
 		//all previously deprecated functionality removed in the 5.0 release
 	}
 
@@ -22615,15 +22669,17 @@ class Tabulator {
 		this.element.classList.remove("tabulator-block-select");
 	}
 
-	//concreate table
+	//create table
 	_create(){
 		this.externalEvents.dispatch("tableBuilding");
 		this.eventBus.dispatch("table-building");
 
-		this.rtlCheck();
+		this._rtlCheck();
 
 		this._buildElement();
 
+		this._initializeTable();
+
 		this._loadInitialData();
 
 		this.initialized = true;
@@ -22631,6 +22687,27 @@ class Tabulator {
 		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
 	_clearObjectPointers(){
 		this.options.columns = this.options.columns.slice(0);
@@ -22643,7 +22720,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");
@@ -22668,6 +22766,14 @@ 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.interactionMonitor.initialize();
 
 		this.columnManager.initialize();
 		this.rowManager.initialize();
@@ -22683,7 +22789,6 @@ class Tabulator {
 
 		//configure placeholder element
 		if(typeof options.placeholder == "string"){
-
 			var el = document.createElement("div");
 			el.classList.add("tabulator-placeholder");
 
@@ -22728,7 +22833,7 @@ class Tabulator {
 	destroy(){
 		var element = this.element;
 
-		TableRegistry.deregister(this); //deregister table from inderdevice communication
+		TableRegistry.deregister(this); //deregister table from inter-device communication
 
 		this.eventBus.dispatch("table-destroy");
 
@@ -22847,68 +22952,80 @@ class Tabulator {
 
 	//replace data, keeping table in position with same sort
 	replaceData(data, params, config){
-		return this.dataLoader.load(data, params, config, true, true);
+		if(this.initialized){
+			return this.dataLoader.load(data, params, config, true, true);
+		}else {
+			console.warn("replaceData failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+		}
 	}
 
 	//update table data
 	updateData(data){
 		var responses = 0;
 
-		return new Promise((resolve, reject) => {
-			this.dataLoader.blockActiveLoad();
+		if(this.initialized){
+			return new Promise((resolve, reject) => {
+				this.dataLoader.blockActiveLoad();
 
-			if(typeof data === "string"){
-				data = JSON.parse(data);
-			}
+				if(typeof data === "string"){
+					data = JSON.parse(data);
+				}
 
-			if(data){
-				data.forEach((item) => {
-					var row = this.rowManager.findRow(item[this.options.index]);
+				if(data){
+					data.forEach((item) => {
+						var row = this.rowManager.findRow(item[this.options.index]);
 
-					if(row){
-						responses++;
+						if(row){
+							responses++;
 
-						row.updateData(item)
-						.then(()=>{
-							responses--;
+							row.updateData(item)
+							.then(()=>{
+								responses--;
 
-							if(!responses){
-								resolve();
-							}
-						});
-					}
-				});
-			}else {
-				console.warn("Update Error - No data provided");
-				reject("Update Error - No data provided");
-			}
-		});
+								if(!responses){
+									resolve();
+								}
+							});
+						}
+					});
+				}else {
+					console.warn("Update Error - No data provided");
+					reject("Update Error - No data provided");
+				}
+			});
+		}else {
+			console.warn("updateData failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+		}
 	}
 
 	addData(data, pos, index){
-		return new Promise((resolve, reject) => {
-			this.dataLoader.blockActiveLoad();
+		if(this.initialized){
+			return new Promise((resolve, reject) => {
+				this.dataLoader.blockActiveLoad();
 
-			if(typeof data === "string"){
-				data = JSON.parse(data);
-			}
+				if(typeof data === "string"){
+					data = JSON.parse(data);
+				}
 
-			if(data){
-				this.rowManager.addRows(data, pos, index)
-				.then((rows) => {
-					var output = [];
+				if(data){
+					this.rowManager.addRows(data, pos, index)
+					.then((rows) => {
+						var output = [];
 
-					rows.forEach(function(row){
-						output.push(row.getComponent());
-					});
+						rows.forEach(function(row){
+							output.push(row.getComponent());
+						});
 
-					resolve(output);
-				});
-			}else {
-				console.warn("Update Error - No data provided");
-				reject("Update Error - No data provided");
-			}
-		});
+						resolve(output);
+					});
+				}else {
+					console.warn("Update Error - No data provided");
+					reject("Update Error - No data provided");
+				}
+			});
+		}else {
+			console.warn("addData failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+		}
 	}
 
 	//update table data
@@ -22916,46 +23033,50 @@ class Tabulator {
 		var rows = [],
 		responses = 0;
 
-		return new Promise((resolve, reject) => {
-			this.dataLoader.blockActiveLoad();
+		if(this.initialized){
+			return new Promise((resolve, reject) => {
+				this.dataLoader.blockActiveLoad();
 
-			if(typeof data === "string"){
-				data = JSON.parse(data);
-			}
+				if(typeof data === "string"){
+					data = JSON.parse(data);
+				}
 
-			if(data){
-				data.forEach((item) => {
-					var row = this.rowManager.findRow(item[this.options.index]);
+				if(data){
+					data.forEach((item) => {
+						var row = this.rowManager.findRow(item[this.options.index]);
 
-					responses++;
+						responses++;
 
-					if(row){
-						row.updateData(item)
-						.then(()=>{
-							responses--;
-							rows.push(row.getComponent());
+						if(row){
+							row.updateData(item)
+							.then(()=>{
+								responses--;
+								rows.push(row.getComponent());
 
-							if(!responses){
-								resolve(rows);
-							}
-						});
-					}else {
-						this.rowManager.addRows(item)
-						.then((newRows)=>{
-							responses--;
-							rows.push(newRows[0].getComponent());
+								if(!responses){
+									resolve(rows);
+								}
+							});
+						}else {
+							this.rowManager.addRows(item)
+							.then((newRows)=>{
+								responses--;
+								rows.push(newRows[0].getComponent());
 
-							if(!responses){
-								resolve(rows);
-							}
-						});
-					}
-				});
-			}else {
-				console.warn("Update Error - No data provided");
-				reject("Update Error - No data provided");
-			}
-		});
+								if(!responses){
+									resolve(rows);
+								}
+							});
+						}
+					});
+				}else {
+					console.warn("Update Error - No data provided");
+					reject("Update Error - No data provided");
+				}
+			});
+		}else {
+			console.warn("updateOrAddData failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+		}
 	}
 
 	//get row object
@@ -23019,14 +23140,18 @@ class Tabulator {
 
 	//add row to table
 	addRow(data, pos, index){
-		if(typeof data === "string"){
-			data = JSON.parse(data);
-		}
+		if(this.initialized){
+			if(typeof data === "string"){
+				data = JSON.parse(data);
+			}
 
-		return this.rowManager.addRows(data, pos, index)
-		.then((rows)=>{
-			return rows[0].getComponent();
-		});
+			return this.rowManager.addRows(data, pos, index)
+			.then((rows)=>{
+				return rows[0].getComponent();
+			});
+		}else {
+			console.warn("addRow failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+		}
 	}
 
 	//update a row if it exitsts otherwise create it
@@ -23061,7 +23186,7 @@ class Tabulator {
 		if(row){
 			return row.updateData(data)
 			.then(()=>{
-				resolve(row.getComponent());
+				return Promise.resolve(row.getComponent());
 			})
 		}else {
 			console.warn("Update Error - No matching row found:", index);
@@ -23235,8 +23360,12 @@ class Tabulator {
 	//////////// General Public Functions ////////////
 	//redraw list without updating data
 	redraw(force){
-		this.columnManager.redraw(force);
-		this.rowManager.redraw(force);
+		if(this.initialized){
+			this.columnManager.redraw(force);
+			this.rowManager.redraw(force);
+		}else {
+			console.warn("redraw failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+		}
 	}
 
 	setHeight(height){
@@ -23287,7 +23416,7 @@ class Tabulator {
 }
 
 //default setup options
-Tabulator.defaultOptions = defaultOptions$1;
+Tabulator.defaultOptions = defaultOptions;
 
 //bind modules and static functionality
 new ModuleBinder(Tabulator);