tabulator-tables 5.2.6 → 5.3.1

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

@@ -1,12 +1,12 @@
 import CellComponent from '../../../../core/cell/CellComponent.js';
 
-export default function(cell, formatterParams, onRendered){ //progress bar
+export default function(cell, formatterParams = {}, onRendered){ //progress bar
 	var value = this.sanitizeHTML(cell.getValue()) || 0,
 	element = cell.getElement(),
-	max = formatterParams && formatterParams.max ? formatterParams.max : 100,
-	min = formatterParams && formatterParams.min ? formatterParams.min : 0,
-	legendAlign = formatterParams && formatterParams.legendAlign ? formatterParams.legendAlign : "center",
-	percent, percentValue, color, legend, legendColor, top, left, right, bottom;
+	max = formatterParams.max ? formatterParams.max : 100,
+	min = formatterParams.min ? formatterParams.min : 0,
+	legendAlign = formatterParams.legendAlign ? formatterParams.legendAlign : "center",
+	percent, percentValue, color, legend, legendColor;
 
 	//make sure value is in range
 	percentValue = parseFloat(value) <= max ? parseFloat(value) : max;
@@ -19,60 +19,60 @@ export default function(cell, formatterParams, onRendered){ //progress bar
 	//set bar color
 	switch(typeof formatterParams.color){
 		case "string":
-		color = formatterParams.color;
-		break;
+			color = formatterParams.color;
+			break;
 		case "function":
-		color = formatterParams.color(value);
-		break;
-		case "object":
-		if(Array.isArray(formatterParams.color)){
-			var unit = 100 / formatterParams.color.length;
-			var index = Math.floor(percentValue / unit);
-
-			index = Math.min(index, formatterParams.color.length - 1);
-			index = Math.max(index, 0);
-			color = formatterParams.color[index];
+			color = formatterParams.color(value);
 			break;
-		}
+		case "object":
+			if(Array.isArray(formatterParams.color)){
+				let unit = 100 / formatterParams.color.length;
+				let index = Math.floor(percentValue / unit);
+
+				index = Math.min(index, formatterParams.color.length - 1);
+				index = Math.max(index, 0);
+				color = formatterParams.color[index];
+				break;
+			}
 		default:
-		color = "#2DC214";
+			color = "#2DC214";
 	}
 
 	//generate legend
 	switch(typeof formatterParams.legend){
 		case "string":
-		legend = formatterParams.legend;
-		break;
+			legend = formatterParams.legend;
+			break;
 		case "function":
-		legend = formatterParams.legend(value);
-		break;
+			legend = formatterParams.legend(value);
+			break;
 		case "boolean":
-		legend = value;
-		break;
+			legend = value;
+			break;
 		default:
-		legend = false;
+			legend = false;
 	}
 
 	//set legend color
 	switch(typeof formatterParams.legendColor){
 		case "string":
-		legendColor = formatterParams.legendColor;
-		break;
+			legendColor = formatterParams.legendColor;
+			break;
 		case "function":
-		legendColor = formatterParams.legendColor(value);
-		break;
+			legendColor = formatterParams.legendColor(value);
+			break;
 		case "object":
-		if(Array.isArray(formatterParams.legendColor)){
-			var unit = 100 / formatterParams.legendColor.length;
-			var index = Math.floor(percentValue / unit);
-
-			index = Math.min(index, formatterParams.legendColor.length - 1);
-			index = Math.max(index, 0);
-			legendColor = formatterParams.legendColor[index];
-		}
-		break;
+			if(Array.isArray(formatterParams.legendColor)){
+				let unit = 100 / formatterParams.legendColor.length;
+				let index = Math.floor(percentValue / unit);
+
+				index = Math.min(index, formatterParams.legendColor.length - 1);
+				index = Math.max(index, 0);
+				legendColor = formatterParams.legendColor[index];
+			}
+			break;
 		default:
-		legendColor = "#000";
+			legendColor = "#000";
 	}
 
 	element.style.minWidth = "30px";
@@ -82,7 +82,6 @@ export default function(cell, formatterParams, onRendered){ //progress bar
 
 	var barEl = document.createElement("div");
 	barEl.style.display = "inline-block";
-	barEl.style.position = "absolute";
 	barEl.style.width = percentValue + "%";
 	barEl.style.backgroundColor = color;
 	barEl.style.height = "100%";
@@ -131,4 +130,4 @@ export default function(cell, formatterParams, onRendered){ //progress bar
 	});
 
 	return "";
-};
+}

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

@@ -1,6 +1,5 @@
 export default function(cell, formatterParams, onRendered){
-	var open = false,
-	el = document.createElement("div"),
+	var el = document.createElement("div"),
 	config = cell.getRow()._row.modules.responsiveLayout;
 
 	el.classList.add("tabulator-responsive-collapse-toggle");
@@ -28,9 +27,10 @@ export default function(cell, formatterParams, onRendered){
 	el.addEventListener("click", function(e){
 		e.stopImmediatePropagation();
 		toggleList(!config.open);
+		cell.getTable().rowManager.adjustTableSize();
 	});
 
 	toggleList(config.open);
 
 	return el;
-};
+}

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

@@ -57,4 +57,4 @@ export default function(cell, formatterParams, onRendered){
 	}
 
 	return checkbox;
-};
+}

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

@@ -1,3 +1,10 @@
 export default function(cell, formatterParams, onRendered){
-	return this.table.rowManager.activeRows.indexOf(cell.getRow()._getSelf()) + 1 || "";
-};
+	var content = document.createElement("span");
+	var row = cell.getRow();
+
+	row.watchPosition((position) => {
+		content.innerText = position;
+	});
+	
+	return content;
+}

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

@@ -35,4 +35,4 @@ export default function(cell, formatterParams, onRendered){
 	element.setAttribute("aria-label", value);
 
 	return stars;
-};
+}

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

@@ -1,4 +1,4 @@
 export default function(cell, formatterParams, onRendered){
 	cell.getElement().style.whiteSpace = "pre-wrap";
 	return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
-};
+}

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

@@ -19,4 +19,4 @@ export default function(cell, formatterParams, onRendered){
 			return cross || "";
 		}
 	}
-};
+}

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

@@ -24,24 +24,24 @@ export default function(cell, formatterParams, onRendered){
 	//set color
 	switch(typeof colors){
 		case "string":
-		color = colors;
-		break;
+			color = colors;
+			break;
 		case "function":
-		color = colors(value);
-		break;
-		case "object":
-		if(Array.isArray(colors)){
-			var unit = 100 / colors.length;
-			var index = Math.floor(percentValue / unit);
-
-			index = Math.min(index, colors.length - 1);
-			index = Math.max(index, 0);
-			color = colors[index];
+			color = colors(value);
 			break;
-		}
+		case "object":
+			if(Array.isArray(colors)){
+				var unit = 100 / colors.length;
+				var index = Math.floor(percentValue / unit);
+
+				index = Math.min(index, colors.length - 1);
+				index = Math.max(index, 0);
+				color = colors[index];
+				break;
+			}
 	}
 
 	el.style.backgroundColor = color;
 
 	return el;
-};
+}

package/src/js/modules/FrozenColumns/FrozenColumns.js

@@ -58,7 +58,7 @@ class FrozenColumns extends Module{
 	}
 	
 	layoutCell(cell){
-		this.layoutElement(cell.element, cell.column)
+		this.layoutElement(cell.element, cell.column);
 	}
 	
 	reinitializeColumns(){
@@ -107,9 +107,7 @@ class FrozenColumns extends Module{
 	}
 	
 	//quick layout to smooth horizontal scrolling
-	scrollHorizontal(){
-		var rows;
-		
+	scrollHorizontal(){	
 		if(this.active){		
 			this.calcMargins(true);
 			
@@ -146,7 +144,7 @@ class FrozenColumns extends Module{
 			}
 			
 			if(this.table.modExists("groupRows")){
-				this.layoutGroupCalcs(this.table.modules.groupRows.getGroups())
+				this.layoutGroupCalcs(this.table.modules.groupRows.getGroups());
 			}
 		}
 	}
@@ -162,7 +160,7 @@ class FrozenColumns extends Module{
 			}
 			
 			if(group.groupList && group.groupList.length){
-				this.layoutGroupCalcs(group.groupList && group.groupList);
+				this.layoutGroupCalcs(group.groupList);
 			}
 		});
 	}
@@ -262,9 +260,9 @@ class FrozenColumns extends Module{
 	}
 	
 	reinitializeRows(){
-		var visibleRows = this.table.rowManager.getVisibleRows();
+		var visibleRows = this.table.rowManager.getVisibleRows(true);
 		var otherRows = this.table.rowManager.getRows().filter(row => !visibleRows.includes(row));
-
+		
 		otherRows.forEach((row) =>{
 			row.deinitialize();
 		});

package/src/js/modules/FrozenRows/FrozenRows.js

@@ -12,6 +12,10 @@ class FrozenRows extends Module{
 		this.registerComponentFunction("row", "freeze", this.freezeRow.bind(this));
 		this.registerComponentFunction("row", "unfreeze", this.unfreezeRow.bind(this));
 		this.registerComponentFunction("row", "isFrozen", this.isRowFrozen.bind(this));
+
+		//register table options
+		this.registerTableOption("frozenRowsField", "id"); //field to choose frozen rows by
+		this.registerTableOption("frozenRows", false); //holder for frozen row identifiers
 	}
 
 	initialize(){
@@ -26,6 +30,36 @@ class FrozenRows extends Module{
 		this.subscribe("rows-visible", this.visibleRows.bind(this));
 
 		this.registerDisplayHandler(this.getRows.bind(this), 10);
+
+		if(this.table.options.frozenRows){
+			this.subscribe("data-processed", this.initializeRows.bind(this));
+			this.subscribe("row-added", this.initializeRow.bind(this));
+		}
+	}
+
+	initializeRows(){
+		this.table.rowManager.getRows().forEach((row) => {
+			this.initializeRow(row);
+		});
+	}
+
+	initializeRow(row){
+		var frozenRows = this.table.options.frozenRows,
+		rowType = typeof frozenRows;
+
+		if(rowType === "number"){
+			if(row.getPosition() && (row.getPosition() + this.rows.length) <= frozenRows){
+				this.freezeRow(row);
+			}
+		}else if(rowType === "function"){
+			if(frozenRows.call(this.table, row.getComponent())){
+				this.freezeRow(row);
+			}
+		}else if(Array.isArray(frozenRows)){
+			if(frozenRows.includes(row.data[this.options("frozenRowsField")])){
+				this.freezeRow(row);
+			}
+		}
 	}
 
 	isRowFrozen(row){
@@ -47,9 +81,7 @@ class FrozenRows extends Module{
 
 	//filter frozen rows out of display data
 	getRows(rows){
-		var self = this,
-		frozen = [],
-		output = rows.slice(0);
+		var output = rows.slice(0);
 
 		this.rows.forEach(function(row){
 			var index = output.indexOf(row);
@@ -72,7 +104,7 @@ class FrozenRows extends Module{
 
 			this.rows.push(row);
 
-			this.refreshData(false, "display")
+			this.refreshData(false, "display");
 
 			this.styleRows();
 
@@ -82,8 +114,6 @@ class FrozenRows extends Module{
 	}
 
 	unfreezeRow(row){
-		var index = this.rows.indexOf(row);
-
 		if(row.modules.frozen){
 
 			row.modules.frozen = false;
@@ -92,7 +122,7 @@ class FrozenRows extends Module{
 
 			this.table.rowManager.adjustTableSize();
 
-			this.refreshData(false, "display")
+			this.refreshData(false, "display");
 
 			if(this.rows.length){
 				this.styleRows();

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

@@ -178,7 +178,7 @@ class Group{
 	
 	getRowIndex(row){}
 	
-	//update row data to match grouping contraints
+	//update row data to match grouping constraints
 	conformRowData(data){
 		if(this.field){
 			data[this.field] = this.key;
@@ -358,7 +358,7 @@ class Group{
 	hide(){
 		this.visible = false;
 		
-		if(this.groupManager.table.rowManager.getRenderMode() == "classic" && !this.groupManager.table.options.pagination){
+		if(this.groupManager.table.rowManager.getRenderMode() == "basic" && !this.groupManager.table.options.pagination){
 			
 			this.element.classList.remove("tabulator-group-visible");
 			
@@ -381,7 +381,7 @@ class Group{
 			
 			this.groupManager.table.rowManager.setDisplayRows(this.groupManager.updateGroupRows(), this.groupManager.getDisplayIndex());
 			
-			this.groupManager.table.rowManager.checkClassicModeGroupHeaderWidth();
+			this.groupManager.checkBasicModeGroupHeaderWidth();
 			
 		}else{
 			this.groupManager.updateGroupRows(true);
@@ -393,7 +393,7 @@ class Group{
 	show(){
 		this.visible = true;
 		
-		if(this.groupManager.table.rowManager.getRenderMode() == "classic" && !this.groupManager.table.options.pagination){
+		if(this.groupManager.table.rowManager.getRenderMode() == "basic" && !this.groupManager.table.options.pagination){
 			
 			this.element.classList.add("tabulator-group-visible");
 			
@@ -422,7 +422,7 @@ class Group{
 			
 			this.groupManager.table.rowManager.setDisplayRows(this.groupManager.updateGroupRows(), this.groupManager.getDisplayIndex());
 			
-			this.groupManager.table.rowManager.checkClassicModeGroupHeaderWidth();
+			this.groupManager.checkBasicModeGroupHeaderWidth();
 		}else{
 			this.groupManager.updateGroupRows(true);
 		}
@@ -474,11 +474,11 @@ class Group{
 		return output;
 	}
 	
-	getRows(compoment){
+	getRows(component){
 		var output = [];
 		
 		this.rows.forEach(function(row){
-			output.push(compoment ? row.getComponent() : row);
+			output.push(component ? row.getComponent() : row);
 		});
 		
 		return output;

package/src/js/modules/GroupRows/GroupComponent.js

@@ -9,10 +9,10 @@ class GroupComponent {
 				if (typeof target[name] !== "undefined") {
 					return target[name];
 				}else{
-					return target._group.groupManager.table.componentFunctionBinder.handle("row", target._group, name)
+					return target._group.groupManager.table.componentFunctionBinder.handle("row", target._group, name);
 				}
 			}
-		})
+		});
 	}
 
 	getKey(){

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

@@ -1,6 +1,5 @@
 import Module from '../../core/Module.js';
 
-import GroupComponent from './GroupComponent.js';
 import Group from './Group.js';
 
 class GroupRows extends Module{
@@ -46,7 +45,6 @@ class GroupRows extends Module{
 	//initialize group configuration
 	initialize(){
 		if(this.table.options.groupBy){
-
 			if(this.table.options.groupUpdateOnCellEdit){
 				this.subscribe("cell-value-updated", this.cellUpdated.bind(this));
 				this.subscribe("row-data-changed", this.reassignRowToGroup.bind(this), 0);
@@ -95,7 +93,7 @@ class GroupRows extends Module{
 
 			this.groupIDLookups = [];
 
-			if(Array.isArray(groupBy) || groupBy){
+			if(Array.isArray(groupBy)){
 				if(this.table.modExists("columnCalcs") && this.table.options.columnCalcs != "table" && this.table.options.columnCalcs != "both"){
 					this.table.modules.columnCalcs.removeCalcs();
 				}
@@ -161,6 +159,9 @@ class GroupRows extends Module{
 			if(groupHeader){
 				this.headerGenerator = Array.isArray(groupHeader) ? groupHeader : [groupHeader];
 			}
+		}else{
+			this.groupList = [];
+			this.groups = {};
 		}
 	}
 
@@ -225,12 +226,13 @@ class GroupRows extends Module{
 
 	setGroupBy(groups){
 		this.table.options.groupBy = groups;
+
 		if(!this.initialized){
 			this.initialize();
-		}else{
-			this.configureGroupSetup();
 		}
 
+		this.configureGroupSetup();
+
 		this.refreshData();
 
 		this.trackChanges();
@@ -277,7 +279,7 @@ class GroupRows extends Module{
 	// get grouped table data in the same format as getData()
 	userGetGroupedData(){
 		return this.table.options.groupBy ?
-		this.getGroupedData() : this.getData()
+			this.getGroupedData() : this.getData();
 	}
 
 
@@ -425,7 +427,7 @@ class GroupRows extends Module{
 			}
 		});
 
-		return groupListData
+		return groupListData;
 	}
 
 	getGroupedData(){
@@ -515,10 +517,10 @@ class GroupRows extends Module{
 			var oldRowGroup = row.modules.group,
 			oldGroupPath = oldRowGroup.getPath(),
 			newGroupPath = this.getExpectedPath(row),
-			samePath = true;
+			samePath;
 
 			// figure out if new group path is the same as old group path
-			var samePath = (oldGroupPath.length == newGroupPath.length) && oldGroupPath.every((element, index) => {
+			samePath = (oldGroupPath.length == newGroupPath.length) && oldGroupPath.every((element, index) => {
 				return element === newGroupPath[index];
 			});
 
@@ -542,8 +544,7 @@ class GroupRows extends Module{
 	}
 
 	updateGroupRows(force){
-		var output = [],
-		oldRowCount;
+		var output = [];
 
 		this.groupList.forEach((group) => {
 			output = output.concat(group.getHeadersAndRows());
@@ -582,6 +583,28 @@ class GroupRows extends Module{
 			}
 		}
 	}
+
+	checkBasicModeGroupHeaderWidth(){
+		var element = this.table.rowManager.tableElement,
+		onlyGroupHeaders = true;
+
+		this.table.rowManager.getDisplayRows().forEach((row, index) =>{
+			this.table.rowManager.styleRow(row, index);
+			element.appendChild(row.getElement());
+			row.initialize(true);
+
+			if(row.type !== "group"){
+				onlyGroupHeaders = false;
+			}
+		});
+
+		if(onlyGroupHeaders){
+			element.style.minWidth = this.table.columnManager.getWidth() + "px";
+		}else{
+			element.style.minWidth = "";
+		}
+	}
+
 }
 
 GroupRows.moduleName = "groupRows";

package/src/js/modules/History/History.js

@@ -34,7 +34,7 @@ class History extends Module{
 	}
 
 	rowMoved(from, to, after){
-		this.action("rowMove", from, {posFrom:this.table.rowManager.getRowPosition(from), posTo:this.table.rowManager.getRowPosition(to), to:to, after:after});
+		this.action("rowMove", from, {posFrom:from.getPosition(), posTo:to.getPosition(), to:to, after:after});
 	}
 
 	rowAdded(row, data, pos, index){
@@ -46,7 +46,7 @@ class History extends Module{
 
 		if(this.table.options.groupBy){
 
-			rows = row.getComponent().getGroup().rows
+			rows = row.getComponent().getGroup()._getSelf().rows;
 			index = rows.indexOf(row);
 
 			if(index){

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

@@ -1,5 +1,4 @@
 import Module from '../../core/Module.js';
-import Column from '../../core/column/Column.js';
 
 class HtmlTableImport extends Module{
 
@@ -27,11 +26,9 @@ class HtmlTableImport extends Module{
 	parseTable(){
 		var element = this.table.originalElement,
 		options = this.table.options,
-		columns = options.columns,
 		headers = element.getElementsByTagName("th"),
 		rows = element.getElementsByTagName("tbody")[0],
-		data = [],
-		newTable;
+		data = [];
 
 		this.hasIndex = false;
 
@@ -54,7 +51,7 @@ class HtmlTableImport extends Module{
 			cells = row.getElementsByTagName("td"),
 			item = {};
 
-			//create index if the dont exist in table
+			//create index if the don't exist in table
 			if(!this.hasIndex){
 				item[options.index] = index;
 			}
@@ -127,7 +124,7 @@ class HtmlTableImport extends Module{
 			var header = headers[index],
 			exists = false,
 			col = this._findCol(header.textContent),
-			width, attributes;
+			width;
 
 			if(col){
 				exists = true;