tabulator-tables 5.4.4 → 5.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabulator-tables",
-  "version": "5.4.4",
+  "version": "5.5.1",
   "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/ColumnManager.js

@@ -41,6 +41,8 @@ export default class ColumnManager extends CoreFeature {
 		
 		this.contentsElement.insertBefore(this.headersElement, this.contentsElement.firstChild);
 		this.element.insertBefore(this.contentsElement, this.element.firstChild);
+
+		this.initializeScrollWheelWatcher();
 		
 		this.subscribe("scroll-horizontal", this.scrollHorizontal.bind(this));
 		this.subscribe("scrollbar-vertical", this.padVerticalScrollbar.bind(this));
@@ -132,6 +134,19 @@ export default class ColumnManager extends CoreFeature {
 		
 		this.renderer.scrollColumns(left);
 	}
+
+	initializeScrollWheelWatcher(){
+		this.contentsElement.addEventListener("wheel", (e) => {
+			var left;
+
+			if(e.deltaX){
+				left = this.contentsElement.scrollLeft + e.deltaX;
+
+				this.table.rowManager.scrollHorizontal(left);
+				this.table.columnManager.scrollHorizontal(left);
+			}
+		});
+	}
 	
 	///////////// Column Setup Functions /////////////
 	generateColumnsFromRowData(data){

package/src/js/core/RowManager.js

@@ -38,7 +38,7 @@ export default class RowManager extends CoreFeature{
 		
 		this.dataPipeline = []; //hold data pipeline tasks
 		this.displayPipeline = []; //hold data display pipeline tasks
-
+		
 		this.scrollbarWidth = 0;
 		
 		this.renderer = null;
@@ -67,12 +67,18 @@ export default class RowManager extends CoreFeature{
 	
 	initializePlaceholder(){
 		var placeholder = this.table.options.placeholder;
-
+		
+		if(typeof placeholder === "function"){
+			placeholder = placeholder.call(this.table);
+		}
+		
+		placeholder = this.chain("placeholder", [placeholder], placeholder, placeholder) || placeholder;
+		
 		//configure placeholder element
 		if(placeholder){	
 			let el = document.createElement("div");
 			el.classList.add("tabulator-placeholder");
-
+			
 			if(typeof placeholder == "string"){
 				let contents = document.createElement("div");
 				contents.classList.add("tabulator-placeholder-contents");
@@ -88,10 +94,10 @@ export default class RowManager extends CoreFeature{
 				this.placeholderContents = placeholder;
 			}else{
 				console.warn("Invalid placeholder provided, must be string or HTML Element", placeholder);
-
+				
 				this.el = null;
 			}
-
+			
 			this.placeholder = el;
 		}
 	}
@@ -252,15 +258,15 @@ export default class RowManager extends CoreFeature{
 		this.destroy();
 		
 		this.adjustTableSize();
-
+		
 		this.dispatch("rows-wiped");
 	}
-
+	
 	destroy(){
 		this.rows.forEach((row) => {
 			row.wipe();
 		});
-
+		
 		this.rows = [];
 		this.activeRows = [];
 		this.activeRowsPipeline = [];
@@ -333,7 +339,7 @@ export default class RowManager extends CoreFeature{
 				rows.push(row);
 				this.dispatch("row-added", row, item, pos, index);
 			});
-
+			
 			this.refreshActiveData(refreshDisplayOnly ? "displayPipeline" : false, false, true);
 			
 			this.regenerateRowPositions();
@@ -721,28 +727,28 @@ export default class RowManager extends CoreFeature{
 			
 				for(let i = index; i < this.dataPipeline.length; i++){
 					let result = this.dataPipeline[i].handler(this.activeRowsPipeline[i].slice(0));
-					
+				
 					this.activeRowsPipeline[i + 1] = result || this.activeRowsPipeline[i].slice(0);
 				}
-				
+			
 				this.setActiveRows(this.activeRowsPipeline[this.dataPipeline.length]);
-				
+			
 			case "display":
 				index = 0;
 				this.resetDisplayRows();
-				
+			
 			case "displayPipeline":
 				for(let i = index; i < this.displayPipeline.length; i++){
 					let result = this.displayPipeline[i].handler((i ? this.getDisplayRows(i - 1) : this.activeRows).slice(0), renderInPosition);
-
+				
 					this.setDisplayRows(result || this.getDisplayRows(i - 1).slice(0), i);
 				}
 			
 			case "end":
-				//case to handle scenario when trying to skip past end stage
+			//case to handle scenario when trying to skip past end stage
 				this.regenerateRowPositions();
 		}
-
+		
 		if(this.getDisplayRows().length){
 			this._clearPlaceholder();
 		}
@@ -778,7 +784,7 @@ export default class RowManager extends CoreFeature{
 	//set display row pipeline data
 	setDisplayRows(displayRows, index){
 		this.displayRows[index] = displayRows;
-
+		
 		if(index == this.displayRows.length -1){
 			this.displayRowsCount = this.displayRows[this.displayRows.length -1].length;
 		}
@@ -813,7 +819,7 @@ export default class RowManager extends CoreFeature{
 	//return only actual rows (not group headers etc)
 	getRows(type){
 		var rows = [];
-
+		
 		switch(type){
 			case "active":
 				rows = this.activeRows;
@@ -822,11 +828,11 @@ export default class RowManager extends CoreFeature{
 			case "display":
 				rows = this.table.rowManager.getDisplayRows();
 				break;
-				
+			
 			case "visible":
 				rows = this.getVisibleRows(false, true);
 				break;
-
+			
 			default:
 				rows = this.chain("rows-retrieve", type, null, this.rows) || this.rows;
 		}
@@ -847,25 +853,25 @@ export default class RowManager extends CoreFeature{
 			this.dispatchExternal("renderStarted");
 			
 			this.renderer.rerenderRows(callback);
-
+			
 			if(!this.fixedHeight){
 				this.adjustTableSize();
 			}
-
+			
 			this.scrollBarCheck();
 			
 			this.dispatchExternal("renderComplete");
 		}
 	}
-
+	
 	scrollBarCheck(){
 		var scrollbarWidth = 0;
-
+		
 		//adjust for vertical scrollbar moving table when present
 		if(this.element.scrollHeight > this.element.clientHeight){
 			scrollbarWidth = this.element.offsetWidth - this.element.clientWidth;
 		}
-
+		
 		if(scrollbarWidth !== this.scrollbarWidth){
 			this.scrollbarWidth = scrollbarWidth;
 			this.dispatch("scrollbar-vertical", scrollbarWidth);
@@ -918,7 +924,7 @@ export default class RowManager extends CoreFeature{
 			
 			if(this.firstRender){
 				this.firstRender = false;
-
+				
 				if(!this.fixedHeight){
 					this.adjustTableSize();
 				}
@@ -938,7 +944,7 @@ export default class RowManager extends CoreFeature{
 		if(!this.displayRowsCount){
 			this._showPlaceholder();
 		}
-
+		
 		this.scrollBarCheck();
 		
 		this.dispatchExternal("renderComplete");
@@ -963,7 +969,7 @@ export default class RowManager extends CoreFeature{
 		
 		this.renderer.clearRows();
 	}
-
+	
 	tableEmpty(){
 		this.renderEmptyScroll();
 		this._showPlaceholder();
@@ -971,10 +977,18 @@ export default class RowManager extends CoreFeature{
 	
 	_showPlaceholder(){
 		if(this.placeholder){
+			if(this.placeholder && this.placeholder.parentNode){
+				this.placeholder.parentNode.removeChild(this.placeholder);
+			}
+			
+			this.initializePlaceholder();
+			
 			this.placeholder.setAttribute("tabulator-render-mode", this.renderMode);
 			
 			this.getElement().appendChild(this.placeholder);
 			this._positionPlaceholder();
+
+			this.adjustTableSize();
 		}
 	}
 	
@@ -982,7 +996,7 @@ export default class RowManager extends CoreFeature{
 		if(this.placeholder && this.placeholder.parentNode){
 			this.placeholder.parentNode.removeChild(this.placeholder);
 		}
-
+		
 		// clear empty table placeholder min
 		this.tableElement.style.minWidth = "";
 		this.tableElement.style.display = "";
@@ -1017,7 +1031,8 @@ export default class RowManager extends CoreFeature{
 	
 	//adjust the height of the table holder to fit in the Tabulator element
 	adjustTableSize(){
-		var initialHeight = this.element.clientHeight, minHeight;
+		let initialHeight = this.element.clientHeight, minHeight;
+		let resized = false;
 		
 		if(this.renderer.verticalFillMode === "fill"){
 			let otherHeight =  Math.floor(this.table.columnManager.getElement().getBoundingClientRect().height + (this.table.footerManager && this.table.footerManager.active && !this.table.footerManager.external ? this.table.footerManager.getElement().getBoundingClientRect().height : 0));
@@ -1025,12 +1040,14 @@ export default class RowManager extends CoreFeature{
 			if(this.fixedHeight){
 				minHeight = isNaN(this.table.options.minHeight) ? this.table.options.minHeight : this.table.options.minHeight + "px";
 				
+				const height = "calc(100% - " + otherHeight + "px)";
 				this.element.style.minHeight = minHeight || "calc(100% - " + otherHeight + "px)";
-				this.element.style.height = "calc(100% - " + otherHeight + "px)";
-				this.element.style.maxHeight = "calc(100% - " + otherHeight + "px)";
-			}else{
+				this.element.style.height = height;
+				this.element.style.maxHeight = height;
+			} else {
 				this.element.style.height = "";
-				this.element.style.height = (this.table.element.clientHeight - otherHeight) + "px";
+				this.element.style.height =
+				this.table.element.clientHeight - otherHeight + "px";
 				this.element.scrollTop = this.scrollTop;
 			}
 			
@@ -1038,17 +1055,19 @@ export default class RowManager extends CoreFeature{
 			
 			//check if the table has changed size when dealing with variable height tables
 			if(!this.fixedHeight && initialHeight != this.element.clientHeight){
+				resized = true;
 				if(this.subscribed("table-resize")){
 					this.dispatch("table-resize");
 				}else{
 					this.redraw();
 				}
 			}
-
+			
 			this.scrollBarCheck();
 		}
 		
 		this._positionPlaceholder();
+		return resized;
 	}
 	
 	//reinitialize all rows
@@ -1083,15 +1102,14 @@ export default class RowManager extends CoreFeature{
 	
 	//redraw table
 	redraw (force){
-		var left = this.scrollLeft;
-		
-		this.adjustTableSize();
-		
+		const resized = this.adjustTableSize();
 		this.table.tableWidth = this.table.element.clientWidth;
 		
 		if(!force){
-			this.reRenderInPosition();
-			this.scrollHorizontal(left);
+			if(resized) {
+				this.reRenderInPosition();
+			}
+			this.scrollHorizontal(this.scrollLeft);
 		}else{
 			this.renderTable();
 		}

package/src/js/core/cell/CellComponent.js

@@ -35,10 +35,12 @@ export default class CellComponent {
 		return this._cell.row.getComponent();
 	}
 
-	getData(){
-		return this._cell.row.getData();
+	getData(transform){
+		return this._cell.row.getData(transform);
+	}
+	getType(){
+		return "cell";
 	}
-
 	getField(){
 		return this._cell.column.getField();
 	}

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

@@ -99,8 +99,8 @@ export default class ColumnComponent {
 		return this._column;
 	}
 
-	scrollTo(){
-		return this._column.table.columnManager.scrollToColumn(this._column);
+	scrollTo(position, ifVisible){
+		return this._column.table.columnManager.scrollToColumn(this._column, position, ifVisible);
 	}
 
 	getTable(){

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

@@ -4,14 +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) => {
-			row.element.appendChild(cell.getElement());
-			cell.cellRendered();
+			rowFrag.appendChild(cell.getElement());
 		});
+		row.element.appendChild(rowFrag);
+		
+		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,77 +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(){
+	
+	renderRows() {
 		var element = this.tableElement,
-		onlyGroupHeaders = true;
-
-		this.rows().forEach((row, index) => {
+		onlyGroupHeaders = true,
+		tableFrag = document.createDocumentFragment(),
+		rows = this.rows();
+		
+		rows.forEach((row, index) => {
 			this.styleRow(row, index);
-			element.appendChild(row.getElement());
-			row.initialize(true);
-
-			if(row.type !== "group"){
+			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/VirtualDomHorizontal.js

@@ -173,8 +173,13 @@ export default class VirtualDomHorizontal extends Renderer{
 		if(this.initialized){
 			this.initializeRow(row);
 		}else{
+			const rowFrag = document.createDocumentFragment();
+			row.cells.forEach((cell) => {
+				rowFrag.appendChild(cell.getElement());
+			});
+			row.element.appendChild(rowFrag);
+
 			row.cells.forEach((cell) => {
-				row.element.appendChild(cell.getElement());
 				cell.cellRendered();
 			});
 		}