tabulator-tables 5.0.10 → 5.1.0

package/package.json

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

package/src/js/core/RowManager.js

@@ -20,7 +20,7 @@ export default class RowManager extends CoreFeature{
 		this.fixedHeight = false; //current rendering mode
 
 		this.rows = []; //hold row data objects
-		this.activeRowsPipeline = []; //hold caluclation of active rows
+		this.activeRowsPipeline = []; //hold calculation of active rows
 		this.activeRows = []; //rows currently available to on display in the table
 		this.activeRowsCount = 0; //count of active rows
 
@@ -32,9 +32,9 @@ export default class RowManager extends CoreFeature{
 
 		this.rowNumColumn = false; //hold column component for row number column
 
-		this.redrawBlock = false; //prevent redraws to allow multiple data manipulations becore continuing
+		this.redrawBlock = false; //prevent redraws to allow multiple data manipulations before continuing
 		this.redrawBlockRestoreConfig = false; //store latest redraw function calls for when redraw is needed
-		this.redrawBlockRederInPosition = false; //store latest redraw function calls for when redraw is needed
+		this.redrawBlockRenderInPosition = false; //store latest redraw function calls for when redraw is needed
 
 		this.dataPipeline = []; //hold data pipeline tasks
 		this.displayPipeline = []; //hold data display pipeline tasks
@@ -709,7 +709,7 @@ export default class RowManager extends CoreFeature{
 				}
 			}
 
-			this.dispatch("data-refeshed");
+			this.dispatch("data-refreshed");
 		}
 	}
 
@@ -821,7 +821,7 @@ export default class RowManager extends CoreFeature{
 			if(callback){
 				callback();
 			}else{
-				this.redrawBlockRederInPosition = true;
+				this.redrawBlockRenderInPosition = true;
 			}
 		}else{
 			this.renderer.rerenderRows(callback);
@@ -1001,12 +1001,12 @@ export default class RowManager extends CoreFeature{
 
 			this.redrawBlockRestoreConfig = false;
 		}else{
-			if(this.redrawBlockRederInPosition){
+			if(this.redrawBlockRenderInPosition){
 				this.reRenderInPosition();
 			}
 		}
 
-		this.redrawBlockRederInPosition = false;
+		this.redrawBlockRenderInPosition = false;
 	}
 
 	//redraw table

package/src/js/core/Tabulator.js

@@ -341,49 +341,6 @@ class Tabulator {
 		return this.rowManager.restoreRedraw();
 	}
 
-	//local data from local file
-	setDataFromLocalFile(extensions){
-		return new Promise((resolve, reject) => {
-			var input = document.createElement("input");
-			input.type = "file";
-			input.accept = extensions || ".json,application/json";
-
-			input.addEventListener("change", (e) => {
-				var file = input.files[0],
-				reader = new FileReader(),
-				data;
-
-				reader.readAsText(file);
-
-				reader.onload = (e) => {
-
-					try {
-						data = JSON.parse(reader.result);
-					} catch(e) {
-						console.warn("File Load Error - File contents is invalid JSON", e);
-						reject(e);
-						return;
-					}
-
-					this.setData(data)
-					.then((data) => {
-						resolve(data);
-					})
-					.catch((err) => {
-						resolve(err);
-					});
-				};
-
-				reader.onerror = (e) => {
-					console.warn("File Load Error - Unable to read file");
-					reject();
-				};
-			});
-
-			input.click();
-		});
-	}
-
 	//load data
 	setData(data, params, config){
 		if(this.initialized){

package/src/js/core/cell/Cell.js

@@ -191,6 +191,10 @@ export default class Cell extends CoreFeature{
 
 			this.cellRendered();
 
+			if(this.column.definition.cellEdited){
+				this.column.definition.cellEdited.call(this.table, this.getComponent());
+			}
+
 			this.dispatchExternal("cellEdited", this.getComponent());
 
 			if(this.subscribedExternal("dataChanged")){
@@ -202,7 +206,7 @@ export default class Cell extends CoreFeature{
 	setValueProcessData(value, mutate){
 		var changed = false;
 
-		if(this.value != value){
+		if(this.value !== value){
 
 			changed = true;
 

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

@@ -30,6 +30,7 @@ class Column extends CoreFeature{
 		this.getFieldValue = "";
 		this.setFieldValue = "";
 
+		this.titleDownload = null;
 		this.titleFormatterRendered = false;
 
 		this.mapDefinitions();
@@ -42,6 +43,7 @@ class Column extends CoreFeature{
 		this.widthStyled = ""; //column width prestyled to improve render efficiency
 		this.maxWidth = null; //column maximum width
 		this.maxWidthStyled = ""; //column maximum prestyled to improve render efficiency
+		this.maxInitialWidth = null;
 		this.minWidth = null; //column minimum width
 		this.minWidthStyled = ""; //column minimum prestyled to improve render efficiency
 		this.widthFixed = false; //user has specified a width for this column
@@ -320,6 +322,10 @@ class Column extends CoreFeature{
 		//set min width if present
 		this.setMinWidth(parseInt(def.minWidth));
 
+		if (def.maxInitialWidth) {
+			this.maxInitialWidth = parseInt(def.maxInitialWidth);
+		}
+		
 		if(def.maxWidth){
 			this.setMaxWidth(parseInt(def.maxWidth));
 		}
@@ -571,6 +577,10 @@ class Column extends CoreFeature{
 		return this.field;
 	}
 
+	getTitleDownload() {
+		return this.titleDownload;
+	}
+
 	//return the first column in a group
 	getFirstColumn(){
 		if(!this.isGroup){
@@ -823,7 +833,7 @@ class Column extends CoreFeature{
 	}
 
 	getHeight(){
-		return this.element.offsetHeight;
+		return Math.ceil(this.element.getBoundingClientRect().height);
 	}
 
 	setMinWidth(minWidth){
@@ -928,18 +938,19 @@ class Column extends CoreFeature{
 
 		//set width if present
 		if(typeof this.definition.width !== "undefined" && !force){
+			// maxInitialWidth ignored here as width specified
 			this.setWidth(this.definition.width);
 		}
 
 		this.dispatch("column-width-fit-before", this);
 
-		this.fitToData();
+		this.fitToData(force);
 
 		this.dispatch("column-width-fit-after", this);
 	}
 
 	//set column width to maximum cell width for non group columns
-	fitToData(){
+	fitToData(force){
 		if(this.isGroup){
 			return;
 		}
@@ -964,7 +975,11 @@ class Column extends CoreFeature{
 			});
 
 			if(maxWidth){
-				this.setWidthActual(maxWidth + 1);
+				var setTo = maxWidth + 1;
+				if (this.maxInitialWidth && !force) {
+					setTo = Math.min(setTo, this.maxInitialWidth);
+				}
+				this.setWidthActual(setTo);
 			}
 		}
 	}

package/src/js/core/column/ColumnComponent.js

@@ -27,6 +27,10 @@ export default class ColumnComponent {
 		return this._column.getField();
 	}
 
+	getTitleDownload() {
+		return this._column.getTitleDownload();
+	}
+
 	getCells(){
 		var cells = [];
 

package/src/js/core/column/defaults/options.js

@@ -8,6 +8,7 @@ export default {
 	"width": undefined,
 	"minWidth": 40,
 	"maxWidth": undefined,
+	"maxInitialWidth": undefined,
 	"tooltip": undefined,
 	"cssClass": undefined,
 	"variableHeight": undefined,

package/src/js/core/defaults/options.js

@@ -8,7 +8,6 @@ export default {
 	minHeight:false, //minimum height of tabulator
 	maxHeight:false, //maximum height of tabulator
 
-	columnMaxWidth:false, //minimum global width for a column
 	columnHeaderVertAlign:"top", //vertical alignment of column headers
 
 	columns:[],//store for colum header info
@@ -53,8 +52,9 @@ export default {
 	dataLoader:true,
 	dataLoaderLoading:false,
 	dataLoaderError:false,
+	dataLoaderErrorTimeout:3000,
 
 	dataSendParams:{},
 
 	dataReceiveParams:{},
-}
+}

package/src/js/core/modules/optional.js

@@ -13,6 +13,7 @@ export {default as FrozenRowsModule} from '../../modules/FrozenRows/FrozenRows.j
 export {default as GroupRowsModule} from '../../modules/GroupRows/GroupRows.js';
 export {default as HistoryModule} from '../../modules/History/History.js';
 export {default as HtmlTableImportModule} from '../../modules/HtmlTableImport/HtmlTableImport.js';
+export {default as ImportModule} from '../../modules/Import/Import.js';
 export {default as InteractionModule} from '../../modules/Interaction/Interaction.js';
 export {default as KeybindingsModule} from '../../modules/Keybindings/Keybindings.js';
 export {default as MenuModule} from '../../modules/Menu/Menu.js';

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

@@ -52,7 +52,8 @@ export default class BaiscVertical extends Renderer{
 
 
 	rerenderRows(callback){
-		this.render();
+		this.clearRows();
+		this.renderRows();
 
 		if(callback){
 			callback();

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

@@ -25,10 +25,10 @@ export default class VirtualDomHorizontal extends Renderer{
 	}
 	
 	initialize(){
-		this.compatabilityCheck();
+		this.compatibilityCheck();
 	}
 	
-	compatabilityCheck(){
+	compatibilityCheck(){
 		var columns = this.options("columns"),
 		frozen = false,
 		ok = true;
@@ -114,7 +114,7 @@ export default class VirtualDomHorizontal extends Renderer{
 				config.width = width;
 				
 				if (this.options("layout") === "fitData") {
-					config.fitDataCheck = true;
+					config.fitDataCheck = column.modules.vdomHoz ? column.modules.vdomHoz.fitDataCheck : true;
 				}
 				
 				if((colPos + width > this.vDomScrollPosLeft) && (colPos < this.vDomScrollPosRight)){
@@ -327,7 +327,7 @@ export default class VirtualDomHorizontal extends Renderer{
 			
 			this.fitDataColActualWidthCheck(column);
 			
-			this.rightCol++;
+			this.rightCol++; // Don't move this below the >= check below
 			
 			if(this.rightCol >= (this.columns.length - 1)){
 				this.vDomPadRight = 0;
@@ -358,7 +358,9 @@ export default class VirtualDomHorizontal extends Renderer{
 			
 			this.fitDataColActualWidthCheck(column);
 			
-			if(!this.leftCol){
+			this.leftCol--; // don't move this below the <= check below
+
+			if(this.leftCol <= 0){ // replicating logic in addColRight
 				this.vDomPadLeft = 0;
 			}else{
 				this.vDomPadLeft -= column.getWidth();
@@ -366,7 +368,6 @@ export default class VirtualDomHorizontal extends Renderer{
 			
 			this.tableElement.style.paddingLeft = this.vDomPadLeft + "px";
 			
-			this.leftCol--;
 			
 			this.addColLeft();
 		}
@@ -384,7 +385,11 @@ export default class VirtualDomHorizontal extends Renderer{
 			rows.forEach((row) => {
 				if(row.type !== "group"){
 					var cell = row.getCell(column);
-					row.getElement().removeChild(cell.getElement());
+					try {
+						row.getElement().removeChild(cell.getElement());
+					} catch (ex) {
+						console.warn("Could not removeColRight", ex.message)
+					}
 				}
 			});
 			
@@ -414,7 +419,11 @@ export default class VirtualDomHorizontal extends Renderer{
 						el = cell.getElement();
 
 						if(el.parentNode){
-							row.getElement().removeChild(el);
+							try {
+								row.getElement().removeChild(el);
+							} catch (ex) {
+								console.warn("Could not removeColLeft", ex.message)
+							}
 						}
 					}
 				}

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

@@ -84,12 +84,12 @@ export default class Row extends CoreFeature{
 
 			this.dispatch("row-layout", this);
 
+			this.initialized = true;
+
 			if(this.table.options.rowFormatter){
 				this.table.options.rowFormatter(this.getComponent());
 			}
 
-			this.initialized = true;
-
 			this.dispatch("row-layout-after", this);
 		}else{
 			this.table.columnManager.renderer.rerenderRowCells(this);

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

@@ -76,8 +76,8 @@ export default class DataLoader extends CoreFeature{
 
 			params = this.mapParams(params, this.table.options.dataSendParams);
 
-			var result = this.chain("data-load", [data, params, config, silent], Promise.resolve([]));
-
+			var result = this.chain("data-load", [data, params, config, silent], false, Promise.resolve([]));
+			
 			return result.then((response) => {
 				if(!Array.isArray(response) && typeof response == "object"){
 					response = this.mapParams(response, this.objectInvert(this.table.options.dataReceiveParams));
@@ -102,10 +102,10 @@ export default class DataLoader extends CoreFeature{
 				if(!silent){
 					this.showError();
 				}
-
+				
 				setTimeout(() => {
 					this.hideLoader();
-				}, 3000);
+				}, this.table.options.dataLoaderErrorTimeout);
 			})
 			.finally(() => {
 				this.loading = false;

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

@@ -246,7 +246,7 @@ export default class InteractionManager extends CoreFeature {
 				switch(key){
 					case "row":
 					case "group":
-					if(listener.components.includes("row") || listener.components.includes("cell")){
+					if(listener.components.includes("row") || listener.components.includes("cell") || listener.components.includes("group")){
 						let rows = this.table.rowManager.getVisibleRows(true);
 						
 						component = rows.find((row) => {
@@ -263,7 +263,11 @@ export default class InteractionManager extends CoreFeature {
 					
 					case "cell":
 					if(listener.components.includes("cell")){
-						component = targets["row"].findCell(target);
+						if(targets["row"]){
+							component = targets["row"].findCell(target);
+						}else{
+							console.warn("Event Target Lookup Error - The row this cell is attached to cannot be found, has the table been reinitialized without being destroyed first?")
+						}
 					}
 					break;
 				}

package/src/js/modules/Ajax/Ajax.js

@@ -6,145 +6,125 @@ import defaultLoaderPromise from './defaults/loaderPromise.js';
 import defaultContentTypeFormatters from './defaults/contentTypeFormatters.js';
 
 class Ajax extends Module{
-
+	
 	constructor(table){
 		super(table);
-
-		this.config = false; //hold config object for ajax request
+		
+		this.config = {}; //hold config object for ajax request
 		this.url = ""; //request URL
 		this.urlGenerator = false;
 		this.params = false; //request parameters
-
+		
 		this.loaderPromise = false;
-
+		
 		this.registerTableOption("ajaxURL", false); //url for ajax loading
 		this.registerTableOption("ajaxURLGenerator", false);
 		this.registerTableOption("ajaxParams", {});  //params for ajax loading
 		this.registerTableOption("ajaxConfig", "get"); //ajax request type
 		this.registerTableOption("ajaxContentType", "form"); //ajax request type
 		this.registerTableOption("ajaxRequestFunc", false); //promise function
-
+		
 		this.registerTableOption("ajaxRequesting", function(){});
 		this.registerTableOption("ajaxResponse", false);
-
+		
 		this.contentTypeFormatters = Ajax.contentTypeFormatters;
 	}
-
+	
 	//initialize setup options
 	initialize(){
 		this.loaderPromise = this.table.options.ajaxRequestFunc || Ajax.defaultLoaderPromise;
 		this.urlGenerator = this.table.options.ajaxURLGenerator || Ajax.defaultURLGenerator;
-
-		if(this.table.options.ajaxParams){
-			this.setParams(this.table.options.ajaxParams);
-		}
-
-		if(this.table.options.ajaxConfig){
-			this.setConfig(this.table.options.ajaxConfig);
-		}
-
+		
 		if(this.table.options.ajaxURL){
 			this.setUrl(this.table.options.ajaxURL);
 		}
 
-		this.registerTableFunction("getAjaxUrl", this.getUrl.bind(this));
 
+		this.setDefaultConfig(this.table.options.ajaxConfig);
+		
+		this.registerTableFunction("getAjaxUrl", this.getUrl.bind(this));
+		
 		this.subscribe("data-loading", this.requestDataCheck.bind(this));
+		this.subscribe("data-params", this.requestParams.bind(this));
 		this.subscribe("data-load", this.requestData.bind(this));
 	}
-
-
+	
+	requestParams(data, config, silent, params){
+		var ajaxParams = this.table.options.ajaxParams;
+		
+		if(ajaxParams){
+			if(typeof ajaxParams === "function"){
+				ajaxParams = ajaxParams.call(this.table);
+			}
+			
+			params = Object.assign(params, ajaxParams);
+		}		
+		
+		return params;
+	}
+	
 	requestDataCheck(data, params, config, silent){
 		return !!((!data && this.url) || typeof data === "string");
 	}
-
-	requestData(data, params, config, silent, previousData){
-		if(this.requestDataCheck(data)){
-			if(data){
-				this.setUrl(data);
-			}
-
-			if(params){
-				this.setParams(params, true);
-			}
-
-			if(config){
-				this.setConfig(config);
+	
+	requestData(url, params, config, silent, previousData){
+		var ajaxConfig;
+		
+		if(!previousData && this.requestDataCheck(url)){
+			if(url){
+				this.setUrl(url);
 			}
-
-			return this.sendRequest();
+			
+			ajaxConfig = this.generateConfig(config);
+			
+			return this.sendRequest(this.url, params, ajaxConfig);
 		}else{
 			return previousData;
 		}
 	}
+	
+	setDefaultConfig(config = {}){
+		this.config = Object.assign({}, Ajax.defaultConfig);
 
-	//set ajax params
-	setParams(params, update){
-		if(update){
-			this.params = this.params || {};
-
-			for(let key in params){
-				this.params[key] = params[key];
-			}
+		if(typeof config == "string"){
+			this.config.method = config;
 		}else{
-			this.params = params;
+			Object.assign(this.config, config);
 		}
 	}
-
-	getParams(){
-		return this.params || {};
-	}
-
+	
 	//load config object
-	setConfig(config){
-		this._loadDefaultConfig();
-
+	generateConfig(config = {}){
+		var ajaxConfig = Object.assign({}, this.config)
+		
 		if(typeof config == "string"){
-			this.config.method = config;
+			ajaxConfig.method = config;
 		}else{
-			for(let key in config){
-				this.config[key] = config[key];
-			}
+			Object.assign(ajaxConfig, config);
 		}
+		
+		return ajaxConfig;
 	}
-
-	//create config object from default
-	_loadDefaultConfig(force){
-		if(!this.config || force){
-
-			this.config = {};
-
-			//load base config from defaults
-			for(let key in Ajax.defaultConfig){
-				this.config[key] = Ajax.defaultConfig[key];
-			}
-		}
-	}
-
+	
 	//set request url
 	setUrl(url){
 		this.url = url;
 	}
-
+	
 	//get request url
 	getUrl(){
 		return this.url;
 	}
-
+	
 	//send ajax request
-	sendRequest(silent){
-		var url = this.url,
-		esc, query;
-
-		this._loadDefaultConfig();
-
-		if(this.table.options.ajaxRequesting.call(this.table, this.url, this.params) !== false){
-			return this.loaderPromise(url, this.config, this.params)
+	sendRequest(url, params, config){
+		if(this.table.options.ajaxRequesting.call(this.table, url, params) !== false){
+			return this.loaderPromise(url, config, params)
 			.then((data)=>{
 				if(this.table.options.ajaxResponse){
-					data = this.table.options.ajaxResponse.call(this.table, this.url, this.params, data);
+					data = this.table.options.ajaxResponse.call(this.table, url, params, data);
 				}
-
+				
 				return data;
 			});
 		}else{

package/src/js/modules/ColumnCalcs/ColumnCalcs.js

@@ -51,7 +51,7 @@ class ColumnCalcs extends Module{
 		this.subscribe("row-added", this.rowsUpdated.bind(this));
 		this.subscribe("column-moved", this.recalcActiveRows.bind(this));
 		this.subscribe("column-add", this.recalcActiveRows.bind(this));
-		this.subscribe("data-refeshed", this.recalcActiveRows.bind(this));
+		this.subscribe("data-refreshed", this.recalcActiveRows.bind(this));
 		this.subscribe("table-redraw", this.tableRedraw.bind(this));
 		this.subscribe("rows-visible", this.visibleRows.bind(this));
 

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

@@ -38,6 +38,7 @@ class DataTree extends Module{
 		this.registerComponentFunction("row", "getTreeParent", this.getTreeParent.bind(this));
 		this.registerComponentFunction("row", "getTreeChildren", this.getRowChildren.bind(this));
 		this.registerComponentFunction("row", "addTreeChild", this.addTreeChildRow.bind(this));
+		this.registerComponentFunction("row", "isTreeExpanded", this.isRowExpanded.bind(this));
 	}
 
 	initialize(){
@@ -410,6 +411,10 @@ class DataTree extends Module{
 		}
 	}
 
+	isRowExpanded(row){
+		return row.modules.dataTree.open;
+	}
+
 	getTreeParent(row){
 		return row.modules.dataTree.parent ? row.modules.dataTree.parent.getComponent() : false;
 	}

package/src/js/modules/Download/defaults/downloaders/json.js

@@ -19,7 +19,7 @@ export default function(list, options, setFileContents){
 			case "row":
 			row.columns.forEach((col) => {
 				if(col){
-					item[col.component.getField()] = col.value;
+					item[col.component.getTitleDownload() || col.component.getField()] = col.value;
 				}
 			});