tabulator-tables 5.6.0 → 5.6.1

package/package.json

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

package/src/js/core/RowManager.js

@@ -1109,13 +1109,11 @@ export default class RowManager extends CoreFeature{
 	
 	//redraw table
 	redraw (force){
-		const resized = this.adjustTableSize();
+		this.adjustTableSize();
 		this.table.tableWidth = this.table.element.clientWidth;
 		
-		if(!force){
-			if(resized) {
-				this.reRenderInPosition();
-			}
+		if(!force){	
+			this.reRenderInPosition();
 			this.scrollHorizontal(this.scrollLeft);
 		}else{
 			this.renderTable();

package/src/js/core/Tabulator.js

@@ -830,7 +830,7 @@ class Tabulator {
 		this.options.height = isNaN(height) ? height : height + "px";
 		this.element.style.height = this.options.height;
 		this.rowManager.initializeRenderer();
-		this.rowManager.redraw();
+		this.rowManager.redraw(true);
 	}
 	
 	//////////////////// Event Bus ///////////////////

package/src/js/core/column/Column.js

@@ -257,6 +257,10 @@ class Column extends CoreFeature{
 				titleElement.focus();
 			});
 
+			titleElement.addEventListener("mousedown", (e) => {
+				e.stopPropagation();
+			});
+
 			titleElement.addEventListener("change", () => {
 				def.title = titleElement.value;
 				this.dispatchExternal("columnTitleChanged", this.getComponent());

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

@@ -596,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){
@@ -609,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 = {};
 					}
@@ -627,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{
@@ -642,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");

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/FrozenColumns/FrozenColumns.js

@@ -34,6 +34,7 @@ class FrozenColumns extends Module{
 		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));

package/src/js/modules/SelectRange/Range.js

@@ -22,6 +22,13 @@ class Range extends CoreFeature{
 		this.table = table;
 		this.start = {row:0, col:0};
 		this.end = {row:0, col:0};
+
+		if(this.rangeManager.rowHeader){
+			this.left = 1;
+			this.right = 1;
+			this.start.col = 1;
+			this.end.col = 1;
+		}
 		
 		this.initElement();
 		
@@ -81,14 +88,14 @@ class Range extends CoreFeature{
 		
 		if (element.type === "column") {
 			if(this.rangeManager.columnSelection){
-				this.setStart(0, element.getPosition() - 2);
+				this.setStart(0, element.getPosition() - 1);
 			}
 		}else{
 			row = element.row.position - 1;
-			col = element.column.getPosition() - 2;
+			col = element.column.getPosition() - 1;
 			
 			if (element.column === this.rangeManager.rowHeader) {
-				this.setStart(row, 0);
+				this.setStart(row, 1);
 			} else {
 				this.setStart(row, col);
 			}
@@ -102,18 +109,18 @@ class Range extends CoreFeature{
 		if (element.type === "column") {
 			if(this.rangeManager.columnSelection){
 				if (this.rangeManager.selecting === "column") {
-					this.setEnd(rowsCount - 1, element.getPosition() - 2);
+					this.setEnd(rowsCount - 1, element.getPosition() - 1);
 				} else if (this.rangeManager.selecting === "cell") {
-					this.setEnd(0, element.getPosition() - 2);
+					this.setEnd(0, element.getPosition() - 1);
 				}
 			}
 		}else{
 			row = element.row.position - 1;
-			col = element.column.getPosition() - 2;
+			col = element.column.getPosition() - 1;
 			isRowHeader = element.column === this.rangeManager.rowHeader;
 			
 			if (this.rangeManager.selecting === "row") {
-				this.setEnd(row, this._getTableColumns().length - 2);
+				this.setEnd(row, this._getTableColumns().length - 1);
 			} else if (this.rangeManager.selecting !== "row" && isRowHeader) {
 				this.setEnd(row, 0);
 			} else if (this.rangeManager.selecting === "column") {
@@ -195,11 +202,11 @@ class Range extends CoreFeature{
 	}
 	
 	atTopLeft(cell) {
-		return cell.row.position - 1 === this.top && cell.column.getPosition() - 2 === this.left;
+		return cell.row.position - 1 === this.top && cell.column.getPosition() - 1 === this.left;
 	}
 	
 	atBottomRight(cell) {
-		return cell.row.position - 1 === this.bottom && cell.column.getPosition() - 2 === this.right;
+		return cell.row.position - 1 === this.bottom && cell.column.getPosition() - 1 === this.right;
 	}
 	
 	occupies(cell) {
@@ -211,7 +218,7 @@ class Range extends CoreFeature{
 	}
 	
 	occupiesColumn(col) {
-		return this.left <= col.getPosition() - 2 && col.getPosition() - 2 <= this.right;
+		return this.left <= col.getPosition() - 1 && col.getPosition() - 1 <= this.right;
 	}
 	
 	overlaps(left, top, right, bottom) {
@@ -280,7 +287,7 @@ class Range extends CoreFeature{
 	}
 	
 	getColumns() {
-		return this._getTableColumns().slice(this.left + 1, this.right + 2);
+		return this._getTableColumns().slice(this.left, this.right + 1);
 	}
 	
 	clearValues(){

package/src/js/modules/SelectRange/SelectRange.js

@@ -123,7 +123,7 @@ class SelectRange extends Module {
 	
 	initializeColumn(column) {
 		if(this.columnSelection && column.definition.headerSort && this.options("headerSortClickElement") !== "icon"){
-			console.warn("Using column headerSort with selectableRangeColumns option may result in unpredictable behavior");
+			console.warn("Using column headerSort with selectableRangeColumns option may result in unpredictable behavior. Consider using headerSortClickElement: 'icon'.");
 		}
 		
 		if (column.modules.edit) {
@@ -422,7 +422,7 @@ class SelectRange extends Module {
 					nextCol = Math.max(nextCol - 1, 0);
 					break;
 				case "right":
-					nextCol = Math.min(nextCol + 1, this.getTableColumns().length - 2);
+					nextCol = Math.min(nextCol + 1, this.getTableColumns().length - 1);
 					break;
 				case "up":
 					nextRow = Math.max(nextRow - 1, 0);
@@ -516,13 +516,14 @@ class SelectRange extends Module {
 	findJumpCellLeft(rowPos, colPos){
 		var row = this.getRowByRangePos(rowPos),
 		cells = row.cells.filter((cell) => cell.column.visible),
-		isStartingCellEmpty = !cells[colPos + 1].getValue(),
+		isStartingCellEmpty = !cells[colPos].getValue(),
 		isLeftOfStartingCellEmpty = cells[colPos] ? !cells[colPos].getValue() : false,
 		jumpCol = colPos,
-		nextCell = this.findJumpCell(cells.slice(0, colPos), true, isStartingCellEmpty, isLeftOfStartingCellEmpty);
+		targetCells = this.rowHeader ? cells.slice(1, colPos) : cells.slice(0, colPos),
+		nextCell = this.findJumpCell(targetCells, true, isStartingCellEmpty, isLeftOfStartingCellEmpty);
 		
 		if(nextCell){
-			jumpCol = nextCell.column.getPosition() - 2;
+			jumpCol = nextCell.column.getPosition() - 1;
 		}
 		
 		return jumpCol;
@@ -531,13 +532,13 @@ class SelectRange extends Module {
 	findJumpCellRight(rowPos, colPos){
 		var row = this.getRowByRangePos(rowPos),
 		cells = row.cells.filter((cell) => cell.column.visible),
-		isStartingCellEmpty = !cells[colPos + 1].getValue(),
-		isRightOfStartingCellEmpty = cells[colPos + 2] ? !cells[colPos + 2].getValue() : false,
+		isStartingCellEmpty = !cells[colPos].getValue(),
+		isRightOfStartingCellEmpty = cells[colPos + 1] ? !cells[colPos + 1].getValue() : false,
 		jumpCol = colPos,
-		nextCell = this.findJumpCell(cells.slice(colPos + 2, cells.length), false, isStartingCellEmpty, isRightOfStartingCellEmpty);
+		nextCell = this.findJumpCell(cells.slice(colPos + 1, cells.length), false, isStartingCellEmpty, isRightOfStartingCellEmpty);
 		
 		if(nextCell){
-			jumpCol = nextCell.column.getPosition() - 2;
+			jumpCol = nextCell.column.getPosition() - 1;
 		}
 		
 		return jumpCol;
@@ -588,8 +589,13 @@ class SelectRange extends Module {
 				range = this.resetRanges();
 				this.selecting = "all";
 				
-				const topLeftCell = this.getCell(0, 0);
-				const bottomRightCell = this.getCell(-1, -1);
+				var topLeftCell, bottomRightCell = this.getCell(-1, -1);
+
+				if(this.rowHeader){
+					topLeftCell = this.getCell(0, 1);
+				}else{
+					topLeftCell = this.getCell(0, 0);
+				}
 				
 				range.setBounds(topLeftCell, bottomRightCell);		
 				return;
@@ -613,9 +619,8 @@ class SelectRange extends Module {
 	
 	autoScroll(range, row, column) {
 		var tableHolder = this.table.rowManager.element,
-		rowHeader = this.rowHeader.getElement(),
-		rect, view, withinHorizontalView, withinVerticalView;
-		
+		rowHeader, rect, view, withinHorizontalView, withinVerticalView;
+
 		if (typeof row === 'undefined') {
 			row = this.getRowByRangePos(range.end.row).getElement();
 		}
@@ -623,6 +628,10 @@ class SelectRange extends Module {
 		if (typeof column === 'undefined') {
 			column = this.getColumnByRangePos(range.end.col).getElement();
 		}
+
+		if (this.rowHeader) {
+			rowHeader = this.rowHeader.getElement();
+		}
 		
 		rect = {
 			left: column.offsetLeft,
@@ -632,11 +641,15 @@ class SelectRange extends Module {
 		};
 		
 		view = {
-			left: tableHolder.scrollLeft + rowHeader.offsetWidth,
+			left: tableHolder.scrollLeft,
 			right: Math.ceil(tableHolder.scrollLeft + tableHolder.clientWidth),
 			top: tableHolder.scrollTop,
 			bottom:	tableHolder.scrollTop +	tableHolder.offsetHeight - this.table.rowManager.scrollbarWidth,
 		};
+
+		if (rowHeader) {
+			view.left += rowHeader.offsetWidth;
+		}
 		
 		withinHorizontalView = view.left < rect.left &&	rect.left < view.right && view.left < rect.right &&	rect.right < view.right;
 		
@@ -644,7 +657,10 @@ class SelectRange extends Module {
 		
 		if (!withinHorizontalView) {
 			if (rect.left < view.left) {
-				tableHolder.scrollLeft = rect.left - rowHeader.offsetWidth;
+				tableHolder.scrollLeft = rect.left;
+				if (rowHeader) {
+					tableHolder.scrollLeft -= rowHeader.offsetWidth;
+				}
 			} else if (rect.right > view.right) {
 				tableHolder.scrollLeft = rect.right - tableHolder.clientWidth;
 			}
@@ -763,8 +779,7 @@ class SelectRange extends Module {
 		var row;
 		
 		if (colIdx < 0) {
-			colIdx = this.getTableColumns().length + colIdx - 1;
-			
+			colIdx = this.getTableColumns().length + colIdx;
 			if (colIdx < 0) {
 				return null;
 			}
@@ -776,7 +791,7 @@ class SelectRange extends Module {
 		
 		row = this.table.rowManager.getRowFromPosition(rowIdx + 1);
 		
-		return row ? row.getCells(false, true).filter((cell) => cell.column.visible)[colIdx + 1] : null;
+		return row ? row.getCells(false, true).filter((cell) => cell.column.visible)[colIdx] : null;
 	}
 	
 	
@@ -789,7 +804,7 @@ class SelectRange extends Module {
 	}
 	
 	getColumnByRangePos(pos) {
-		return this.getTableColumns()[pos + 1];
+		return this.getTableColumns()[pos];
 	}
 	
 	getTableRows() {

package/src/scss/tabulator.scss

@@ -776,6 +776,13 @@ $rangeHeaderTextHighlightBackground: #000000 !default; //header text color when
 	}
 
 	
+	&.tabulator-range-selected{
+		.tabulator-cell.tabulator-range-row-header{
+			background-color: $rangeHeaderSelectedBackground;
+			color: $rangeHeaderSelectedTextColor;
+		}
+	}
+	
 	//row resize handles
 	.tabulator-row-resize-handle{
 		position:absolute;
@@ -904,13 +911,6 @@ $rangeHeaderTextHighlightBackground: #000000 !default; //header text color when
 			}
 		}
 		
-		&.tabulator-range-row-header{
-			&.tabulator-range-selected{
-				background-color: $rangeHeaderSelectedBackground;
-				color: $rangeHeaderSelectedTextColor;
-			}
-		}
-		
 		&.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header){
 			background-color: $rowSelectedBackground;
 		}