tabulator-tables 5.5.0 → 5.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabulator-tables",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "description": "Interactive table generation JavaScript library",
   "style": "dist/css/tabulator.css",
   "main": "dist/js/tabulator.js",
@@ -16,7 +16,8 @@
     "dev": "rollup -c build/rollup.js -w --environment TARGET:dev",
     "dev:css": "rollup -c build/rollup.js -w --environment TARGET:css",
     "dev:esm": "rollup -c build/rollup.js -w --environment TARGET:esm",
-    "dev:umd": "rollup -c build/rollup.js -w --environment TARGET:umd"
+    "dev:umd": "rollup -c build/rollup.js -w --environment TARGET:umd",
+    "dev:wrappers": "rollup -c build/rollup.js -w --environment TARGET:wrappers"
   },
   "repository": {
     "type": "git",

package/src/js/builds/jquery_wrapper.js

@@ -30,15 +30,23 @@
 	$.widget("ui.tabulator", {
 		_create:function(){
 			var options = Object.assign({}, this.options);
+			var props = [];
 
 			delete options.create;
 			delete options.disabled;
 
 			this.table = new Tabulator(this.element[0], options);
+			window.table = this.table;
+
+			//retrieve properties on prototype
+			props = Object.getOwnPropertyNames(Object.getPrototypeOf(Object.getPrototypeOf(this.table)));
+
+			//retrieve properties added by modules
+			props = props.concat(Object.getOwnPropertyNames(this.table));
 
 			//map tabulator functions to jquery wrapper
-			for(var key in Tabulator.prototype){
-				if(typeof Tabulator.prototype[key] === "function" && key.charAt(0) !== "_"){
+			for(let key of props){
+				if(typeof this.table[key] === "function" && key.charAt(0) !== "_"){
 					this[key] = this.table[key].bind(this.table);
 				}
 			}

package/src/js/core/RowManager.js

@@ -987,6 +987,8 @@ export default class RowManager extends CoreFeature{
 			
 			this.getElement().appendChild(this.placeholder);
 			this._positionPlaceholder();
+
+			this.adjustTableSize();
 		}
 	}
 	

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

@@ -4,19 +4,21 @@ export default class BasicHorizontal extends Renderer{
 	constructor(table){
 		super(table);
 	}
-
-	renderRowCells(row) {
+	
+	renderRowCells(row, inFragment) {
 		const rowFrag = document.createDocumentFragment();
 		row.cells.forEach((cell) => {
 			rowFrag.appendChild(cell.getElement());
 		});
 		row.element.appendChild(rowFrag);
-
-		row.cells.forEach((cell) => {
-			cell.cellRendered();
-		});
+		
+		if(!inFragment){
+			row.cells.forEach((cell) => {
+				cell.cellRendered();
+			});
+		}
 	}
-
+	
 	reinitializeColumnWidths(columns){
 		columns.forEach(function(column){
 			column.reinitializeWidth();

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

@@ -4,80 +4,98 @@ import Helpers from '../../tools/Helpers.js';
 export default class BasicVertical extends Renderer{
 	constructor(table){
 		super(table);
-
+		
 		this.verticalFillMode = "fill";
-
+		
 		this.scrollTop = 0;
 		this.scrollLeft = 0;
-
+		
 		this.scrollTop = 0;
 		this.scrollLeft = 0;
 	}
-
+	
 	clearRows(){
 		var element = this.tableElement;
-
+		
 		// element.children.detach();
 		while(element.firstChild) element.removeChild(element.firstChild);
-
+		
 		element.scrollTop = 0;
 		element.scrollLeft = 0;
-
+		
 		element.style.minWidth = "";
 		element.style.minHeight = "";
 		element.style.display = "";
 		element.style.visibility = "";
 	}
-
+	
 	renderRows() {
 		var element = this.tableElement,
 		onlyGroupHeaders = true,
-		tableFrag = document.createDocumentFragment();
-
-		this.rows().forEach((row, index) => {
+		tableFrag = document.createDocumentFragment(),
+		rows = this.rows();
+		
+		rows.forEach((row, index) => {
 			this.styleRow(row, index);
-			row.initialize(true);
-
+			row.initialize(false, true);
+			
 			if (row.type !== "group") {
 				onlyGroupHeaders = false;
 			}
-
+			
 			tableFrag.appendChild(row.getElement());
 		});
+		
 		element.appendChild(tableFrag);
-
+		
+		rows.forEach((row) => {
+			row.rendered();
+			
+			if(!row.heightInitialized) {
+				row.calcHeight(true);
+			}
+		});
+		
+		rows.forEach((row) => {
+			if(!row.heightInitialized) {
+				row.setCellHeight();
+			}
+		});
+		
+		
+		
 		if(onlyGroupHeaders){
 			element.style.minWidth = this.table.columnManager.getWidth() + "px";
 		}else{
 			element.style.minWidth = "";
 		}
 	}
-
-
+	
+	
 	rerenderRows(callback){	
 		this.clearRows();
-
+		
 		if(callback){
 			callback();
 		}
-
+		
 		this.renderRows();
 	}
-
+	
 	scrollToRowNearestTop(row){
 		var rowTop = Helpers.elOffset(row.getElement()).top;
-
+		
 		return !(Math.abs(this.elementVertical.scrollTop - rowTop) > Math.abs(this.elementVertical.scrollTop + this.elementVertical.clientHeight - rowTop));
 	}
-
+	
 	scrollToRow(row){
 		var rowEl = row.getElement();
-
+		
 		this.elementVertical.scrollTop = Helpers.elOffset(rowEl).top - Helpers.elOffset(this.elementVertical).top + this.elementVertical.scrollTop;
 	}
-
+	
 	visibleRows(includingBuffer){
 		return this.rows();
 	}
-
+	
 }

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

@@ -287,13 +287,14 @@ export default class VirtualDomVertical extends Renderer{
 				rowFragment = document.createDocumentFragment();
 
 				i = 0;
+
 				while ((i < rowsToRender) && this.vDomBottom < rowsCount -1) {	
 					index = this.vDomBottom + 1,
 					row = rows[index];
 
 					this.styleRow(row, index);
 
-					row.initialize();
+					row.initialize(false, true);
 					if(!row.heightInitialized && !this.table.options.rowHeight){
 						row.clearCellHeight();
 					}
@@ -307,21 +308,23 @@ export default class VirtualDomVertical extends Renderer{
 				if(!renderedRows.length){
 					break;
 				}
+
 				element.appendChild(rowFragment);
 				
 				// NOTE: The next 3 loops are separate on purpose
 				// This is to batch up the dom writes and reads which drastically improves performance 
+
 				renderedRows.forEach((row) => {
+					row.rendered();
+
 					if(!row.heightInitialized) {
 						row.calcHeight(true);
-						
 					}
 				});
 
 				renderedRows.forEach((row) => {
 					if(!row.heightInitialized) {
 						row.setCellHeight();
-						
 					}
 				});
 

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

@@ -65,7 +65,7 @@ export default class Row extends CoreFeature{
 	}
 	
 	//functions to setup on first render
-	initialize(force){
+	initialize(force, inFragment){
 		this.create();
 		
 		if(!this.initialized || force){
@@ -80,7 +80,7 @@ export default class Row extends CoreFeature{
 			
 			this.initialized = true;
 			
-			this.table.columnManager.renderer.renderRowCells(this);
+			this.table.columnManager.renderer.renderRowCells(this, inFragment);
 			
 			if(force){
 				this.normalizeHeight();
@@ -94,9 +94,15 @@ export default class Row extends CoreFeature{
 			
 			this.dispatch("row-layout-after", this);
 		}else{
-			this.table.columnManager.renderer.rerenderRowCells(this);
+			this.table.columnManager.renderer.rerenderRowCells(this, inFragment);
 		}
 	}
+
+	rendered(){
+		this.cells.forEach((cell) => {
+			cell.cellRendered();
+		});
+	}
 	
 	reinitializeHeight(){
 		this.heightInitialized = false;

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

@@ -3,58 +3,66 @@ import CoreFeature from '../CoreFeature.js';
 export default class DataLoader extends CoreFeature{
 	constructor(table){
 		super(table);
-
+		
 		this.requestOrder = 0; //prevent requests coming out of sequence if overridden by another load request
 		this.loading = false;
 	}
-
+	
 	initialize(){}
-
+	
 	load(data, params, config, replace, silent, columnsChanged){
 		var requestNo = ++this.requestOrder;
 
+		if(this.table.destroyed){
+			return Promise.resolve();
+		}
+		
 		this.dispatchExternal("dataLoading", data);
-
+		
 		//parse json data to array
 		if (data && (data.indexOf("{") == 0 || data.indexOf("[") == 0)){
 			data = JSON.parse(data);
 		}
-
+		
 		if(this.confirm("data-loading", [data, params, config, silent])){
 			this.loading = true;
-
+			
 			if(!silent){
 				this.alertLoader();
 			}
-
+			
 			//get params for request
 			params = this.chain("data-params", [data, config, silent], params || {}, params || {});
-
+			
 			params = this.mapParams(params, this.table.options.dataSendParams);
-
+			
 			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));
-				}
-
-				var rowData = this.chain("data-loaded", response, null, response);
-
-				if(requestNo == this.requestOrder){
-					this.clearAlert();
-
-					if(rowData !== false){
-						this.dispatchExternal("dataLoaded", rowData);
-						this.table.rowManager.setData(rowData,  replace, typeof columnsChanged === "undefined" ? !replace : columnsChanged);
+				if(!this.table.destroyed){
+					if(!Array.isArray(response) && typeof response == "object"){
+						response = this.mapParams(response, this.objectInvert(this.table.options.dataReceiveParams));
+					}
+					
+					var rowData = this.chain("data-loaded", response, null, response);
+					
+					if(requestNo == this.requestOrder){
+						this.clearAlert();
+						
+						if(rowData !== false){
+							this.dispatchExternal("dataLoaded", rowData);
+							this.table.rowManager.setData(rowData,  replace, typeof columnsChanged === "undefined" ? !replace : columnsChanged);
+						}
+					}else{
+						console.warn("Data Load Response Blocked - An active data load request was blocked by an attempt to change table data while the request was being made");
 					}
 				}else{
-					console.warn("Data Load Response Blocked - An active data load request was blocked by an attempt to change table data while the request was being made");
+					console.warn("Data Load Response Blocked - Table has been destroyed");
 				}
 			}).catch((error) => {
 				console.error("Data Load Error: ", error);
 				this.dispatchExternal("dataLoadError", error);
-
+				
 				if(!silent){
 					this.alertError();
 				}
@@ -68,52 +76,52 @@ export default class DataLoader extends CoreFeature{
 				});
 		}else{
 			this.dispatchExternal("dataLoaded", data);
-
+			
 			if(!data){
 				data = [];
 			}
-
+			
 			this.table.rowManager.setData(data, replace, typeof columnsChanged === "undefined" ? !replace : columnsChanged);
 			return Promise.resolve();
 		}
 	}
-
+	
 	mapParams(params, map){
 		var output = {};
-
+		
 		for(let key in params){
 			output[map.hasOwnProperty(key) ? map[key] : key] = params[key];
 		}
-
+		
 		return output;
 	}
-
+	
 	objectInvert(obj){
 		var output = {};
-
+		
 		for(let key in obj){
 			output[obj[key]] = key;
 		}
-
+		
 		return output;
 	}
-
+	
 	blockActiveLoad(){
 		this.requestOrder++;
 	}
-
+	
 	alertLoader(){
 		var shouldLoad = typeof this.table.options.dataLoader === "function" ? this.table.options.dataLoader() : this.table.options.dataLoader;
-
+		
 		if(shouldLoad){
 			this.table.alertManager.alert(this.table.options.dataLoaderLoading || this.langText("data|loading"));
 		}
 	}
-
+	
 	alertError(){
 		this.table.alertManager.alert(this.table.options.dataLoaderError || this.langText("data|error"), "error");
 	}
-
+	
 	clearAlert(){
 		this.table.alertManager.clear();
 	}

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

@@ -67,6 +67,9 @@ class DataTree extends Module{
 						this.branchEl = options.dataTreeBranchElement;
 					}
 				}
+			}else{
+				this.branchEl = document.createElement("div");
+				this.branchEl.classList.add("tabulator-data-tree-branch-empty");
 			}
 
 			if(options.dataTreeCollapseElement){
@@ -570,7 +573,7 @@ class DataTree extends Module{
 		var config = row.modules.dataTree,
 		output = [];
 
-		if(config.children){
+		if(config && config.children){
 
 			if(!Array.isArray(config.children)){
 				config.children = this.generateChildren(row);

package/src/js/modules/GroupRows/Group.js

@@ -71,7 +71,7 @@ class Group{
 		this.arrowElement = document.createElement("div");
 		this.arrowElement.classList.add("tabulator-group-toggle");
 		this.arrowElement.appendChild(arrow);
-
+		
 		//setup movable rows
 		if(this.groupManager.table.options.movableRows !== false && this.groupManager.table.modExists("moveRow")){
 			this.groupManager.table.modules.moveRow.initializeGroupHeader(this);
@@ -94,9 +94,15 @@ class Group{
 			toggleElement = this.groupManager.table.options.groupToggleElement == "arrow" ? this.arrowElement : this.element;
 			
 			toggleElement.addEventListener("click", (e) => {
-				e.stopPropagation();
-				e.stopImmediatePropagation();
-				this.toggleVisibility();
+				if(this.groupManager.table.options.groupToggleElement === "arrow"){
+					e.stopPropagation();
+					e.stopImmediatePropagation();
+				}
+
+				//allow click event to propagate before toggling visibility
+				setTimeout(() => {
+					this.toggleVisibility();
+				});
 			});
 		}
 	}
@@ -217,7 +223,7 @@ class Group{
 			if(el.parentNode){
 				el.parentNode.removeChild(el);
 			}
-
+			
 			if(!this.groupManager.blockRedraw){
 				this.generateGroupHeaderContents();
 				
@@ -342,6 +348,7 @@ class Group{
 		}
 		return count;
 	}
+
 	
 	toggleVisibility(){
 		if(this.visible){
@@ -466,12 +473,18 @@ class Group{
 		return output;
 	}
 	
-	getRows(component){
+	getRows(component, includeChildren){
 		var output = [];
 		
-		this.rows.forEach(function(row){
-			output.push(component ? row.getComponent() : row);
-		});
+		if(includeChildren && this.groupList.length){
+			this.groupList.forEach((group) => {
+				output = output.concat(group.getRows(component, includeChildren));
+			});
+		}else{
+			this.rows.forEach(function(row){
+				output.push(component ? row.getComponent() : row);
+			});
+		}
 		
 		return output;
 	}
@@ -479,7 +492,9 @@ class Group{
 	generateGroupHeaderContents(){
 		var data = [];
 		
-		this.rows.forEach(function(row){
+		var rows = this.getRows(false, true);
+		
+		rows.forEach(function(row){
 			data.push(row.getData());
 		});
 		
@@ -584,6 +599,8 @@ class Group{
 	clearCellHeight(){}
 	
 	deinitializeHeight(){}
+
+	rendered(){}
 	
 	//////////////// Object Generation /////////////////
 	getComponent(){

package/src/js/modules/History/defaults/redoers.js

@@ -19,7 +19,9 @@ export default {
 	},
 
 	rowMove: function(action){
-		this.table.rowManager.moveRowActual(action.component, this.table.rowManager.rows[action.data.posTo], action.data.after);
-		this.table.rowManager.redraw();
+		this.table.rowManager.moveRowActual(action.component, this.table.rowManager.getRowFromPosition(action.data.posTo), action.data.after);
+		
+		this.table.rowManager.regenerateRowPositions();
+		this.table.rowManager.reRenderInPosition();
 	},
 };

package/src/js/modules/History/defaults/undoers.js

@@ -19,7 +19,11 @@ export default {
 	},
 
 	rowMove: function(action){
-		this.table.rowManager.moveRowActual(action.component, this.table.rowManager.rows[action.data.posFrom], !action.data.after);
-		this.table.rowManager.redraw();
+		var after = (action.data.posFrom  - action.data.posTo) > 0;
+
+		this.table.rowManager.moveRowActual(action.component, this.table.rowManager.getRowFromPosition(action.data.posFrom), after);
+
+		this.table.rowManager.regenerateRowPositions();
+		this.table.rowManager.reRenderInPosition();
 	},
 };

package/src/js/modules/HtmlTableImport/HtmlTableImport.js

@@ -133,7 +133,7 @@ class HtmlTableImport extends Module{
 			}
 
 			if(!col.field) {
-				col.field = header.textContent.trim().toLowerCase().replace(" ", "_");
+				col.field = header.textContent.trim().toLowerCase().replaceAll(" ", "_");
 			}
 
 			width = header.getAttribute("width");
@@ -179,4 +179,4 @@ class HtmlTableImport extends Module{
 
 HtmlTableImport.moduleName = "htmlTableImport";
 
-export default HtmlTableImport;
+export default HtmlTableImport;

package/src/js/modules/Keybindings/defaults/bindings.js

@@ -9,5 +9,5 @@ export default {
 	scrollToEnd:35,
 	undo:["ctrl + 90", "meta + 90"],
 	redo:["ctrl + 89", "meta + 89"],
-	copyToClipboard:["ctrl + 67", "meta + 89"],
+	copyToClipboard:["ctrl + 67", "meta + 67"],
 };

package/src/js/modules/Layout/Layout.js

@@ -28,6 +28,16 @@ class Layout extends Module{
 		}
 
 		this.table.element.setAttribute("tabulator-layout", this.mode);
+		this.subscribe("column-init", this.initializeColumn.bind(this));
+	}
+
+	initializeColumn(column){
+		if(column.definition.widthGrow){
+			column.definition.widthGrow = Number(column.definition.widthGrow);
+		}
+		if(column.definition.widthShrink){
+			column.definition.widthShrink = Number(column.definition.widthShrink);
+		}
 	}
 
 	getMode(){

package/src/js/modules/ResizeColumns/ResizeColumns.js

@@ -107,6 +107,7 @@ class ResizeColumns extends Module{
 			if(cell.modules.resize && cell.modules.resize.handleEl){
 				if(frozenOffset){
 					cell.modules.resize.handleEl.style[column.modules.frozen.position] = frozenOffset;
+					cell.modules.resize.handleEl.style["z-index"] = 11;
 				}
 				
 				cell.element.after(cell.modules.resize.handleEl);

package/src/scss/tabulator.scss

@@ -362,7 +362,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			
 			// background-color: inherit;
 			
-			z-index: 10;
+			z-index: 11;
 			
 			&.tabulator-frozen-left{
 				border-right:2px solid $rowBorderColor;
@@ -772,7 +772,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			
 			background-color: inherit;
 			
-			z-index: 10;
+			z-index: 11;
 			
 			&.tabulator-frozen-left{
 				border-right:2px solid $rowBorderColor;
@@ -831,6 +831,11 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 				}
 			}
 		}
+
+		.tabulator-data-tree-branch-empty{
+			display:inline-block;
+			width:7px;
+		}
 		
 		.tabulator-data-tree-branch{
 			display:inline-block;

package/src/scss/themes/materialize/tabulator_materialize.scss

@@ -18,7 +18,7 @@ $sortArrowActive: #666 !default;
 $sortArrowInactive: #bbb !default;
 
 //row theming
-$rowBackgroundColor:transparent !default; //table row background color
+$rowBackgroundColor:#fff !default; //table row background color
 $rowAltBackgroundColor: $table-striped-color !default; //table row background color
 $rowBorderColor:$table-border-color !default; //table border color
 $rowHoverBackground:$table-striped-color !default; //row background color on hover
@@ -159,7 +159,7 @@ $footerActiveColor:$primary-color !default; //footer bottom active text color
 	border-bottom:1px solid $rowBorderColor;
 
 	&.tabulator-row-even{
-		background-color: transparent;
+		background-color: $rowBackgroundColor;
 	}
 
 	.tabulator-cell{