tabulator-tables 5.5.4 → 5.6.1

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

@@ -24,6 +24,8 @@ class Edit extends Module{
 		this.registerColumnOption("cellEdited");
 		this.registerColumnOption("cellEditCancelled");
 		
+		this.registerTableOption("editTriggerEvent", "focus");
+		
 		this.registerTableFunction("getEditedCells", this.getEditedCells.bind(this));
 		this.registerTableFunction("clearCellEdited", this.clearCellEdited.bind(this));
 		this.registerTableFunction("navigatePrev", this.navigatePrev.bind(this));
@@ -55,16 +57,30 @@ class Edit extends Module{
 		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("clipboard-paste", this.pasteBlocker.bind(this));
 		
 		this.subscribe("keybinding-nav-prev", this.navigatePrev.bind(this, undefined));
 		this.subscribe("keybinding-nav-next", this.keybindingNavigateNext.bind(this));
-		this.subscribe("keybinding-nav-left", this.navigateLeft.bind(this, undefined));
-		this.subscribe("keybinding-nav-right", this.navigateRight.bind(this, undefined));
+		
+		
+		// this.subscribe("keybinding-nav-left", this.navigateLeft.bind(this, undefined));
+		// this.subscribe("keybinding-nav-right", this.navigateRight.bind(this, undefined));
 		this.subscribe("keybinding-nav-up", this.navigateUp.bind(this, undefined));
 		this.subscribe("keybinding-nav-down", this.navigateDown.bind(this, undefined));
 	}
 	
 	
+	///////////////////////////////////
+	///////// Paste Negation //////////
+	///////////////////////////////////
+	
+	pasteBlocker(e){
+		if(this.currentCell){
+			return true;
+		}
+	}
+	
+	
 	///////////////////////////////////
 	////// Keybinding Functions ///////
 	///////////////////////////////////
@@ -72,7 +88,7 @@ class Edit extends Module{
 	keybindingNavigateNext(e){
 		var cell = this.currentCell,
 		newRow = this.options("tabEndNewRow");
-		
+
 		if(cell){
 			if(!this.navigateNext(cell, e)){
 				if(newRow){
@@ -461,12 +477,6 @@ class Edit extends Module{
 			this.updateCellClass(cell);
 			element.setAttribute("tabindex", 0);
 			
-			element.addEventListener("click", function(e){
-				if(!element.classList.contains("tabulator-editing")){
-					element.focus({preventScroll: true});
-				}
-			});
-			
 			element.addEventListener("mousedown", function(e){
 				if (e.button === 2) {
 					e.preventDefault();
@@ -474,12 +484,33 @@ class Edit extends Module{
 					self.mouseClick = true;
 				}
 			});
+
+			if(this.options("editTriggerEvent") === "dblclick"){
+				element.addEventListener("dblclick", function(e){
+					if(!element.classList.contains("tabulator-editing")){
+						element.focus({preventScroll: true});
+						self.edit(cell, e, false);
+					}
+				});
+			}
 			
-			element.addEventListener("focus", function(e){
-				if(!self.recursionBlock){
-					self.edit(cell, e, false);
-				}
-			});
+			
+			if(this.options("editTriggerEvent") === "focus" || this.options("editTriggerEvent") === "click"){
+				element.addEventListener("click", function(e){
+					if(!element.classList.contains("tabulator-editing")){
+						element.focus({preventScroll: true});
+						self.edit(cell, e, false);
+					}
+				});
+			}
+			
+			if(this.options("editTriggerEvent") === "focus"){
+				element.addEventListener("focus", function(e){
+					if(!self.recursionBlock){
+						self.edit(cell, e, false);
+					}
+				});
+			}
 		}
 	}
 	
@@ -565,8 +596,9 @@ class Edit extends Module{
 		allowEdit = true,
 		rendered = function(){},
 		element = cell.getElement(),
+		editFinished = false,
 		cellEditor, component, params;
-		
+
 		//prevent editing if another cell is refusing to leave focus (eg. validation fail)
 		
 		if(this.currentCell){
@@ -578,13 +610,15 @@ class Edit extends Module{
 		
 		//handle successful value change
 		function success(value){
-			if(self.currentCell === cell){
+			if(self.currentCell === cell && !editFinished){
 				var valid = self.chain("edit-success", [cell, value], true, true);
-				
+
 				if(valid === true || self.table.options.validationMode === "highlight"){
+
+					editFinished = true;
+
 					self.clearEditor();
 					
-					
 					if(!cell.modules.edit){
 						cell.modules.edit = {};
 					}
@@ -596,12 +630,17 @@ class Edit extends Module{
 					}
 					
 					cell.setValue(value, true);
-					
+
 					return valid === true;
 				}else{
+					editFinished = true;
 					self.invalidEdit = true;
 					self.focusCellNoEvent(cell, true);
 					rendered();
+
+					setTimeout(() => {
+						editFinished = false;
+					}, 10);
 					return false;
 				}
 			}else{
@@ -611,7 +650,9 @@ class Edit extends Module{
 		
 		//handle aborted edit
 		function cancel(){
-			if(self.currentCell === cell){
+			// editFinished = true;
+
+			if(self.currentCell === cell && !editFinished){
 				self.cancelEdit();
 			}else{
 				// console.warn("Edit Success Error - cannot call cancel on a cell that is no longer being edited");
@@ -630,7 +671,6 @@ class Edit extends Module{
 			allowEdit = this.allowEdit(cell);
 			
 			if(allowEdit || forceEdit){
-				
 				self.cancelEdit();
 				
 				self.currentCell = cell;
@@ -680,27 +720,33 @@ class Edit extends Module{
 						}
 					}else{
 						console.warn("Edit Error - Editor should return an instance of Node, the editor returned:", cellEditor);
-						element.blur();
+						this.blur(element);
 						return false;
 					}
 				}else{
-					element.blur();
+					this.blur(element);
 					return false;
 				}
 				
 				return true;
 			}else{
 				this.mouseClick = false;
-				element.blur();
+				this.blur(element);
 				return false;
 			}
 		}else{
 			this.mouseClick = false;
-			element.blur();
+			this.blur(element);
 			return false;
 		}
 	}
 	
+	blur(element){
+		if(!this.confirm("edit-blur", [element]) ){
+			element.blur();
+		}
+	}
+	
 	getEditedCells(){
 		var output = [];
 		

package/src/js/modules/Edit/defaults/editors/datetime.js

@@ -37,7 +37,7 @@ export default function(cell, onRendered, success, cancel, editorParams){
 				newDatetime = DT.fromFormat(String(cellValue), inputFormat);
 			}
 			
-			cellValue = newDatetime.toFormat("yyyy-MM-dd")  + "T" + newDatetime.toFormat("hh:mm");
+			cellValue = newDatetime.toFormat("yyyy-MM-dd")  + "T" + newDatetime.toFormat("HH:mm");
 		}else{
 			console.error("Editor Error - 'date' editor 'format' param is dependant on luxon.js");
 		}

package/src/js/modules/Edit/defaults/editors/time.js

@@ -37,12 +37,14 @@ export default function(cell, onRendered, success, cancel, editorParams){
 				newDatetime = DT.fromFormat(String(cellValue), inputFormat);
 			}
 			
-			cellValue = newDatetime.toFormat("hh:mm");
+			cellValue = newDatetime.toFormat("HH:mm");
 			
 		}else{
 			console.error("Editor Error - 'date' editor 'format' param is dependant on luxon.js");
 		}
 	}
+
+	console.log("val", cellValue);
 	
 	input.value = cellValue;
 	

package/src/js/modules/Export/Export.js

@@ -35,10 +35,20 @@ class Export extends Module{
 		this.cloneTableStyle = style;
 		this.config = config || {};
 		this.colVisProp = colVisProp;
-		
-		var headers = this.config.columnHeaders !== false ? this.headersToExportRows(this.generateColumnGroupHeaders()) : [];
-		var body = this.bodyToExportRows(this.rowLookup(range));
-		
+
+		var headers, body;
+		
+		if (range === 'range') {
+			var columns = this.table.modules.selectRange.selectedColumns();
+			headers = this.config.columnHeaders !== false
+				? this.headersToExportRows(this.generateColumnGroupHeaders(columns))
+				: [];
+			body = this.bodyToExportRows(this.rowLookup(range), this.table.modules.selectRange.selectedColumns(true));
+		} else {
+			headers = this.config.columnHeaders !== false ? this.headersToExportRows(this.generateColumnGroupHeaders()) : [];
+			body = this.bodyToExportRows(this.rowLookup(range));
+		}
+
 		return headers.concat(body);
 	}
 	
@@ -73,7 +83,11 @@ class Export extends Module{
 				case "selected":
 					rows = this.table.modules.selectRow.selectedRows;
 					break;
-				
+
+				case "range":
+					rows = this.table.modules.selectRange.selectedRows();
+					break;
+
 				case "active":
 				default:
 					if(this.table.options.pagination){
@@ -87,10 +101,12 @@ class Export extends Module{
 		return Object.assign([], rows);
 	}
 	
-	generateColumnGroupHeaders(){
+	generateColumnGroupHeaders(columns){
 		var output = [];
 		
-		var columns = this.config.columnGroups !== false ? this.table.columnManager.columns : this.table.columnManager.columnsByIndex;
+		if (!columns) {
+			columns = this.config.columnGroups !== false ? this.table.columnManager.columns : this.table.columnManager.columnsByIndex;
+		}
 		
 		columns.forEach((column) => {
 			var colData = this.processColumnGroup(column);
@@ -99,7 +115,7 @@ class Export extends Module{
 				output.push(colData);
 			}
 		});
-		
+
 		return output;
 	}
 	
@@ -227,16 +243,16 @@ class Export extends Module{
 		return exportRows;
 	}
 	
-	bodyToExportRows(rows){
-		
-		var columns = [];
+	bodyToExportRows(rows, columns = []){
 		var exportRows = [];
 		
-		this.table.columnManager.columnsByIndex.forEach((column) => {
-			if (this.columnVisCheck(column)) {
-				columns.push(column.getComponent());
-			}
-		});
+		if (columns.length === 0) {
+			this.table.columnManager.columnsByIndex.forEach((column) => {
+				if (this.columnVisCheck(column)) {
+					columns.push(column.getComponent());
+				}
+			});
+		}
 		
 		if(this.config.columnCalcs !== false && this.table.modExists("columnCalcs")){
 			if(this.table.modules.columnCalcs.topInitialized){
@@ -247,7 +263,7 @@ class Export extends Module{
 				rows.push(this.table.modules.columnCalcs.botRow);
 			}
 		}
-		
+
 		rows = rows.filter((row) => {
 			switch(row.type){
 				case "group":
@@ -474,7 +490,8 @@ class Export extends Module{
 			if(col){
 				var cellEl = document.createElement("td"),
 				column = col.component._column,
-				index = this.table.columnManager.findColumnIndex(column),
+				table =  this.table,
+				index = table.columnManager.findColumnIndex(column),
 				value = col.value,
 				cellStyle;
 				
@@ -501,6 +518,9 @@ class Export extends Module{
 					getRow:function(){
 						return row.component;
 					},
+					getTable:function(){
+						return table;
+					},
 					getComponent:function(){
 						return cellWrapper;
 					},

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

@@ -20,7 +20,7 @@ export default function(cell, formatterParams, onRendered){
 			if(row instanceof RowComponent){
 
 				checkbox.addEventListener("change", (e) => {
-					if(this.table.options.selectableRangeMode === "click"){
+					if(this.table.options.selectableRowsRangeMode === "click"){
 						if(!blocked){
 							row.toggleSelect();
 						}else{
@@ -31,7 +31,7 @@ export default function(cell, formatterParams, onRendered){
 					}
 				});
 
-				if(this.table.options.selectableRangeMode === "click"){
+				if(this.table.options.selectableRowsRangeMode === "click"){
 					checkbox.addEventListener("click", (e) => {
 						blocked = true;
 						this.table.modules.selectRow.handleComplexRowClick(row._row, e);

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

@@ -1,10 +1,14 @@
 export default function(cell, formatterParams, onRendered){
 	var content = document.createElement("span");
 	var row = cell.getRow();
+	var table = cell.getTable();
 
 	row.watchPosition((position) => {
+		if (formatterParams.relativeToPage) {
+			position += table.modules.page.getPageSize() * (table.modules.page.getPage() - 1);
+		}
 		content.innerText = position;
 	});
 	
 	return content;
-}
+}

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

@@ -31,7 +31,10 @@ class FrozenColumns extends Module{
 		this.subscribe("columns-loading", this.reset.bind(this));
 		
 		this.subscribe("column-add", this.reinitializeColumns.bind(this));
-		this.subscribe("column-delete", this.reinitializeColumns.bind(this));
+		this.subscribe("column-deleted", this.reinitializeColumns.bind(this));
+		this.subscribe("column-hide", this.reinitializeColumns.bind(this));
+		this.subscribe("column-show", this.reinitializeColumns.bind(this));
+		this.subscribe("columns-loaded", this.reinitializeColumns.bind(this));
 		
 		this.subscribe("table-redraw", this.layout.bind(this));
 		this.subscribe("layout-refreshing", this.blockLayout.bind(this));
@@ -57,16 +60,16 @@ class FrozenColumns extends Module{
 		this.table.columnManager.columnsByIndex.forEach((column) => {
 			this.initializeColumn(column);
 		});
+
+		this.layout();
 	}
 	
 	//initialize specific column
 	initializeColumn(column){
 		var config = {margin:0, edge:false};
 		
-		if(!column.isGroup){
-			
+		if(!column.isGroup){			
 			if(this.frozenCheck(column)){
-				
 				config.position = this.initializationMode;
 				
 				if(this.initializationMode == "left"){
@@ -157,9 +160,8 @@ class FrozenColumns extends Module{
 					leftParents.push(parentEl);
 				}
 				
-				if(column.modules.frozen.edge){
-					parentEl.classList.add("tabulator-frozen-" + column.modules.frozen.position);
-				}
+				parentEl.classList.toggle("tabulator-frozen-left",  column.modules.frozen.edge && column.modules.frozen.position === "left");
+				parentEl.classList.toggle("tabulator-frozen-right", column.modules.frozen.edge && column.modules.frozen.position === "right");
 			}else{
 				this.layoutElement(column.getElement(), column);
 			}
@@ -207,7 +209,6 @@ class FrozenColumns extends Module{
 	//layout columns appropriately
 	layout(){	
 		if(this.active && !this.blocked){
-		
 			//calculate left columns
 			this.layoutColumnPosition();
 			
@@ -270,9 +271,8 @@ class FrozenColumns extends Module{
 
 			element.classList.add("tabulator-frozen");
 			
-			if(column.modules.frozen.edge){
-				element.classList.add("tabulator-frozen-" + column.modules.frozen.position);
-			}
+			element.classList.toggle("tabulator-frozen-left",  column.modules.frozen.edge && column.modules.frozen.position === "left");
+			element.classList.toggle("tabulator-frozen-right", column.modules.frozen.edge && column.modules.frozen.position === "right");
 		}
 	}
 

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

@@ -19,12 +19,17 @@ class FrozenRows extends Module{
 	}
 
 	initialize(){
+		var	fragment = document.createDocumentFragment();
+		
 		this.rows = [];
 
 		this.topElement.classList.add("tabulator-frozen-rows-holder");
+		
+		fragment.appendChild(document.createElement("br"));
+		fragment.appendChild(this.topElement);
 
 		// this.table.columnManager.element.append(this.topElement);
-		this.table.columnManager.getContentsElement().insertBefore(this.topElement, this.table.columnManager.headersElement.nextSibling);
+		this.table.columnManager.getContentsElement().insertBefore(fragment, this.table.columnManager.headersElement.nextSibling);
 
 		this.subscribe("row-deleting", this.detachRow.bind(this));
 		this.subscribe("rows-visible", this.visibleRows.bind(this));

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

@@ -119,7 +119,7 @@ class History extends Module{
 
 			return true;
 		}else{
-			console.warn("History Undo Error - No more history to undo");
+			console.warn(this.options("history") ? "History Undo Error - No more history to undo" : "History module not enabled");
 			return false;
 		}
 	}
@@ -137,7 +137,7 @@ class History extends Module{
 
 			return true;
 		}else{
-			console.warn("History Redo Error - No more history to redo");
+			console.warn(this.options("history") ? "History Redo Error - No more history to redo" : "History module not enabled");
 			return false;
 		}
 	}

package/src/js/modules/History/defaults/redoers.js

@@ -12,10 +12,14 @@ export default {
 		}
 
 		this._rebindRow(action.component, newRow);
+
+		this.table.rowManager.checkPlaceholder();
 	},
 
 	rowDelete:function(action){
 		action.component.deleteActual();
+
+		this.table.rowManager.checkPlaceholder();
 	},
 
 	rowMove: function(action){

package/src/js/modules/History/defaults/undoers.js

@@ -6,6 +6,8 @@ export default {
 
 	rowAdd: function(action){
 		action.component.deleteActual();
+
+		this.table.rowManager.checkPlaceholder();
 	},
 
 	rowDelete: function(action){
@@ -16,6 +18,8 @@ export default {
 		}
 
 		this._rebindRow(action.component, newRow);
+
+		this.table.rowManager.checkPlaceholder();
 	},
 
 	rowMove: function(action){

package/src/js/modules/Keybindings/defaults/actions.js

@@ -83,6 +83,43 @@ export default {
 		this.dispatch("keybinding-nav-down", e);
 	},
 
+	rangeJumpLeft: function(e){
+		this.dispatch("keybinding-nav-range", e, "left", true, false);
+	},
+	rangeJumpRight: function(e){
+		this.dispatch("keybinding-nav-range", e, "right", true, false);
+	},
+	rangeJumpUp: function(e){
+		this.dispatch("keybinding-nav-range", e, "up", true, false);
+	},
+	rangeJumpDown: function(e){
+		this.dispatch("keybinding-nav-range", e, "down", true, false);
+	},
+	rangeExpandLeft: function(e){
+		this.dispatch("keybinding-nav-range", e, "left", false, true);
+	},
+	rangeExpandRight: function(e){
+		this.dispatch("keybinding-nav-range", e, "right", false, true);
+	},
+	rangeExpandUp: function(e){
+		this.dispatch("keybinding-nav-range", e, "up", false, true);
+	},
+	rangeExpandDown: function(e){
+		this.dispatch("keybinding-nav-range", e, "down", false, true);
+	},
+	rangeExpandJumpLeft: function(e){
+		this.dispatch("keybinding-nav-range", e, "left", true, true);
+	},
+	rangeExpandJumpRight: function(e){
+		this.dispatch("keybinding-nav-range", e, "right", true, true);
+	},
+	rangeExpandJumpUp: function(e){
+		this.dispatch("keybinding-nav-range", e, "up", true, true);
+	},
+	rangeExpandJumpDown: function(e){
+		this.dispatch("keybinding-nav-range", e, "down", true, true);
+	},
+
 	undo:function(e){
 		var cell = false;
 		if(this.table.options.history && this.table.modExists("history") && this.table.modExists("edit")){
@@ -116,4 +153,4 @@ export default {
 			}
 		}
 	},
-};
+};

package/src/js/modules/Keybindings/defaults/bindings.js

@@ -3,6 +3,8 @@ export default {
 	navNext:9,
 	navUp:38,
 	navDown:40,
+	navLeft:37,
+	navRight:39,
 	scrollPageUp:33,
 	scrollPageDown:34,
 	scrollToStart:36,
@@ -10,4 +12,17 @@ export default {
 	undo:["ctrl + 90", "meta + 90"],
 	redo:["ctrl + 89", "meta + 89"],
 	copyToClipboard:["ctrl + 67", "meta + 67"],
-};
+
+	rangeJumpUp:["ctrl + 38", "meta + 38"],
+	rangeJumpDown:["ctrl + 40", "meta + 40"],
+	rangeJumpLeft:["ctrl + 37", "meta + 37"],
+	rangeJumpRight:["ctrl + 39", "meta + 39"],
+	rangeExpandUp:"shift + 38",
+	rangeExpandDown:"shift + 40",
+	rangeExpandLeft:"shift + 37",
+	rangeExpandRight:"shift + 39",
+	rangeExpandJumpUp:["ctrl + shift + 38", "meta + shift + 38"],
+	rangeExpandJumpDown:["ctrl + shift + 40", "meta + shift + 40"],
+	rangeExpandJumpLeft:["ctrl + shift + 37", "meta + shift + 37"],
+	rangeExpandJumpRight:["ctrl + shift + 39", "meta + shift + 39"],
+};

package/src/js/modules/Menu/Menu.js

@@ -76,7 +76,7 @@ class Menu extends Module{
 			this.subscribe("group-dblclick", this.loadMenuEvent.bind(this, this.table.options.groupDblClickMenu));
 		}
 	}
-	
+
 	initializeColumn(column){
 		var	def = column.definition;
 		
@@ -285,6 +285,7 @@ class Menu extends Module{
 				this.rootPopup = null;
 				
 				if(this.currentComponent){
+					this.dispatch("menu-closed", menu, popup);
 					this.dispatchExternal("menuClosed", this.currentComponent.getComponent());
 					this.currentComponent = null;
 				}
@@ -292,6 +293,7 @@ class Menu extends Module{
 			
 			this.currentComponent = component;
 			
+			this.dispatch("menu-opened", menu, popup);
 			this.dispatchExternal("menuOpened", component.getComponent());
 		}
 	}

package/src/js/modules/MoveColumns/MoveColumns.js

@@ -37,8 +37,13 @@ class MoveColumns extends Module{
 	initialize(){
 		if(this.table.options.movableColumns){
 			this.subscribe("column-init", this.initializeColumn.bind(this));
+			this.subscribe("alert-show", this.abortMove.bind(this));
 		}
 	}
+
+	abortMove(){
+		clearTimeout(this.checkTimeout);
+	}
 	
 	initializeColumn(column){
 		var self = this,

package/src/js/modules/Popup/Popup.js

@@ -70,7 +70,7 @@ class Popup extends Module{
 			this.subscribe("group-dblclick", this.loadPopupEvent.bind(this, this.table.options.groupDblClickPopup));
 		}
 	}
-	
+
 	initializeColumn(column){
 		var def = column.definition;
 		

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

@@ -45,7 +45,7 @@ class ResizeTable extends Module{
 				this.autoResize = true;
 				
 				this.resizeObserver = new ResizeObserver((entry) => {
-					if(!table.browserMobile || (table.browserMobile &&!table.modules.edit.currentCell)){
+					if(!table.browserMobile || (table.browserMobile && (!table.modules.edit || (table.modules.edit && !table.modules.edit.currentCell)))){
 						
 						var nodeHeight = Math.floor(entry[0].contentRect.height);
 						var nodeWidth = Math.floor(entry[0].contentRect.width);
@@ -71,7 +71,7 @@ class ResizeTable extends Module{
 				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)){
+						if(!table.browserMobile || (table.browserMobile && (!table.modules.edit || (table.modules.edit && !table.modules.edit.currentCell)))){
 							
 							var nodeHeight = Math.floor(entry[0].contentRect.height);
 							var nodeWidth = Math.floor(entry[0].contentRect.width);
@@ -94,7 +94,7 @@ class ResizeTable extends Module{
 				
 			}else{
 				this.binding = function(){
-					if(!table.browserMobile || (table.browserMobile && !table.modules.edit.currentCell)){
+					if(!table.browserMobile || (table.browserMobile && (!table.modules.edit || (table.modules.edit && !table.modules.edit.currentCell)))){
 						table.columnManager.rerenderColumns(true);
 						table.redraw();
 					}