tabulator-tables 5.2.7 → 5.3.2

package/src/js/modules/ResizeTable/ResizeTable.js

@@ -1,124 +1,155 @@
 import Module from '../../core/Module.js';
 
 class ResizeTable extends Module{
-
+	
 	constructor(table){
 		super(table);
-
+		
 		this.binding = false;
-		this.observer = false;
+		this.visibilityObserver = false;
+		this.resizeObserver = false;
 		this.containerObserver = false;
-
+		
 		this.tableHeight = 0;
 		this.tableWidth = 0;
 		this.containerHeight = 0;
 		this.containerWidth = 0;
-
+		
 		this.autoResize = false;
-
+		
+		this.visible = false;
+		
+		this.initialized = false;
+		this.initialRedraw = false;
+		
 		this.registerTableOption("autoResize", true); //auto resize table
 	}
-
+	
 	initialize(){
 		if(this.table.options.autoResize){
 			var table = this.table,
 			tableStyle;
-
+			
 			this.tableHeight = table.element.clientHeight;
 			this.tableWidth = table.element.clientWidth;
-
+			
 			if(table.element.parentNode){
 				this.containerHeight = table.element.parentNode.clientHeight;
 				this.containerWidth = table.element.parentNode.clientWidth;
 			}
-
-			if(typeof ResizeObserver !== "undefined" && table.rowManager.getRenderMode() === "virtual"){
-
+			
+			if(typeof IntersectionObserver !== "undefined" && typeof ResizeObserver !== "undefined" && table.rowManager.getRenderMode() === "virtual"){
+				
+				this.initializeVisibilityObserver();
+				
 				this.autoResize = true;
-
-				this.observer = new ResizeObserver((entry) => {
+				
+				this.resizeObserver = new ResizeObserver((entry) => {
 					if(!table.browserMobile || (table.browserMobile &&!table.modules.edit.currentCell)){
-
+						
 						var nodeHeight = Math.floor(entry[0].contentRect.height);
 						var nodeWidth = Math.floor(entry[0].contentRect.width);
-
+						
 						if(this.tableHeight != nodeHeight || this.tableWidth != nodeWidth){
 							this.tableHeight = nodeHeight;
 							this.tableWidth = nodeWidth;
-
+							
 							if(table.element.parentNode){
 								this.containerHeight = table.element.parentNode.clientHeight;
 								this.containerWidth = table.element.parentNode.clientWidth;
 							}
-
-							this.table.columnManager.renderer.rerenderColumns(true);
-
-							table.redraw();
+						
+							this.redrawTable();
 						}
-
 					}
 				});
-
-				this.observer.observe(table.element);
-
+				
+				this.resizeObserver.observe(table.element);
+				
 				tableStyle = window.getComputedStyle(table.element);
-
+				
 				if(this.table.element.parentNode && !this.table.rowManager.fixedHeight && (tableStyle.getPropertyValue("max-height") || tableStyle.getPropertyValue("min-height"))){
-
+					
 					this.containerObserver = new ResizeObserver((entry) => {
 						if(!table.browserMobile || (table.browserMobile &&!table.modules.edit.currentCell)){
-
+							
 							var nodeHeight = Math.floor(entry[0].contentRect.height);
 							var nodeWidth = Math.floor(entry[0].contentRect.width);
-
+							
 							if(this.containerHeight != nodeHeight || this.containerWidth != nodeWidth){
 								this.containerHeight = nodeHeight;
 								this.containerWidth = nodeWidth;
 								this.tableHeight = table.element.clientHeight;
 								this.tableWidth = table.element.clientWidth;
 							}
-
-							table.columnManager.renderer.rerenderColumns(true);
-
-							table.redraw();
+							
+							this.redrawTable();
 						}
 					});
-
+					
 					this.containerObserver.observe(this.table.element.parentNode);
 				}
-
+				
 				this.subscribe("table-resize", this.tableResized.bind(this));
-
+				
 			}else{
 				this.binding = function(){
 					if(!table.browserMobile || (table.browserMobile && !table.modules.edit.currentCell)){
-
-						table.columnManager.renderer.rerenderColumns(true);
-
+						table.columnManager.rerenderColumns(true);
 						table.redraw();
 					}
 				};
-
+				
 				window.addEventListener("resize", this.binding);
 			}
-
+			
 			this.subscribe("table-destroy", this.clearBindings.bind(this));
 		}
 	}
+	
+	initializeVisibilityObserver(){
+		this.visibilityObserver = new IntersectionObserver((entries) => {
+			this.visible = entries[0].isIntersecting;
+
+			if(!this.initialized){
+				this.initialized = true;
+				this.initialRedraw = !this.visible;
+			}
 
+			if(this.visible){
+				this.redrawTable(this.initialRedraw);
+				this.initialRedraw = false;
+			}
+			
+		});
+		
+		this.visibilityObserver.observe(this.table.element);
+	}
+	
+	redrawTable(force){
+		if(this.initialized && this.visible){
+			this.table.columnManager.rerenderColumns(true);
+			this.table.redraw(force);
+		}
+	}
+	
 	tableResized(){
 		this.table.rowManager.redraw();
 	}
-
+	
 	clearBindings(){
 		if(this.binding){
 			window.removeEventListener("resize", this.binding);
 		}
-
-		if(this.observer){
-			this.observer.unobserve(this.table.element);
+		
+		if(this.resizeObserver){
+			this.resizeObserver.unobserve(this.table.element);
 		}
-
+		
+		if(this.visibilityObserver){
+			this.visibilityObserver.unobserve(this.table.element);
+		}
+		
 		if(this.containerObserver){
 			this.containerObserver.unobserve(this.table.element.parentNode);
 		}

package/src/js/modules/ResponsiveLayout/ResponsiveLayout.js

@@ -23,9 +23,6 @@ class ResponsiveLayout extends Module{
 
 	//generate responsive columns list
 	initialize(){
-		var self = this,
-		columns = [];
-
 		if(this.table.options.responsiveLayout){
 			this.subscribe("column-layout", this.initializeColumn.bind(this));
 			this.subscribe("column-show", this.updateColumnVisibility.bind(this));
@@ -36,8 +33,9 @@ class ResponsiveLayout extends Module{
 			this.subscribe("column-delete", this.initializeResponsivity.bind(this));
 
 			this.subscribe("table-redrawing", this.tableRedraw.bind(this));
-
+			
 			if(this.table.options.responsiveLayout === "collapse"){
+				this.subscribe("row-data-changed", this.generateCollapsedRowContent.bind(this));
 				this.subscribe("row-init", this.initializeRow.bind(this));
 				this.subscribe("row-layout", this.layoutRow.bind(this));
 			}
@@ -344,4 +342,4 @@ class ResponsiveLayout extends Module{
 
 ResponsiveLayout.moduleName = "responsiveLayout";
 
-export default ResponsiveLayout;
+export default ResponsiveLayout;

package/src/js/modules/SelectRow/SelectRow.js

@@ -15,7 +15,7 @@ class SelectRow extends Module{
 		this.registerTableOption("selectableRangeMode", "drag");  //highlight rows on hover
 		this.registerTableOption("selectableRollingSelection", true); //roll selection once maximum number of selectable rows is reached
 		this.registerTableOption("selectablePersistence", true); // maintain selection when table view is updated
-		this.registerTableOption("selectableCheck", function(data, row){return true;}); //check wheather row is selectable
+		this.registerTableOption("selectableCheck", function(data, row){return true;}); //check whether row is selectable
 		
 		this.registerTableFunction("selectRow", this.selectRows.bind(this));
 		this.registerTableFunction("deselectRow", this.deselectRows.bind(this));
@@ -173,7 +173,7 @@ class SelectRow extends Module{
 				
 				if(this.table.options.selectable !== true){
 					if(toggledRows.length > this.table.options.selectable){
-						toggledRows = toggledRows.slice(0, this.table.options.selectable)
+						toggledRows = toggledRows.slice(0, this.table.options.selectable);
 					}
 				}
 				
@@ -208,46 +208,44 @@ class SelectRow extends Module{
 		
 		switch(typeof rows){
 			case "undefined":
-			this.table.rowManager.rows.forEach((row) => {
-				this._selectRow(row, true, true);
-			});
+				this.table.rowManager.rows.forEach((row) => {
+					this._selectRow(row, true, true);
+				});
 			
-			this._rowSelectionChanged();
-			break;
+				this._rowSelectionChanged();
+				break;
 			
 			case "string":
 			
-			rowMatch = this.table.rowManager.findRow(rows);
+				rowMatch = this.table.rowManager.findRow(rows);
 			
-			if(rowMatch){
-				this._selectRow(rowMatch, true, true);
-			}else{
-				this.table.rowManager.getRows(rows).forEach((row) => {
-					this._selectRow(row, true, true);
-				});
-			}
+				if(rowMatch){
+					this._selectRow(rowMatch, true, true);
+				}else{
+					this.table.rowManager.getRows(rows).forEach((row) => {
+						this._selectRow(row, true, true);
+					});
+				}
 			
-			this._rowSelectionChanged();
-			break;
+				this._rowSelectionChanged();
+				break;
 			
 			default:
-			if(Array.isArray(rows)){
-				rows.forEach((row) => {
-					this._selectRow(row, true, true);
-				});
+				if(Array.isArray(rows)){
+					rows.forEach((row) => {
+						this._selectRow(row, true, true);
+					});
 				
-				this._rowSelectionChanged();
-			}else{
-				this._selectRow(rows, false, true);
-			}
-			break;
+					this._rowSelectionChanged();
+				}else{
+					this._selectRow(rows, false, true);
+				}
+				break;
 		}
 	}
 	
 	//select an individual row
 	_selectRow(rowInfo, silent, force){
-		var index;
-		
 		//handle max row count
 		if(!isNaN(this.table.options.selectable) && this.table.options.selectable !== true && !force){
 			if(this.selectedRows.length >= this.table.options.selectable){

package/src/js/modules/Sort/Sort.js

@@ -7,56 +7,56 @@ class Sort extends Module{
 	constructor(table){
 		super(table);
 
-	 	this.sortList = []; //holder current sort
-	 	this.changed = false; //has the sort changed since last render
+		this.sortList = []; //holder current sort
+		this.changed = false; //has the sort changed since last render
 
-	 	this.registerTableOption("sortMode", "local"); //local or remote sorting
+		this.registerTableOption("sortMode", "local"); //local or remote sorting
 
-	 	this.registerTableOption("initialSort", false); //initial sorting criteria
-	 	this.registerTableOption("columnHeaderSortMulti", true); //multiple or single column sorting
-	 	this.registerTableOption("sortOrderReverse", false); //reverse internal sort ordering
-	 	this.registerTableOption("headerSortElement", "<div class='tabulator-arrow'></div>"); //header sort element
+		this.registerTableOption("initialSort", false); //initial sorting criteria
+		this.registerTableOption("columnHeaderSortMulti", true); //multiple or single column sorting
+		this.registerTableOption("sortOrderReverse", false); //reverse internal sort ordering
+		this.registerTableOption("headerSortElement", "<div class='tabulator-arrow'></div>"); //header sort element
 
-	 	this.registerColumnOption("sorter");
-	 	this.registerColumnOption("sorterParams");
+		this.registerColumnOption("sorter");
+		this.registerColumnOption("sorterParams");
 
-	 	this.registerColumnOption("headerSort", true);
-	 	this.registerColumnOption("headerSortStartingDir");
-	 	this.registerColumnOption("headerSortTristate");
+		this.registerColumnOption("headerSort", true);
+		this.registerColumnOption("headerSortStartingDir");
+		this.registerColumnOption("headerSortTristate");
 
-	 }
+	}
 
-	 initialize(){
-	 	this.subscribe("column-layout", this.initializeColumn.bind(this));
-	 	this.subscribe("table-built", this.tableBuilt.bind(this));
-	 	this.registerDataHandler(this.sort.bind(this), 20);
+	initialize(){
+		this.subscribe("column-layout", this.initializeColumn.bind(this));
+		this.subscribe("table-built", this.tableBuilt.bind(this));
+		this.registerDataHandler(this.sort.bind(this), 20);
 
-	 	this.registerTableFunction("setSort", this.userSetSort.bind(this));
-	 	this.registerTableFunction("getSorters", this.getSort.bind(this));
-	 	this.registerTableFunction("clearSort", this.clearSort.bind(this));
+		this.registerTableFunction("setSort", this.userSetSort.bind(this));
+		this.registerTableFunction("getSorters", this.getSort.bind(this));
+		this.registerTableFunction("clearSort", this.clearSort.bind(this));
 
-	 	if(this.table.options.sortMode === "remote"){
-	 		this.subscribe("data-params", this.remoteSortParams.bind(this));
-	 	}
-	 }
+		if(this.table.options.sortMode === "remote"){
+			this.subscribe("data-params", this.remoteSortParams.bind(this));
+		}
+	}
 
-	 tableBuilt(){
-	 	if(this.table.options.initialSort){
-	 		this.setSort(this.table.options.initialSort);
-	 	}
-	 }
+	tableBuilt(){
+		if(this.table.options.initialSort){
+			this.setSort(this.table.options.initialSort);
+		}
+	}
 
-	 remoteSortParams(data, config, silent, params){
-	 	var sorters = this.getSort();
+	remoteSortParams(data, config, silent, params){
+		var sorters = this.getSort();
 
-	 	sorters.forEach((item) => {
-	 		delete item.column;
-	 	});
+		sorters.forEach((item) => {
+			delete item.column;
+		});
 
-	 	params.sort = sorters;
+		params.sort = sorters;
 
-	 	return params;
-	 }
+		return params;
+	}
 
 
 	///////////////////////////////////
@@ -88,16 +88,16 @@ class Sort extends Module{
 
 		switch(typeof column.definition.sorter){
 			case "string":
-			if(Sort.sorters[column.definition.sorter]){
-				sorter = Sort.sorters[column.definition.sorter];
-			}else{
-				console.warn("Sort Error - No such sorter found: ", column.definition.sorter);
-			}
-			break;
+				if(Sort.sorters[column.definition.sorter]){
+					sorter = Sort.sorters[column.definition.sorter];
+				}else{
+					console.warn("Sort Error - No such sorter found: ", column.definition.sorter);
+				}
+				break;
 
 			case "function":
-			sorter = column.definition.sorter;
-			break;
+				sorter = column.definition.sorter;
+				break;
 		}
 
 		column.modules.sort = {
@@ -117,10 +117,17 @@ class Sort extends Module{
 			arrowEl = document.createElement("div");
 			arrowEl.classList.add("tabulator-col-sorter");
 
-			if(typeof this.table.options.headerSortElement == "object"){
-				arrowEl.appendChild(this.table.options.headerSortElement);
-			}else{
-				arrowEl.innerHTML = this.table.options.headerSortElement;
+			switch(this.table.options.headerSortElement){
+				case "function":
+					//do nothing
+					break;
+
+				case "object":
+					arrowEl.appendChild(this.table.options.headerSortElement);
+					break;
+					
+				default:
+					arrowEl.innerHTML = this.table.options.headerSortElement;
 			}
 
 			//create sorter arrow
@@ -128,6 +135,8 @@ class Sort extends Module{
 
 			column.modules.sort.element = arrowEl;
 
+			this.setColumnHeaderSortIcon(column, "none");
+
 			//sort on click
 			colEl.addEventListener("click", (e) => {
 				var dir = "",
@@ -148,19 +157,18 @@ class Sort extends Module{
 					}else{
 						switch(column.modules.sort.dir){
 							case "asc":
-							dir = "desc";
-							break;
+								dir = "desc";
+								break;
 
 							case "desc":
-							dir = "asc";
-							break;
+								dir = "asc";
+								break;
 
 							default:
-							dir = column.modules.sort.startingDir;
+								dir = column.modules.sort.startingDir;
 						}
 					}
 
-
 					if (this.table.options.columnHeaderSortMulti && (e.shiftKey || e.ctrlKey)) {
 						sorters = this.getSort();
 
@@ -171,11 +179,9 @@ class Sort extends Module{
 						if(match > -1){
 							sorters[match].dir = dir;
 
-							if(match != sorters.length -1){
-								match = sorters.splice(match, 1)[0];
-								if(dir != "none"){
-									sorters.push(match);
-								}
+							match = sorters.splice(match, 1)[0];
+							if(dir != "none"){
+								sorters.push(match);
 							}
 						}else{
 							if(dir != "none"){
@@ -285,22 +291,22 @@ class Sort extends Module{
 
 				switch(typeof value){
 					case "undefined":
-					sorter = "string";
-					break;
+						sorter = "string";
+						break;
 
 					case "boolean":
-					sorter = "boolean";
-					break;
+						sorter = "boolean";
+						break;
 
 					default:
-					if(!isNaN(value) && value !== ""){
-						sorter = "number";
-					}else{
-						if(value.match(/((^[0-9]+[a-z]+)|(^[a-z]+[0-9]+))+$/i)){
-							sorter = "alphanum";
+						if(!isNaN(value) && value !== ""){
+							sorter = "number";
+						}else{
+							if(value.match(/((^[0-9]+[a-z]+)|(^[a-z]+[0-9]+))+$/i)){
+								sorter = "alphanum";
+							}
 						}
-					}
-					break;
+						break;
 				}
 			}
 		}
@@ -313,8 +319,7 @@ class Sort extends Module{
 		var self = this,
 		sortList = this.table.options.sortOrderReverse ? self.sortList.slice().reverse() : self.sortList,
 		sortListActual = [],
-		rowComponents = [],
-		lastSort;
+		rowComponents = [];
 
 		if(this.subscribedExternal("dataSorting")){
 			this.dispatchExternal("dataSorting", self.getSort());
@@ -326,21 +331,25 @@ class Sort extends Module{
 
 			//build list of valid sorters and trigger column specific callbacks before sort begins
 			sortList.forEach(function(item, i){
-				var sortObj = item.column.modules.sort;
+				var sortObj;
 
-				if(item.column && sortObj){
+				if(item.column){
+					sortObj = item.column.modules.sort;
 
-					//if no sorter has been defined, take a guess
-					if(!sortObj.sorter){
-						sortObj.sorter = self.findSorter(item.column);
-					}
+					if(sortObj){
 
-					item.params = typeof sortObj.params === "function" ? sortObj.params(item.column.getComponent(), item.dir) : sortObj.params;
+						//if no sorter has been defined, take a guess
+						if(!sortObj.sorter){
+							sortObj.sorter = self.findSorter(item.column);
+						}
 
-					sortListActual.push(item);
-				}
+						item.params = typeof sortObj.params === "function" ? sortObj.params(item.column.getComponent(), item.dir) : sortObj.params;
 
-				self.setColumnHeader(item.column, item.dir);
+						sortListActual.push(item);
+					}
+
+					self.setColumnHeader(item.column, item.dir);
+				}
 			});
 
 			//sort data
@@ -367,10 +376,11 @@ class Sort extends Module{
 
 	//clear sort arrows on columns
 	clearColumnHeaders(){
-		this.table.columnManager.getRealColumns().forEach(function(column){
+		this.table.columnManager.getRealColumns().forEach((column) => {
 			if(column.modules.sort){
 				column.modules.sort.dir = "none";
 				column.getElement().setAttribute("aria-sort", "none");
+				this.setColumnHeaderSortIcon(column, "none");
 			}
 		});
 	}
@@ -379,6 +389,24 @@ class Sort extends Module{
 	setColumnHeader(column, dir){
 		column.modules.sort.dir = dir;
 		column.getElement().setAttribute("aria-sort", dir === "asc" ? "ascending" : "descending");
+		this.setColumnHeaderSortIcon(column, dir);
+	}
+
+	setColumnHeaderSortIcon(column, dir){
+		var sortEl = column.modules.sort.element,
+		arrowEl;
+
+		if(column.definition.headerSort && typeof this.table.options.headerSortElement === "function"){
+			while(sortEl.firstChild) sortEl.removeChild(sortEl.firstChild);
+
+			arrowEl = this.table.options.headerSortElement.call(this.table, column.getComponent(), dir);
+			
+			if(typeof arrowEl === "object"){
+				sortEl.appendChild(arrowEl);
+			}else{
+				sortEl.innerHTML = arrowEl;
+			}
+		}
 	}
 
 	//sort each item in sort list
@@ -404,7 +432,7 @@ class Sort extends Module{
 
 	//process individual rows for a sort function on active data
 	_sortRow(a, b, column, dir, params){
-		var el1Comp, el2Comp, colComp;
+		var el1Comp, el2Comp;
 
 		//switch elements depending on search direction
 		var el1 = dir == "asc" ? a : b;

package/src/js/modules/Sort/defaults/sorters/alphanum.js

@@ -41,4 +41,4 @@ export default function(as, bs, aRow, bRow, column, dir, params){
 	}
 
 	return emptyAlign;
-};
+}