tabulator-tables 5.3.3 → 5.4.0

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

@@ -53,6 +53,7 @@ class Edit extends Module{
 		this.subscribe("column-layout", this.initializeColumnCheck.bind(this));
 		this.subscribe("column-delete", this.columnDeleteCheck.bind(this));
 		this.subscribe("row-deleting", this.rowDeleteCheck.bind(this));
+		this.subscribe("row-layout", this.rowEditableCheck.bind(this));
 		this.subscribe("data-refreshing", this.cancelEdit.bind(this));
 		
 		this.subscribe("keybinding-nav-prev", this.navigatePrev.bind(this, undefined));
@@ -157,7 +158,7 @@ class Edit extends Module{
 				prevRow = this.table.rowManager.prevDisplayRow(cell.row, true);
 				
 				if(prevRow){
-					nextCell = this.findNextEditableCell(prevRow, prevRow.cells.length);
+					nextCell = this.findPrevEditableCell(prevRow, prevRow.cells.length);
 					
 					if(nextCell){
 						nextCell.getComponent().edit();
@@ -347,6 +348,14 @@ class Edit extends Module{
 			this.cancelEdit();
 		}
 	}
+
+	rowEditableCheck(row){
+		row.getCells().forEach((cell) => {
+			if(cell.column.modules.edit && typeof cell.column.modules.edit.check === "function"){
+				this.updateCellClass(cell);
+			}
+		});
+	}
 	
 	//initialize column editor
 	initializeColumn(column){
@@ -531,7 +540,9 @@ class Edit extends Module{
 		if(cell.column.modules.edit){
 			switch(typeof cell.column.modules.edit.check){
 				case "function":
-					check = cell.column.modules.edit.check(cell.getComponent());
+					if(cell.row.initialized){
+						check = cell.column.modules.edit.check(cell.getComponent());
+					}
 					break;
 
 				case "string":

package/src/js/modules/Format/Format.js

@@ -3,13 +3,13 @@ import Module from '../../core/Module.js';
 import defaultFormatters from './defaults/formatters.js';
 
 class Format extends Module{
-
+	
 	constructor(table){
 		super(table);
-
+		
 		this.registerColumnOption("formatter");
 		this.registerColumnOption("formatterParams");
-
+		
 		this.registerColumnOption("formatterPrint");
 		this.registerColumnOption("formatterPrintParams");
 		this.registerColumnOption("formatterClipboard");
@@ -19,35 +19,35 @@ class Format extends Module{
 		this.registerColumnOption("titleFormatter");
 		this.registerColumnOption("titleFormatterParams");
 	}
-
+	
 	initialize(){
 		this.subscribe("cell-format", this.formatValue.bind(this));
 		this.subscribe("cell-rendered", this.cellRendered.bind(this));
 		this.subscribe("column-layout", this.initializeColumn.bind(this));
 		this.subscribe("column-format", this.formatHeader.bind(this));
 	}
-
+	
 	//initialize column formatter
 	initializeColumn(column){
 		column.modules.format = this.lookupFormatter(column, "");
-
+		
 		if(typeof column.definition.formatterPrint !== "undefined"){
 			column.modules.format.print = this.lookupFormatter(column, "Print");
 		}
-
+		
 		if(typeof column.definition.formatterClipboard !== "undefined"){
 			column.modules.format.clipboard = this.lookupFormatter(column, "Clipboard");
 		}
-
+		
 		if(typeof column.definition.formatterHtmlOutput !== "undefined"){
 			column.modules.format.htmlOutput = this.lookupFormatter(column, "HtmlOutput");
 		}
 	}
-
+	
 	lookupFormatter(column, type){
 		var config = {params:column.definition["formatter" + type + "Params"] || {}},
 		formatter = column.definition["formatter" + type];
-
+		
 		//set column formatter
 		switch(typeof formatter){
 			case "string":
@@ -58,97 +58,103 @@ class Format extends Module{
 					config.formatter = Format.formatters.plaintext;
 				}
 				break;
-
+			
 			case "function":
 				config.formatter = formatter;
 				break;
-
+			
 			default:
 				config.formatter = Format.formatters.plaintext;
 				break;
 		}
-
+		
 		return config;
 	}
-
+	
 	cellRendered(cell){
 		if(cell.modules.format && cell.modules.format.renderedCallback && !cell.modules.format.rendered){
 			cell.modules.format.renderedCallback();
 			cell.modules.format.rendered = true;
 		}
 	}
-
+	
 	//return a formatted value for a column header
 	formatHeader(column, title, el){
 		var formatter, params, onRendered, mockCell;
-
+		
 		if(column.definition.titleFormatter){
 			formatter = this.getFormatter(column.definition.titleFormatter);
-
+			
 			onRendered = (callback) => {
 				column.titleFormatterRendered = callback;
 			};
-
+			
 			mockCell = {
 				getValue:function(){
 					return title;
 				},
 				getElement:function(){
 					return el;
+				},
+				getColumn:function(){
+					return column.getComponent();
+				},
+				getTable:() => {
+					return this.table;
 				}
 			};
-
+			
 			params = column.definition.titleFormatterParams || {};
-
+			
 			params = typeof params === "function" ? params() : params;
-
+			
 			return formatter.call(this, mockCell, params, onRendered);
 		}else{
 			return title;
 		}
 	}
-
-
+	
+	
 	//return a formatted value for a cell
 	formatValue(cell){
 		var component = cell.getComponent(),
 		params = typeof cell.column.modules.format.params === "function" ? cell.column.modules.format.params(component) : cell.column.modules.format.params;
-
+		
 		function onRendered(callback){
 			if(!cell.modules.format){
 				cell.modules.format = {};
 			}
-
+			
 			cell.modules.format.renderedCallback = callback;
 			cell.modules.format.rendered = false;
 		}
-
+		
 		return cell.column.modules.format.formatter.call(this, component, params, onRendered);
 	}
-
+	
 	formatExportValue(cell, type){
 		var formatter = cell.column.modules.format[type],
 		params;
-
+		
 		if(formatter){
 			params = typeof formatter.params === "function" ? formatter.params(cell.getComponent()) : formatter.params;
-
+			
 			function onRendered(callback){
 				if(!cell.modules.format){
 					cell.modules.format = {};
 				}
-
+				
 				cell.modules.format.renderedCallback = callback;
 				cell.modules.format.rendered = false;
 			}
-
+			
 			return formatter.formatter.call(this, cell.getComponent(), params, onRendered);
-
+			
 		}else{
 			return this.formatValue(cell);
 		}
 	}
-
+	
 	sanitizeHTML(value){
 		if(value){
 			var entityMap = {
@@ -161,7 +167,7 @@ class Format extends Module{
 				'`': '`',
 				'=': '='
 			};
-
+			
 			return String(value).replace(/[&<>"'`=/]/g, function (s) {
 				return entityMap[s];
 			});
@@ -169,11 +175,11 @@ class Format extends Module{
 			return value;
 		}
 	}
-
+	
 	emptyToSpace(value){
 		return value === null || typeof value === "undefined" || value === "" ? "&nbsp;" : value;
 	}
-
+	
 	//get formatter for cell
 	getFormatter(formatter){
 		switch(typeof formatter){
@@ -185,16 +191,16 @@ class Format extends Module{
 					formatter = Format.formatters.plaintext;
 				}
 				break;
-
+			
 			case "function":
-				//Custom formatter Function, do nothing
+			//Custom formatter Function, do nothing
 				break;
-
+			
 			default:
 				formatter = Format.formatters.plaintext;
 				break;
 		}
-
+		
 		return formatter;
 	}
 }

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

@@ -3,7 +3,15 @@ export default function(cell, formatterParams, onRendered){
 	config = cell.getRow()._row.modules.responsiveLayout;
 
 	el.classList.add("tabulator-responsive-collapse-toggle");
-	el.innerHTML = "<span class='tabulator-responsive-collapse-toggle-open'>+</span><span class='tabulator-responsive-collapse-toggle-close'>-</span>";
+	
+	el.innerHTML = `<svg class='tabulator-responsive-collapse-toggle-open' viewbox="0 0 24 24">
+  <line x1="7" y1="12" x2="17" y2="12" fill="none" stroke-width="3" stroke-linecap="round" />
+  <line y1="7" x1="12" y2="17" x2="12" fill="none" stroke-width="3" stroke-linecap="round" />
+</svg>
+
+<svg class='tabulator-responsive-collapse-toggle-close' viewbox="0 0 24 24">
+  <line x1="7" y1="12" x2="17" y2="12"  fill="none" stroke-width="3" stroke-linecap="round" />
+</svg>`;
 
 	cell.getElement().classList.add("tabulator-row-handle");
 

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

@@ -7,9 +7,6 @@ class FrozenColumns extends Module{
 		
 		this.leftColumns = [];
 		this.rightColumns = [];
-		this.leftMargin = 0;
-		this.rightMargin = 0;
-		this.rightPadding = 0;
 		this.initializationMode = "left";
 		this.active = false;
 		this.blocked = true;
@@ -22,13 +19,7 @@ class FrozenColumns extends Module{
 		this.initializationMode = "left";
 		this.leftColumns = [];
 		this.rightColumns = [];
-		this.leftMargin = 0;
-		this.rightMargin = 0;
-		this.rightMargin = 0;
 		this.active = false;
-		
-		this.table.columnManager.headersElement.style.marginLeft = 0;
-		this.table.columnManager.element.style.paddingRight = 0;
 	}
 	
 	initialize(){
@@ -37,8 +28,6 @@ class FrozenColumns extends Module{
 		this.subscribe("column-width", this.layout.bind(this));
 		this.subscribe("row-layout-after", this.layoutRow.bind(this));
 		this.subscribe("table-layout", this.layout.bind(this));
-		this.subscribe("scroll-horizontal", this.scrollHorizontal.bind(this));
-		this.subscribe("scroll-horizontal", this.scrollHorizontal.bind(this));
 		this.subscribe("columns-loading", this.reset.bind(this));
 		
 		this.subscribe("column-add", this.reinitializeColumns.bind(this));
@@ -47,6 +36,7 @@ class FrozenColumns extends Module{
 		this.subscribe("table-redraw", this.layout.bind(this));
 		this.subscribe("layout-refreshing", this.blockLayout.bind(this));
 		this.subscribe("layout-refreshed", this.unblockLayout.bind(this));
+		this.subscribe("scrollbar-vertical", this.adjustForScrollbar.bind(this));
 	}
 	
 	blockLayout(){
@@ -106,32 +96,6 @@ class FrozenColumns extends Module{
 		}
 	}
 	
-	//quick layout to smooth horizontal scrolling
-	scrollHorizontal(){	
-		if(this.active){		
-			this.calcMargins(true);
-			
-			this.layoutColumnPosition();
-			
-			this.layoutCalcRows();
-			
-			this.reinitializeRows();
-		}
-	}
-	
-	//calculate margins for rows
-	calcMargins(scroll){
-		
-		if(!scroll){
-			this.leftMargin = this._calcSpace(this.leftColumns, this.leftColumns.length) + "px";			
-			this.rightMargin = this._calcSpace(this.rightColumns, this.rightColumns.length) + "px";	
-			this.table.rowManager.tableElement.style.marginRight = this.rightMargin;
-		}
-		
-		//calculate right frozen columns
-		this.rightPadding = this.table.rowManager.element.clientWidth + this.table.columnManager.scrollLeft;
-	}
-	
 	//layout calculation rows
 	layoutCalcRows(){
 		if(this.table.modExists("columnCalcs")){
@@ -172,11 +136,8 @@ class FrozenColumns extends Module{
 		var leftMargin = 0;
 		var rightMargin = 0;
 		
-		this.table.columnManager.headersElement.style.marginLeft = this.leftMargin;
-		this.table.columnManager.element.style.paddingRight = this.rightMargin;
-		
 		this.leftColumns.forEach((column, i) => {	
-			column.modules.frozen.marginValue = leftMargin + this.table.columnManager.scrollLeft;
+			column.modules.frozen.marginValue = leftMargin;
 			column.modules.frozen.margin = column.modules.frozen.marginValue + "px";
 			
 			if(column.visible){
@@ -212,20 +173,19 @@ class FrozenColumns extends Module{
 		
 		this.rightColumns.forEach((column, i) => {
 			
+			column.modules.frozen.marginValue = rightMargin;
+			column.modules.frozen.margin = column.modules.frozen.marginValue + "px";
+			
 			if(column.visible){
 				rightMargin += column.getWidth();
 			}
 			
-			column.modules.frozen.marginValue = this.rightPadding - rightMargin;
-			column.modules.frozen.margin = column.modules.frozen.marginValue + "px";
-			
 			if(i == this.rightColumns.length - 1){
 				column.modules.frozen.edge = true;
 			}else{
 				column.modules.frozen.edge = false;
 			}
 			
-			
 			if(column.parent.isGroup){
 				this.layoutElement(this.getColGroupParentElement(column), column);
 			}else{
@@ -247,12 +207,10 @@ class FrozenColumns extends Module{
 	//layout columns appropriately
 	layout(){	
 		if(this.active && !this.blocked){
-			//calculate row padding
-			this.calcMargins();
-			
+		
 			//calculate left columns
 			this.layoutColumnPosition();
-
+			
 			this.reinitializeRows();
 			
 			this.layoutCalcRows();
@@ -275,11 +233,6 @@ class FrozenColumns extends Module{
 	}
 	
 	layoutRow(row){
-		// console.trace("row")
-		var rowEl = row.getElement();
-		
-		rowEl.style.paddingLeft = this.leftMargin;
-		
 		if(this.table.options.layout === "fitDataFill" && this.rightColumns.length){
 			this.table.rowManager.getTableElement().style.minWidth = "calc(100% - " + this.rightMargin + ")";
 		}
@@ -302,11 +255,19 @@ class FrozenColumns extends Module{
 	}
 	
 	layoutElement(element, column){
+		var position;
 		
 		if(column.modules.frozen){
-			element.style.position = "absolute";
-			element.style.left = column.modules.frozen.margin;
-			
+			element.style.position = "sticky";
+
+			if(this.table.rtl){
+				position = column.modules.frozen.position === "left" ? "right" : "left";
+			}else{
+				position = column.modules.frozen.position;
+			}
+		
+			element.style[position] = column.modules.frozen.margin;
+
 			element.classList.add("tabulator-frozen");
 			
 			if(column.modules.frozen.edge){
@@ -314,6 +275,12 @@ class FrozenColumns extends Module{
 			}
 		}
 	}
+
+	adjustForScrollbar(width){
+		if(this.rightColumns.length){
+			this.table.columnManager.getContentsElement().style.width = "calc(100% - " + width + "px)";
+		}
+	}
 	
 	_calcSpace(columns, index){
 		var width = 0;

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

@@ -24,7 +24,7 @@ class FrozenRows extends Module{
 		this.topElement.classList.add("tabulator-frozen-rows-holder");
 
 		// this.table.columnManager.element.append(this.topElement);
-		this.table.columnManager.getElement().insertBefore(this.topElement, this.table.columnManager.headersElement.nextSibling);
+		this.table.columnManager.getContentsElement().insertBefore(this.topElement, this.table.columnManager.headersElement.nextSibling);
 
 		this.subscribe("row-deleting", this.detachRow.bind(this));
 		this.subscribe("rows-visible", this.visibleRows.bind(this));
@@ -100,12 +100,13 @@ class FrozenRows extends Module{
 			this.topElement.appendChild(row.getElement());
 			row.initialize();
 			row.normalizeHeight();
-			this.table.rowManager.adjustTableSize();
-
+		
 			this.rows.push(row);
 
 			this.refreshData(false, "display");
 
+			this.table.rowManager.adjustTableSize();
+
 			this.styleRows();
 
 		}else{

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

@@ -248,38 +248,41 @@ class Group{
 		}
 	}
 	
-	getHeadersAndRows(noCalc){
+	getHeadersAndRows(){
 		var output = [];
 		
 		output.push(this);
 		
 		this._visSet();
 		
+		
+		if(this.calcs.top){
+			this.calcs.top.detachElement();
+			this.calcs.top.deleteCells();
+		}
+		
+		if(this.calcs.bottom){
+			this.calcs.bottom.detachElement();
+			this.calcs.bottom.deleteCells();
+		}
+		
+		
+		
 		if(this.visible){
 			if(this.groupList.length){
 				this.groupList.forEach(function(group){
-					output = output.concat(group.getHeadersAndRows(noCalc));
+					output = output.concat(group.getHeadersAndRows());
 				});
 				
 			}else{
-				if(!noCalc && this.groupManager.table.options.columnCalcs != "table" && this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.modules.columnCalcs.hasTopCalcs()){
-					if(this.calcs.top){
-						this.calcs.top.detachElement();
-						this.calcs.top.deleteCells();
-					}
-					
+				if(this.groupManager.table.options.columnCalcs != "table" && this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.modules.columnCalcs.hasTopCalcs()){
 					this.calcs.top = this.groupManager.table.modules.columnCalcs.generateTopRow(this.rows);
 					output.push(this.calcs.top);
 				}
 				
 				output = output.concat(this.rows);
 				
-				if(!noCalc && this.groupManager.table.options.columnCalcs != "table" &&  this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.modules.columnCalcs.hasBottomCalcs()){
-					if(this.calcs.bottom){
-						this.calcs.bottom.detachElement();
-						this.calcs.bottom.deleteCells();
-					}
-					
+				if(this.groupManager.table.options.columnCalcs != "table" &&  this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.modules.columnCalcs.hasBottomCalcs()){
 					this.calcs.bottom = this.groupManager.table.modules.columnCalcs.generateBottomRow(this.rows);
 					output.push(this.calcs.bottom);
 				}
@@ -288,25 +291,14 @@ class Group{
 			if(!this.groupList.length && this.groupManager.table.options.columnCalcs != "table"){
 				
 				if(this.groupManager.table.modExists("columnCalcs")){
-					
-					if(!noCalc && this.groupManager.table.modules.columnCalcs.hasTopCalcs()){
-						if(this.calcs.top){
-							this.calcs.top.detachElement();
-							this.calcs.top.deleteCells();
-						}
-						
+					if(this.groupManager.table.modules.columnCalcs.hasTopCalcs()){
 						if(this.groupManager.table.options.groupClosedShowCalcs){
 							this.calcs.top = this.groupManager.table.modules.columnCalcs.generateTopRow(this.rows);
 							output.push(this.calcs.top);
 						}
 					}
 					
-					if(!noCalc && this.groupManager.table.modules.columnCalcs.hasBottomCalcs()){
-						if(this.calcs.bottom){
-							this.calcs.bottom.detachElement();
-							this.calcs.bottom.deleteCells();
-						}
-						
+					if(this.groupManager.table.modules.columnCalcs.hasBottomCalcs()){						
 						if(this.groupManager.table.options.groupClosedShowCalcs){
 							this.calcs.bottom = this.groupManager.table.modules.columnCalcs.generateBottomRow(this.rows);
 							output.push(this.calcs.bottom);
@@ -417,7 +409,7 @@ class Group{
 					prev = rowEl;
 				});
 			}
-
+			
 			this.groupManager.updateGroupRows(true);
 		}else{
 			this.groupManager.updateGroupRows(true);

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

@@ -40,7 +40,7 @@ class GroupComponent {
 	}
 
 	isVisible(){
-		return this._group._visible;
+		return this._group.visible;
 	}
 
 	show(){

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

@@ -279,8 +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();
+		return this.table.options.groupBy ? this.getGroupedData() : this.getData();
 	}
 	
 	

package/src/js/modules/Interaction/Interaction.js

@@ -18,6 +18,8 @@ class Interaction extends Module{
 			rowMouseOver:"row-mouseover",
 			rowMouseOut:"row-mouseout",
 			rowMouseMove:"row-mousemove",
+			rowMouseDown:"row-mousedown",
+			rowMouseUp:"row-mouseup",
 			rowTap:"row",
 			rowDblTap:"row",
 			rowTapHold:"row",
@@ -31,6 +33,8 @@ class Interaction extends Module{
 			cellMouseOver:"cell-mouseover",
 			cellMouseOut:"cell-mouseout",
 			cellMouseMove:"cell-mousemove",
+			cellMouseDown:"cell-mousedown",
+			cellMouseUp:"cell-mouseup",
 			cellTap:"cell",
 			cellDblTap:"cell",
 			cellTapHold:"cell",
@@ -44,6 +48,8 @@ class Interaction extends Module{
 			headerMouseOver:"column-mouseover",
 			headerMouseOut:"column-mouseout",
 			headerMouseMove:"column-mousemove",
+			headerMouseDown:"column-mousedown",
+			headerMouseUp:"column-mouseup",
 			headerTap:"column",
 			headerDblTap:"column",
 			headerTapHold:"column",
@@ -57,6 +63,8 @@ class Interaction extends Module{
 			groupMouseOver:"group-mouseover",
 			groupMouseOut:"group-mouseout",
 			groupMouseMove:"group-mousemove",
+			groupMouseDown:"group-mousedown",
+			groupMouseUp:"group-mouseup",
 			groupTap:"group",
 			groupDblTap:"group",
 			groupTapHold:"group",
@@ -99,6 +107,8 @@ class Interaction extends Module{
 		this.registerColumnOption("headerMouseOver");
 		this.registerColumnOption("headerMouseOut");
 		this.registerColumnOption("headerMouseMove");
+		this.registerColumnOption("headerMouseDown");
+		this.registerColumnOption("headerMouseUp");
 		this.registerColumnOption("headerTap");
 		this.registerColumnOption("headerDblTap");
 		this.registerColumnOption("headerTapHold");
@@ -111,6 +121,8 @@ class Interaction extends Module{
 		this.registerColumnOption("cellMouseOver");
 		this.registerColumnOption("cellMouseOut");
 		this.registerColumnOption("cellMouseMove");
+		this.registerColumnOption("cellMouseDown");
+		this.registerColumnOption("cellMouseUp");
 		this.registerColumnOption("cellTap");
 		this.registerColumnOption("cellDblTap");
 		this.registerColumnOption("cellTapHold");