tabulator-tables 5.1.1 → 5.1.4

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "tabulator-tables",
-  "version": "5.1.1",
+  "version": "5.1.4",
   "description": "Interactive table generation JavaScript library",
   "style": "dist/css/tabulator.css",
   "main": "dist/js/tabulator.js",
   "module": "dist/js/tabulator_esm.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "scripts": {
     "build": "rollup -c build/rollup.js",
     "dev": "rollup -c build/rollup.js -w --environment TARGET:dev",

package/src/js/core/FooterManager.js

@@ -10,8 +10,6 @@ export default class FooterManager extends CoreFeature{
 		this.containerElement = this.createContainerElement(); //containing element
 		this.external = false;
 		this.links = [];
-
-		this.initializeElement();
 	}
 
 	initialize(){
@@ -43,10 +41,10 @@ export default class FooterManager extends CoreFeature{
 			switch(typeof this.table.options.footerElement){
 				case "string":
 				if(this.table.options.footerElement[0] === "<"){
-					this.element.innerHTML = this.table.options.footerElement;
+					this.containerElement.innerHTML = this.table.options.footerElement;
 				}else{
 					this.external = true;
-					this.element = document.querySelector(this.table.options.footerElement);
+					this.containerElement = document.querySelector(this.table.options.footerElement);
 				}
 				break;
 

package/src/js/core/RowManager.js

@@ -1054,12 +1054,6 @@ export default class RowManager extends CoreFeature{
 		if(!force){
 			this.reRenderInPosition();
 			this.scrollHorizontal(left);
-			
-			if(!this.displayRowsCount){
-				if(this.table.options.placeholder){
-					this.getElement().appendChild(this.table.options.placeholder);
-				}
-			}
 		}else{
 			this.renderTable();
 		}

package/src/js/core/Tabulator.js

@@ -41,8 +41,8 @@ class Tabulator {
 		this.dataLoader = false; //bind component functions
 
 		this.modules = {}; //hold all modules bound to this table
-		this.modulesCore = {}; //hold core modules bound to this table (for initialization purposes)
-		this.modulesRegular = {}; //hold regular modules bound to this table (for initialization purposes)
+		this.modulesCore = []; //hold core modules bound to this table (for initialization purposes)
+		this.modulesRegular = []; //hold regular modules bound to this table (for initialization purposes)
 
 		this.optionsList = new OptionsList(this, "table constructor");
 
@@ -50,7 +50,7 @@ class Tabulator {
 
 		if(this.initializeElement(element)){
 
-			this.initialzeCoreSystems(options);
+			this.initializeCoreSystems(options);
 
 			//delay table creation to allow event bindings immediately after the constructor
 			setTimeout(() => {
@@ -80,7 +80,7 @@ class Tabulator {
 		}
 	}
 
-	initialzeCoreSystems(options){
+	initializeCoreSystems(options){
 		this.columnManager = new ColumnManager(this);
 		this.rowManager = new RowManager(this);
 		this.footerManager = new FooterManager(this);
@@ -100,8 +100,8 @@ class Tabulator {
 		this.interactionMonitor = new InteractionMonitor(this);
 
 		this.dataLoader.initialize();
-		this.columnManager.initialize();
-		this.rowManager.initialize();
+		// this.columnManager.initialize();
+		// this.rowManager.initialize();
 		this.footerManager.initialize();
 	}
 
@@ -171,7 +171,7 @@ class Tabulator {
 	_clearObjectPointers(){
 		this.options.columns = this.options.columns.slice(0);
 
-		if(this.options.data && !this.options.reactiveData){
+		if(Array.isArray(this.options.data) && !this.options.reactiveData){
 			this.options.data = this.options.data.slice(0);
 		}
 	}
@@ -240,24 +240,9 @@ class Tabulator {
 		this._detectBrowser();
 
 		//initialize core modules
-		for (let key in this.modulesCore){
-			let mod = this.modulesCore[key];
-
+		this.modulesCore.forEach((mod) => {
 			mod.initialize();
-		}
-
-		//configure placeholder element
-		if(typeof options.placeholder == "string"){
-			var el = document.createElement("div");
-			el.classList.add("tabulator-placeholder");
-
-			var span = document.createElement("span");
-			span.innerHTML = options.placeholder;
-
-			el.appendChild(span);
-
-			options.placeholder = el;
-		}
+		})
 
 		//build table elements
 		element.appendChild(this.columnManager.getElement());
@@ -273,11 +258,9 @@ class Tabulator {
 		}
 
 		//initialize regular modules
-		for (let key in this.modulesRegular){
-			let mod = this.modulesRegular[key];
-
+		this.modulesRegular.forEach((mod) => {
 			mod.initialize();
-		}
+		});
 
 		this.columnManager.setColumns(options.columns);
 
@@ -327,7 +310,7 @@ class Tabulator {
 			this.browserSlow = false;
 		}
 
-		this.browserMobile = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(ua)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(ua.substr(0,4));
+		this.browserMobile = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(ua)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(ua.slice(0,4));
 	}
 
 	////////////////// Data Handling //////////////////
@@ -838,4 +821,4 @@ Tabulator.defaultOptions = defaultOptions;
 //bind modules and static functionality
 new ModuleBinder(Tabulator);
 
-export default Tabulator;
+export default Tabulator;

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

@@ -215,7 +215,7 @@ export default class VirtualDomHorizontal extends Renderer{
 					this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.window;
 					
 					var row = this.chain("rows-sample", [1], [], () => {
-						return this.table.rowManager.getDisplayRows()[0];
+						return this.table.rowManager.getDisplayRows();
 					})[0];
 					
 					if(row){

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

@@ -76,6 +76,8 @@ export default class Row extends CoreFeature{
 
 			this.generateCells();
 
+			this.initialized = true;
+
 			this.table.columnManager.renderer.renderRowCells(this);
 
 			if(force){
@@ -84,8 +86,6 @@ 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());
 			}

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

@@ -255,7 +255,7 @@ export default class InteractionManager extends CoreFeature {
 							return row.getElement() === target;
 						});
 						
-						if(targets["row"].parentNode && targets["row"].parentNode.closest(".tabulator-row")){
+						if(targets["row"] && targets["row"].parentNode && targets["row"].parentNode.closest(".tabulator-row")){
 							targets[key] = false;
 						}
 					}

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

@@ -56,19 +56,31 @@ export default class ModuleBinder {
 
 		//ensure that module are bound to instantiated function
 		tabulator.prototype.bindModules = function(){
+			var orderedMods = [],
+			unOrderedMods = [];
+
 			this.modules = {};
 
 			for(var name in tabulator.moduleBindings){
 				let mod = tabulator.moduleBindings[name];
+				let module = new mod(this);
 
-				this.modules[name] = new mod(this);
+				this.modules[name] = module;
 
 				if(mod.prototype.moduleCore){
-					this.modulesCore[name] = this.modules[name];
+					this.modulesCore.push(module);
 				}else{
-					this.modulesRegular[name] = this.modules[name];
+					if(mod.moduleInitOrder){
+						orderedMods.push(module);
+					}else{
+						unOrderedMods.push(module);
+					}
 				}
 			}
+
+			orderedMods.sort((a, b) => a.moduleInitOrder > b.moduleInitOrder ? 1 : -1);
+
+			this.modulesRegular = orderedMods.concat(unOrderedMods);
 		}
 	}
 

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-refreshed", this.recalcActiveRows.bind(this));
+		this.subscribe("data-refreshed", this.recalcActiveRowsRefresh.bind(this));
 		this.subscribe("table-redraw", this.tableRedraw.bind(this));
 		this.subscribe("rows-visible", this.visibleRows.bind(this));
 
@@ -99,6 +99,14 @@ class ColumnCalcs extends Module{
 		}
 	}
 
+	recalcActiveRowsRefresh(){
+		if(this.table.options.groupBy && this.table.options.dataTreeStartExpanded && this.table.options.dataTree){
+			this.recalcAll();
+		}else{
+			this.recalcActiveRows();
+		}
+	}
+
 	recalcActiveRows(){
 		this.recalc(this.table.rowManager.activeRows);
 	}
@@ -106,7 +114,6 @@ class ColumnCalcs extends Module{
 	cellValueChanged(cell){
 		if(cell.column.definition.topCalc || cell.column.definition.bottomCalc){
 			if(this.table.options.groupBy){
-
 				if(this.table.options.columnCalcs == "table" || this.table.options.columnCalcs == "both"){
 					this.recalcActiveRows();
 				}
@@ -114,7 +121,6 @@ class ColumnCalcs extends Module{
 				if(this.table.options.columnCalcs != "table"){
 					this.recalcRowGroup(cell.row);
 				}
-
 			}else{
 				this.recalcActiveRows();
 			}
@@ -286,7 +292,6 @@ class ColumnCalcs extends Module{
 
 			if(this.table.options.groupBy && this.table.options.columnCalcs !== "table"){
 
-
 				var groups = this.table.modules.groupRows.getChildGroups();
 
 				groups.forEach((group) => {

package/src/js/modules/Export/Export.js

@@ -208,7 +208,8 @@ class Export extends Module{
 
 			header.forEach((col) => {
 				if(col){
-					columns.push(new ExportColumn(col.title, col.column.getComponent(), col.width, col.height, col.depth));
+					let title = typeof col.title === "undefined" ? "" : col.title;
+					columns.push(new ExportColumn(title, col.column.getComponent(), col.width, col.height, col.depth));
 				}else{
 					columns.push(null);
 				}
@@ -466,10 +467,10 @@ class Export extends Module{
 		rowEl.classList.add("tabulator-print-table-row");
 
 		row.columns.forEach((col) => {
-
 			if(col){
 				var cellEl = document.createElement("td"),
 				column = col.component._column,
+				index = this.table.columnManager.findColumnIndex(column),
 				value = col.value;
 
 				var cellWrapper = {
@@ -528,8 +529,8 @@ class Export extends Module{
 					cellEl.innerHTML = value;
 				}
 
-				if(styles.firstCell){
-					this.mapElementStyles(styles.firstCell, cellEl, ["padding-top", "padding-left", "padding-right", "padding-bottom", "border-top", "border-left", "border-right", "border-bottom", "color", "font-weight", "font-family", "font-size"]);
+				if(styles.styleCells[index] || styles.firstCell){
+					this.mapElementStyles(styles.styleCells[index] || styles.firstCell, cellEl, ["padding-top", "padding-left", "padding-right", "padding-bottom", "border-top", "border-left", "border-right", "border-bottom", "color", "font-weight", "font-family", "font-size", "text-align"]);
 
 					if(column.definition.align){
 						cellEl.style.textAlign = column.definition.align;

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

@@ -416,7 +416,9 @@ class Filter extends Module{
 				editorElement.addEventListener("focus", (e) => {
 					var left = this.table.columnManager.element.scrollLeft;
 
-					if(left !== this.table.rowManager.element.scrollLeft){
+					var headerPos = this.table.rowManager.element.scrollLeft + parseInt(this.table.columnManager.element.style.marginLeft);
+
+					if(left !== headerPos){
 						this.table.rowManager.scrollHorizontal(left);
 						this.table.columnManager.scrollHorizontal(left);
 					}
@@ -595,12 +597,11 @@ class Filter extends Module{
 		}
 
 		field.forEach((filter) => {
-
 			filter = this.findFilter(filter);
 
 			if(filter){
 				this.filterList.push(filter);
-				this.changed = true;
+				changed = true;
 			}
 		});
 

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

@@ -2,9 +2,12 @@ import RowComponent from '../../../../core/row/RowComponent.js';
 
 export default function(cell, formatterParams, onRendered){
 	var checkbox = document.createElement("input");
+	var blocked = false;
 
 	checkbox.type = 'checkbox';
 
+	checkbox.setAttribute("aria-label", "Select Row");
+	
 	if(this.table.modExists("selectRow", true)){
 
 		checkbox.addEventListener("click", (e) => {
@@ -17,9 +20,24 @@ export default function(cell, formatterParams, onRendered){
 			if(row instanceof RowComponent){
 
 				checkbox.addEventListener("change", (e) => {
-					row.toggleSelect();
+					if(this.table.options.selectableRangeMode === "click"){
+						if(!blocked){
+							row.toggleSelect();
+						}else{
+							blocked = false;
+						}
+					}else{
+						row.toggleSelect();
+					}
 				});
 
+				if(this.table.options.selectableRangeMode === "click"){
+					checkbox.addEventListener("click", (e) => {
+						blocked = true;
+						this.table.modules.selectRow.handleComplexRowClick(row._row, e);
+					});
+				}
+
 				checkbox.checked = row.isSelected && row.isSelected();
 				this.table.modules.selectRow.registerRowSelectCheckbox(row, checkbox);
 			}else{

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

@@ -1,3 +1,3 @@
 export default function(cell, formatterParams, onRendered){
-	return this.table.rowManager.activeRows.indexOf(cell.getRow()._getSelf()) + 1;
+	return this.table.rowManager.activeRows.indexOf(cell.getRow()._getSelf()) + 1 || "";
 };