tabulator-tables 5.4.4 → 5.5.0

package/package.json

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

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,6 +977,12 @@ 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);
@@ -982,7 +994,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 +1029,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 +1038,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 +1053,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 +1100,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

@@ -5,9 +5,14 @@ export default class BasicHorizontal extends Renderer{
 		super(table);
 	}
 
-	renderRowCells(row){
+	renderRowCells(row) {
+		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();
 		});
 	}

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

@@ -29,19 +29,22 @@ export default class BasicVertical extends Renderer{
 		element.style.visibility = "";
 	}
 
-	renderRows(){
+	renderRows() {
 		var element = this.tableElement,
-		onlyGroupHeaders = true;
+		onlyGroupHeaders = true,
+		tableFrag = document.createDocumentFragment();
 
 		this.rows().forEach((row, index) => {
 			this.styleRow(row, index);
-			element.appendChild(row.getElement());
 			row.initialize(true);
 
-			if(row.type !== "group"){
+			if (row.type !== "group") {
 				onlyGroupHeaders = false;
 			}
+
+			tableFrag.appendChild(row.getElement());
 		});
+		element.appendChild(tableFrag);
 
 		if(onlyGroupHeaders){
 			element.style.minWidth = this.table.columnManager.getWidth() + "px";
@@ -77,4 +80,4 @@ export default class BasicVertical extends Renderer{
 		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();
 			});
 		}

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

@@ -44,7 +44,6 @@ export default class VirtualDomVertical extends Renderer{
 
 		element.style.paddingTop = "";
 		element.style.paddingBottom = "";
-		// element.style.minWidth = "";
 		element.style.minHeight = "";
 		element.style.display = "";
 		element.style.visibility = "";
@@ -223,17 +222,27 @@ export default class VirtualDomVertical extends Renderer{
 	//////////////////////////////////////
 
 	//full virtual render
-	_virtualRenderFill(position, forceMove, offset){
+	_virtualRenderFill(position, forceMove, offset) {
 		var	element = this.tableElement,
 		holder = this.elementVertical,
 		topPad = 0,
 		rowsHeight = 0,
+		rowHeight = 0,
 		heightOccupied = 0,
 		topPadHeight = 0,
 		i = 0,
 		rows = this.rows(),
 		rowsCount = rows.length,
-		containerHeight = this.elementVertical.clientHeight;
+		index = 0,
+		row,
+		rowFragment,
+		renderedRows = [],
+		totalRowsRendered = 0,
+		rowsToRender = 0,
+		fixedHeight = this.table.rowManager.fixedHeight,
+		containerHeight = this.elementVertical.clientHeight, 
+		avgRowHeight = this.table.options.rowHeight, 
+		resized = true;
 
 		position = position || 0;
 
@@ -241,7 +250,7 @@ export default class VirtualDomVertical extends Renderer{
 
 		if(!position){
 			this.clear();
-		}else{
+		}else {
 			while(element.firstChild) element.removeChild(element.firstChild);
 
 			//check if position is too close to bottom of table
@@ -261,54 +270,99 @@ export default class VirtualDomVertical extends Renderer{
 
 		if(rowsCount && Helpers.elVisible(this.elementVertical)){
 			this.vDomTop = position;
-
 			this.vDomBottom = position -1;
 
-			while ((rowsHeight <= containerHeight + this.vDomWindowBuffer || i < this.vDomWindowMinTotalRows) && this.vDomBottom < rowsCount -1){
-				var index = this.vDomBottom + 1,
-				row = rows[index],
-				rowHeight = 0;
-
-				this.styleRow(row, index);
+			if(fixedHeight || this.table.options.maxHeight) {
+				if(avgRowHeight) {
+					rowsToRender = (containerHeight / avgRowHeight) + (this.vDomWindowBuffer / avgRowHeight);
+				}
+				rowsToRender = Math.max(this.vDomWindowMinTotalRows, Math.ceil(rowsToRender));
+			}
+			else {
+				rowsToRender = rowsCount;
+			}
 
-				element.appendChild(row.getElement());
+			while(((rowsToRender == rowsCount || rowsHeight <= containerHeight + this.vDomWindowBuffer) || totalRowsRendered < this.vDomWindowMinTotalRows) && this.vDomBottom < rowsCount -1) {
+				renderedRows = [];
+				rowFragment = document.createDocumentFragment();
 
-				row.initialize();
+				i = 0;
+				while ((i < rowsToRender) && this.vDomBottom < rowsCount -1) {	
+					index = this.vDomBottom + 1,
+					row = rows[index];
 
-				if(!row.heightInitialized){
-					row.normalizeHeight(true);
-				}
+					this.styleRow(row, index);
 
-				rowHeight = row.getHeight();
+					row.initialize();
+					if(!row.heightInitialized && !this.table.options.rowHeight){
+						row.clearCellHeight();
+					}
 
-				if(i < topPad){
-					topPadHeight += rowHeight;
-				}else{
-					rowsHeight += rowHeight;
+					rowFragment.appendChild(row.getElement());
+					renderedRows.push(row);
+					this.vDomBottom ++;
+					i++;
 				}
 
-				if(rowHeight > this.vDomWindowBuffer){
-					this.vDomWindowBuffer = rowHeight * 2;
+				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) => {
+					if(!row.heightInitialized) {
+						row.calcHeight(true);
+						
+					}
+				});
+
+				renderedRows.forEach((row) => {
+					if(!row.heightInitialized) {
+						row.setCellHeight();
+						
+					}
+				});
+
+				renderedRows.forEach((row) => {
+					rowHeight = row.getHeight();
+					
+					if(totalRowsRendered < topPad){
+						topPadHeight += rowHeight;
+					}else {
+						rowsHeight += rowHeight;
+					}
 
-				this.vDomBottom ++;
-				i++;
+					if(rowHeight > this.vDomWindowBuffer){
+						this.vDomWindowBuffer = rowHeight * 2;
+					}
+					totalRowsRendered++;
+				});
+
+				resized = this.table.rowManager.adjustTableSize();
+				containerHeight = this.elementVertical.clientHeight;
+				if(resized && (fixedHeight || this.table.options.maxHeight))
+				{
+					avgRowHeight = rowsHeight / totalRowsRendered;
+					rowsToRender = Math.max(this.vDomWindowMinTotalRows, Math.ceil((containerHeight / avgRowHeight) + (this.vDomWindowBuffer / avgRowHeight)));
+				}
 			}
 
 			if(!position){
 				this.vDomTopPad = 0;
 				//adjust row height to match average of rendered elements
-				this.vDomRowHeight = Math.floor((rowsHeight + topPadHeight) / i);
+				this.vDomRowHeight = Math.floor((rowsHeight + topPadHeight) / totalRowsRendered);
 				this.vDomBottomPad = this.vDomRowHeight * (rowsCount - this.vDomBottom -1);
 
 				this.vDomScrollHeight = topPadHeight + rowsHeight + this.vDomBottomPad - containerHeight;
-			}else{
+			}else {
 				this.vDomTopPad = !forceMove ? this.scrollTop - topPadHeight : (this.vDomRowHeight * this.vDomTop) + offset;
 				this.vDomBottomPad = this.vDomBottom == rowsCount-1 ? 0 : Math.max(this.vDomScrollHeight - this.vDomTopPad - rowsHeight - topPadHeight, 0);
 			}
-
-			element.style.paddingTop = this.vDomTopPad + "px";
-			element.style.paddingBottom = this.vDomBottomPad + "px";
+			
+			element.style.paddingTop = this.vDomTopPad+"px";
+			element.style.paddingBottom = this.vDomBottomPad+"px";
 
 			if(forceMove){
 				this.scrollTop = this.vDomTopPad + (topPadHeight) + offset - (this.elementVertical.scrollWidth > this.elementVertical.clientWidth ? this.elementVertical.offsetHeight - containerHeight : 0);
@@ -577,4 +631,4 @@ export default class VirtualDomVertical extends Renderer{
 			row.setCellHeight();
 		}
 	}
-}
+}

package/src/js/core/row/RowComponent.js

@@ -54,8 +54,8 @@ export default class RowComponent {
 		return this._row.delete();
 	}
 
-	scrollTo(){
-		return this._row.table.rowManager.scrollToRow(this._row);
+	scrollTo(position, ifVisible){
+		return this._row.table.rowManager.scrollToRow(this._row, position, ifVisible);
 	}
 
 	move(to, after){

package/src/js/modules/ColumnCalcs/defaults/calculations.js

@@ -83,4 +83,11 @@ export default {
 
 		return output;
 	},
+	"unique":function(values, data, calcParams){
+		var unique = values.filter((value, index) => {
+			return (values || value === 0) && values.indexOf(value) === index;
+		});
+
+		return unique.length;
+	},
 };

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

@@ -305,7 +305,7 @@ class DataTree extends Module{
 
 				row.create();
 
-				config = row.modules.dataTree.children;
+				config = row.modules.dataTree;
 
 				if(!config.index && config.children !== false){
 					children = this.getChildren(row);

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

@@ -6,8 +6,11 @@ export default function(list, options, setFileContents){
 	workbook = XLSX.utils.book_new(),
 	tableFeatures = new CoreFeature(this),
 	compression =  'compress' in options ? options.compress : true,
+	writeOptions = options.writeOptions || {bookType:'xlsx', bookSST:true, compression},
 	output;
 
+	writeOptions.type = 'binary';
+
 	workbook.SheetNames = [];
 	workbook.Sheets = {};
 
@@ -93,7 +96,7 @@ export default function(list, options, setFileContents){
 		return buf;
 	}
 
-	output = XLSX.write(workbook, {bookType:'xlsx', bookSST:true, type: 'binary', compression });
+	output = XLSX.write(workbook, writeOptions);
 
 	setFileContents(s2ab(output), "application/octet-stream");
-}
+}

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

@@ -514,8 +514,8 @@ class Edit extends Module{
 			cellEl = cell.getElement();
 			
 			if(this.table.modExists("frozenColumns")){
-				leftEdge += parseInt(this.table.modules.frozenColumns.leftMargin);
-				rightEdge -= parseInt(this.table.modules.frozenColumns.rightMargin);
+				leftEdge += parseInt(this.table.modules.frozenColumns.leftMargin || 0);
+				rightEdge -= parseInt(this.table.modules.frozenColumns.rightMargin || 0);
 			}
 			
 			if(this.table.options.renderHorizontal === "virtual"){
@@ -524,7 +524,6 @@ class Edit extends Module{
 			}
 			
 			if(cellEl.offsetLeft < leftEdge){
-				
 				this.table.rowManager.element.scrollLeft -= (leftEdge - cellEl.offsetLeft);
 			}else{
 				if(cellEl.offsetLeft + cellEl.offsetWidth  > rightEdge){