tabulator-tables 5.0.1 → 5.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabulator-tables",
-  "version": "5.0.1",
+  "version": "5.0.6",
   "description": "Interactive table generation JavaScript library",
   "style": "dist/css/tabulator.css",
   "main": "dist/js/tabulator.js",

package/src/js/core/ColumnManager.js

@@ -64,6 +64,7 @@ export default class ColumnManager extends CoreFeature {
 		var el = document.createElement("div");
 
 		el.classList.add("tabulator-headers");
+		el.setAttribute("role", "row");
 
 		return el;
 	}
@@ -72,6 +73,7 @@ export default 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");
@@ -230,7 +232,6 @@ export default 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();
 
@@ -241,7 +242,6 @@ export default class ColumnManager extends CoreFeature {
 				this.columns.splice(parentIndex + 1, 0, column);
 				nextEl.parentNode.insertBefore(colEl, nextEl.nextSibling);
 			}
-
 		}else{
 			if(before){
 				this.columns.unshift(column);
@@ -250,10 +250,10 @@ export default class ColumnManager extends CoreFeature {
 				this.columns.push(column);
 				this.headersElement.appendChild(column.getElement());
 			}
-
-			column.columnRendered();
 		}
 
+		column.columnRendered();
+
 		return column;
 	}
 
@@ -276,7 +276,7 @@ export default 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) => {
@@ -433,7 +433,7 @@ export default class ColumnManager extends CoreFeature {
 			to.element.parentNode.insertBefore(to.element, from.element);
 		}
 
-		this._verticalAlignHeaders();
+		this.verticalAlignHeaders();
 
 		this.table.rowManager.reinitialize();
 	}
@@ -614,7 +614,7 @@ export default class ColumnManager extends CoreFeature {
 				column.reinitializeWidth();
 			}
 
-			this._verticalAlignHeaders();
+			this.verticalAlignHeaders();
 
 			this.table.rowManager.reinitialize();
 
@@ -648,18 +648,18 @@ export default class ColumnManager extends CoreFeature {
 			this.columns.splice(index, 1);
 		}
 
-		this._verticalAlignHeaders();
+		this.verticalAlignHeaders();
 
 		this.redraw();
 	}
 
 	//redraw columns
 	redraw(force){
-		if(force){
-			if(Helpers.elVisible(this.element)){
-				this._verticalAlignHeaders();
-			}
+		if(Helpers.elVisible(this.element)){
+			this.verticalAlignHeaders();
+		}
 
+		if(force){
 			this.table.rowManager.resetScroll();
 			this.table.rowManager.reinitialize();
 		}

package/src/js/core/FooterManager.js

@@ -14,7 +14,7 @@ export default class FooterManager extends CoreFeature{
 	}
 
 	initialize(){
-
+		this.initializeElement();
 	}
 
 	createElement (){
@@ -25,7 +25,7 @@ export default class FooterManager extends CoreFeature{
 		return el;
 	}
 
-	initializeElement(element){
+	initializeElement(){
 		if(this.table.options.footerElement){
 
 			switch(typeof this.table.options.footerElement){

package/src/js/core/RowManager.js

@@ -49,6 +49,7 @@ export default class RowManager extends CoreFeature{
 
 		el.classList.add("tabulator-tableholder");
 		el.setAttribute("tabindex", 0);
+		el.setAttribute("role", "rowgroup");
 
 		return el;
 	}
@@ -57,6 +58,7 @@ export default class RowManager extends CoreFeature{
 		var el = document.createElement("div");
 
 		el.classList.add("tabulator-table");
+		el.setAttribute("role", "rowgroup");
 
 		return el;
 	}
@@ -179,13 +181,12 @@ export default 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();
@@ -306,7 +307,7 @@ export default class RowManager extends CoreFeature{
 				this.dispatch("row-added", row, data, pos, index);
 			});
 
-			this.reRenderInPosition();
+			this.refreshActiveData(false, false, true);
 
 			this.regenerateRowNumbers();
 
@@ -854,13 +855,13 @@ export default 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){

package/src/js/core/Tabulator.js

@@ -35,6 +35,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
@@ -93,7 +94,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 InteractionMonitor(this);
@@ -104,28 +105,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
@@ -153,13 +132,39 @@ 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
@@ -174,7 +179,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");
@@ -199,6 +225,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();
@@ -214,7 +246,6 @@ class Tabulator {
 
 		//configure placeholder element
 		if(typeof options.placeholder == "string"){
-
 			var el = document.createElement("div");
 			el.classList.add("tabulator-placeholder");
 
@@ -234,7 +265,8 @@ class Tabulator {
 			this.footerManager.activate();
 		}
 
-		if(options.autoColumns && this.options.data){
+		if(options.autoColumns && options.data){
+
 			this.columnManager.generateColumnsFromRowData(this.options.data);
 		}
 
@@ -248,7 +280,6 @@ class Tabulator {
 		this.columnManager.setColumns(options.columns);
 
 		this.eventBus.dispatch("table-built");
-		this.externalEvents.dispatch("tableBuilt");
 	}
 
 	_loadInitialData(){
@@ -641,7 +672,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){

package/src/js/core/column/Column.js

@@ -668,7 +668,7 @@ class Column extends CoreFeature{
 				this.reinitializeWidth();
 			}
 
-			this.table.columnManager._verticalAlignHeaders();
+			this.table.columnManager.verticalAlignHeaders();
 
 			this.dispatch("column-show", this, responsiveToggle);
 
@@ -693,7 +693,7 @@ class Column extends CoreFeature{
 
 			this.element.style.display = "none";
 
-			this.table.columnManager._verticalAlignHeaders();
+			this.table.columnManager.verticalAlignHeaders();
 
 			if(this.parent.isGroup){
 				this.parent.checkColumnVisibility();

package/src/js/core/rendering/renderers/VirtualDomVertical.js

@@ -90,6 +90,10 @@ export default class VirtualDomVertical extends Renderer{
 			}
 		}
 
+		rows.forEach((row) => {
+			row.deinitializeHeight();
+		});
+
 		if(callback){
 			callback();
 		}

package/src/js/core/row/Row.js

@@ -104,6 +104,10 @@ export default class Row extends CoreFeature{
 		}
 	}
 
+	deinitializeHeight(){
+		this.heightInitialized = false;
+	}
+
 	reinitialize(children){
 		this.initialized = false;
 		this.heightInitialized = false;
@@ -160,7 +164,6 @@ export default class Row extends CoreFeature{
 
 	//normalize the height of elements in the row
 	normalizeHeight(force){
-
 		if(force){
 			this.clearCellHeight();
 		}

package/src/js/core/tools/DataLoader.js

@@ -89,7 +89,7 @@ export default 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{

package/src/js/core/tools/ExternalEventBus.js

@@ -1,6 +1,7 @@
 export default class ExternalEventBus {
 
-	constructor(optionsList, debug){
+	constructor(table, optionsList, debug){
+		this.table = table;
 		this.events = {};
 		this.optionsList = optionsList || {};
 		this.subscriptionNotifiers = {};
@@ -78,7 +79,7 @@ export default 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;

package/src/js/core/tools/Helpers.js

@@ -13,18 +13,35 @@ export default class Helpers{
 		};
 	}
 
-	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;
 	}
 }

package/src/js/core/tools/InteractionMonitor.js

@@ -94,6 +94,7 @@ export default 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{

package/src/js/core/tools/ModuleBinder.js

@@ -17,7 +17,7 @@ export default 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"){

package/src/js/modules/Accessor/Accessor.js

@@ -34,7 +34,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;
 

package/src/js/modules/Ajax/defaults/contentTypeFormatters.js

@@ -1,3 +1,23 @@
+function generateParamsList(data, prefix){
+	var output = [];
+
+	prefix = prefix || "";
+
+	if(Array.isArray(data)){
+		data.forEach((item, i) => {
+			output = output.concat(generateParamsList(item, prefix ? prefix + "[" + i + "]" : i));
+		});
+	}else if (typeof data === "object"){
+		for (var key in data){
+			output = output.concat(generateParamsList(data[key], prefix ? prefix + "[" + key + "]" : key));
+		}
+	}else{
+		output.push({key:prefix, value:data});
+	}
+
+	return output;
+}
+
 export default {
 	"json":{
 		headers:{
@@ -11,7 +31,8 @@ export default {
 		headers:{
 		},
 		body:function(url, config, params){
-			var output = this.generateParamsList(params),
+
+			var output = generateParamsList(params),
 			form = new FormData();
 
 			output.forEach(function(item){

package/src/js/modules/DataTree/DataTree.js

@@ -557,7 +557,7 @@ class DataTree extends Module{
 
 	checkForRestyle(cell){
 		if(!cell.row.cells.indexOf(cell)){
-			cell.row.reinitialize();
+			this.layoutRow(cell.row);
 		}
 	}
 

package/src/js/modules/Edit/Edit.js

@@ -1,4 +1,5 @@
 import Module from '../../core/Module.js';
+import Helpers from '../../core/tools/Helpers.js';
 
 import defaultEditors from './defaults/editors.js';
 
@@ -150,7 +151,7 @@ class Edit extends Module{
 					nextCell = this.findNextEditableCell(prevRow, prevRow.cells.length);
 
 					if(nextCell){
-						nextCell.edit();
+						nextCell.getComponent().edit();
 						return true;
 					}
 				}
@@ -181,7 +182,7 @@ class Edit extends Module{
 					nextCell = this.findNextEditableCell(nextRow, -1);
 
 					if(nextCell){
-						nextCell.edit();
+						nextCell.getComponent().edit();
 						return true;
 					}
 				}
@@ -205,7 +206,7 @@ class Edit extends Module{
 			nextCell = this.findPrevEditableCell(cell.row, index);
 
 			if(nextCell){
-				nextCell.edit();
+				nextCell.getComponent().edit();
 				return true;
 			}
 		}
@@ -227,7 +228,7 @@ class Edit extends Module{
 			nextCell = this.findNextEditableCell(cell.row, index);
 
 			if(nextCell){
-				nextCell.edit();
+				nextCell.getComponent().edit();
 				return true;
 			}
 		}
@@ -249,7 +250,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;
 			}
 		}
@@ -271,7 +272,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;
 			}
 		}

package/src/js/modules/Edit/defaults/editors/progress.js

@@ -1,8 +1,8 @@
 //draggable progress bar
 export default function(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"),

package/src/js/modules/Filter/Filter.js

@@ -549,7 +549,7 @@ class Filter extends Module{
 		if(this.table.options.filterMode === "remote"){
 			this.reloadData();
 		}else{
-			this.refreshData()
+			this.refreshData();
 		}
 
 		//TODO - Persist left position of row manager

package/src/js/modules/Format/defaults/formatters/money.js

@@ -1,9 +1,11 @@
 export default function(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;
@@ -12,6 +14,11 @@ export default function(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(".");
 
@@ -24,5 +31,5 @@ export default function(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;
 };

package/src/js/modules/FrozenColumns/FrozenColumns.js

@@ -135,12 +135,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){