tabulator-tables 5.6.1 → 6.0.0

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

@@ -1,7 +1,7 @@
 import CoreFeature from '../../core/CoreFeature.js';
 import RangeComponent from "./RangeComponent";
 
-class Range extends CoreFeature{
+export default class Range extends CoreFeature{
 	constructor(table, rangeManager, start, end) {
 		super(table);
 		
@@ -152,7 +152,7 @@ class Range extends CoreFeature{
 	}
 	
 	_getTableRows() {
-		return this.table.rowManager.getDisplayRows();
+		return this.table.rowManager.getDisplayRows().filter(row=> row.type === "row");
 	}
 	
 	///////////////////////////////////
@@ -164,7 +164,11 @@ class Range extends CoreFeature{
 		_vDomBottom = this.table.rowManager.renderer.vDomBottom,
 		_vDomLeft = this.table.columnManager.renderer.leftCol,
 		_vDomRight = this.table.columnManager.renderer.rightCol,		
-		top, bottom, left, right, topLeftCell, bottomRightCell;
+		top, bottom, left, right, topLeftCell, bottomRightCell, topLeftCellEl, bottomRightCellEl, topLeftRowEl, bottomRightRowEl;
+
+		if(this.table.options.renderHorizontal === "virtual" && this.rangeManager.rowHeader) {
+			_vDomRight += 1;
+		}
 		
 		if (_vDomTop == null) {
 			_vDomTop = 0;
@@ -190,14 +194,24 @@ class Range extends CoreFeature{
 			
 			topLeftCell = this.rangeManager.getCell(top, left);
 			bottomRightCell = this.rangeManager.getCell(bottom, right);
+			topLeftCellEl = topLeftCell.getElement();
+			bottomRightCellEl = bottomRightCell.getElement();
+			topLeftRowEl = topLeftCell.row.getElement();
+			bottomRightRowEl = bottomRightCell.row.getElement();
 			
 			this.element.classList.add("tabulator-range-active");
 			// this.element.classList.toggle("tabulator-range-active", this === this.rangeManager.activeRange);
+
+			if(this.table.rtl){
+				this.element.style.right = topLeftRowEl.offsetWidth - topLeftCellEl.offsetLeft - topLeftCellEl.offsetWidth + "px";
+				this.element.style.width = topLeftCellEl.offsetLeft + topLeftCellEl.offsetWidth - bottomRightCellEl.offsetLeft + "px";
+			}else{
+				this.element.style.left = topLeftRowEl.offsetLeft + topLeftCellEl.offsetLeft + "px";
+				this.element.style.width = bottomRightCellEl.offsetLeft + bottomRightCellEl.offsetWidth - topLeftCellEl.offsetLeft + "px";
+			}
 			
-			this.element.style.left = topLeftCell.row.getElement().offsetLeft + topLeftCell.getElement().offsetLeft + "px";
-			this.element.style.top = topLeftCell.row.getElement().offsetTop + "px";
-			this.element.style.width = bottomRightCell.getElement().offsetLeft + bottomRightCell.getElement().offsetWidth - topLeftCell.getElement().offsetLeft + "px";
-			this.element.style.height = bottomRightCell.row.getElement().offsetTop + bottomRightCell.row.getElement().offsetHeight - topLeftCell.row.getElement().offsetTop + "px";
+			this.element.style.top = topLeftRowEl.offsetTop + "px";
+			this.element.style.height = bottomRightRowEl.offsetTop + bottomRightRowEl.offsetHeight - topLeftRowEl.offsetTop + "px";
 		}
 	}
 	
@@ -349,6 +363,4 @@ class Range extends CoreFeature{
 		
 		return !this.destroyed;
 	}
-}
-
-export default Range;
+}

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

@@ -1,4 +1,4 @@
-class RangeComponent {
+export default class RangeComponent {
 	constructor(range) {
 		this._range = range;
 
@@ -88,6 +88,4 @@ class RangeComponent {
 			this._range.destroy(true);
 		}
 	}
-}
-
-export default RangeComponent;
+}

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

@@ -1,7 +1,14 @@
 import Module from "../../core/Module.js";
 import Range from "./Range.js";
+import extensions from './extensions/extensions.js';
 
-class SelectRange extends Module {
+
+export default class SelectRange extends Module {
+	
+	static moduleName = "selectRange";
+	static moduleInitOrder = 1;
+	static moduleExtensions = extensions;
+	
 	constructor(table) {
 		super(table);
 		
@@ -25,11 +32,11 @@ class SelectRange extends Module {
 		this.registerTableOption("selectableRangeRows", false); //enable selectable range
 		this.registerTableOption("selectableRangeClearCells", false); //allow clearing of active range
 		this.registerTableOption("selectableRangeClearCellsValue", undefined); //value for cleared active range
-
+		
 		this.registerTableFunction("getRangesData", this.getRangesData.bind(this));
 		this.registerTableFunction("getRanges", this.getRanges.bind(this));
 		this.registerTableFunction("addRange", this.addRangeFromComponent.bind(this));
-
+		
 		this.registerComponentFunction("cell", "getRanges", this.cellGetRanges.bind(this));
 		this.registerComponentFunction("row", "getRanges", this.rowGetRanges.bind(this));
 		this.registerComponentFunction("column", "getRanges", this.colGetRanges.bind(this));
@@ -40,9 +47,8 @@ class SelectRange extends Module {
 	///////////////////////////////////
 	
 	initialize() {
-		if (this.options("selectableRange")) {		
+		if (this.options("selectableRange")) {	
 			if(!this.options("selectableRows")){
-				
 				this.maxRanges = this.options("selectableRange");
 				
 				this.initializeTable();
@@ -50,6 +56,14 @@ class SelectRange extends Module {
 			}else{
 				console.warn("SelectRange functionality cannot be used in conjunction with row selection");
 			}
+
+			if(this.options('columns').findIndex((column) => column.frozen) > 0) {
+				console.warn("Having frozen column in arbitrary position with selectRange option may result in unpredictable behavior.");
+			}
+
+			if(this.options('columns').filter((column) => column.frozen) > 1) {
+				console.warn("Having multiple frozen columns with selectRange option may result in unpredictable behavior.");
+			}
 		}
 	}
 	
@@ -88,7 +102,7 @@ class SelectRange extends Module {
 		this.subscribe("column-height", this.layoutChange.bind(this));
 		this.subscribe("column-resized", this.layoutChange.bind(this));
 		this.subscribe("columns-loaded", this.updateHeaderColumn.bind(this));
-
+		
 		this.subscribe("cell-height", this.layoutChange.bind(this));
 		this.subscribe("cell-rendered", this.renderCell.bind(this));
 		this.subscribe("cell-mousedown", this.handleCellMouseDown.bind(this));
@@ -97,7 +111,7 @@ class SelectRange extends Module {
 		this.subscribe("cell-editing", this.handleEditingCell.bind(this));
 		
 		this.subscribe("page-changed", this.redraw.bind(this));
-
+		
 		this.subscribe("scroll-vertical", this.layoutChange.bind(this));
 		this.subscribe("scroll-horizontal", this.layoutChange.bind(this));
 		
@@ -134,6 +148,8 @@ class SelectRange extends Module {
 	}
 	
 	updateHeaderColumn(){
+		var frozenCols;
+
 		if(this.rowSelection){
 			this.rowHeader = this.table.columnManager.getVisibleColumnsByIndex()[0];
 			
@@ -149,6 +165,15 @@ class SelectRange extends Module {
 				}
 			}
 		}
+
+		//warn if invalid frozen column configuration detected
+		if(this.table.modules.frozenColumns && this.table.modules.frozenColumns.active){
+			frozenCols = this.table.modules.frozenColumns.getFrozenColumns();
+
+			if(frozenCols.length > 1 || (frozenCols.length === 1 && frozenCols[0] !== this.rowHeader)){
+				console.warn("Using frozen columns that are not the range header in combination with the selectRange option may result in unpredictable behavior");
+			}
+		}
 	}
 	
 	///////////////////////////////////
@@ -214,12 +239,12 @@ class SelectRange extends Module {
 				if (this.table.modules.edit && this.table.modules.edit.currentCell) {
 					return;
 				}
-
+				
 				this.table.modules.edit.editCell(this.getActiveCell());
 				
 				e.preventDefault();
 			}
-
+			
 			if ((e.key === "Backspace" || e.key === "Delete") && this.options("selectableRangeClearCells")) {
 				if(this.activeRange){
 					this.activeRange.clearValues();
@@ -346,7 +371,7 @@ class SelectRange extends Module {
 	finishEditingCell() {
 		this.blockKeydown = true;
 		this.table.rowManager.element.focus();
-
+		
 		setTimeout(() => {
 			this.blockKeydown = false;
 		}, 10);
@@ -590,7 +615,7 @@ class SelectRange extends Module {
 				this.selecting = "all";
 				
 				var topLeftCell, bottomRightCell = this.getCell(-1, -1);
-
+				
 				if(this.rowHeader){
 					topLeftCell = this.getCell(0, 1);
 				}else{
@@ -620,7 +645,7 @@ class SelectRange extends Module {
 	autoScroll(range, row, column) {
 		var tableHolder = this.table.rowManager.element,
 		rowHeader, rect, view, withinHorizontalView, withinVerticalView;
-
+		
 		if (typeof row === 'undefined') {
 			row = this.getRowByRangePos(range.end.row).getElement();
 		}
@@ -628,7 +653,7 @@ class SelectRange extends Module {
 		if (typeof column === 'undefined') {
 			column = this.getColumnByRangePos(range.end.col).getElement();
 		}
-
+		
 		if (this.rowHeader) {
 			rowHeader = this.rowHeader.getElement();
 		}
@@ -646,7 +671,7 @@ class SelectRange extends Module {
 			top: tableHolder.scrollTop,
 			bottom:	tableHolder.scrollTop +	tableHolder.offsetHeight - this.table.rowManager.scrollbarWidth,
 		};
-
+		
 		if (rowHeader) {
 			view.left += rowHeader.offsetWidth;
 		}
@@ -748,7 +773,7 @@ class SelectRange extends Module {
 	}
 	
 	layoutRanges() {
-		var activeCell;
+		var activeCell, activeCellEl, activeRowEl;
 		
 		if (!this.table.initialized) {
 			return;
@@ -759,11 +784,19 @@ class SelectRange extends Module {
 		if (!activeCell) {
 			return;
 		}
-		
-		this.activeRangeCellElement.style.left = activeCell.row.getElement().offsetLeft + activeCell.getElement().offsetLeft + "px";
-		this.activeRangeCellElement.style.top =	activeCell.row.getElement().offsetTop + "px";
-		this.activeRangeCellElement.style.width = activeCell.getElement().offsetLeft + activeCell.getElement().offsetWidth - activeCell.getElement().offsetLeft + "px";
-		this.activeRangeCellElement.style.height = activeCell.row.getElement().offsetTop + activeCell.row.getElement().offsetHeight - activeCell.row.getElement().offsetTop + "px";
+
+		activeCellEl = activeCell.getElement();
+		activeRowEl = activeCell.row.getElement();
+
+		if(this.table.rtl){
+			this.activeRangeCellElement.style.right = activeRowEl.offsetWidth - activeCellEl.offsetLeft - activeCellEl.offsetWidth + "px";
+		}else{
+			this.activeRangeCellElement.style.left = activeRowEl.offsetLeft + activeCellEl.offsetLeft + "px";
+		}
+
+		this.activeRangeCellElement.style.top =	activeRowEl.offsetTop + "px";
+		this.activeRangeCellElement.style.width = activeCellEl.offsetWidth + "px";
+		this.activeRangeCellElement.style.height =  activeRowEl.offsetHeight  + "px";
 		
 		this.ranges.forEach((range) => range.layout());
 		
@@ -808,7 +841,7 @@ class SelectRange extends Module {
 	}
 	
 	getTableRows() {
-		return this.table.rowManager.getDisplayRows();
+		return this.table.rowManager.getDisplayRows().filter(row=> row.type === "row");
 	}
 	
 	getTableColumns() {
@@ -832,7 +865,7 @@ class SelectRange extends Module {
 	}
 	
 	resetRanges() {
-		var range, cell;
+		var range, cell, visibleCells;
 		
 		this.ranges.forEach((range) => range.destroy());
 		this.ranges = [];
@@ -840,7 +873,8 @@ class SelectRange extends Module {
 		range = this.addRange();
 		
 		if(this.table.rowManager.activeRows.length){
-			cell = this.table.rowManager.activeRows[0].cells[this.rowHeader ? 1 : 0];
+			visibleCells = this.table.rowManager.activeRows[0].cells.filter((cell) => cell.column.visible);
+			cell = visibleCells[this.rowHeader ? 1 : 0];
 
 			if(cell){
 				range.setBounds(cell);
@@ -863,8 +897,4 @@ class SelectRange extends Module {
 	selectedColumns(component) {
 		return component ? this.activeRange.getColumns().map((col) => col.getComponent()) : this.activeRange.getColumns();
 	}
-}
-
-SelectRange.moduleName = "selectRange";
-
-export default SelectRange;
+}

package/src/js/modules/SelectRange/extensions/clipboard/pasteActions.js

@@ -0,0 +1,45 @@
+export default {
+	range:function(data){
+		var rows = [],
+		range = this.table.modules.selectRange.activeRange,
+		singleCell = false,
+		bounds, startCell, startRow, rowWidth, dataLength;
+
+		dataLength = data.length;
+		
+		if(range){
+			bounds = range.getBounds();
+			startCell = bounds.start;
+			
+			if(bounds.start === bounds.end){
+				singleCell = true;
+			}
+			
+			if(startCell){
+				rows = this.table.rowManager.activeRows.slice();
+				startRow = rows.indexOf(startCell.row);
+
+				if(singleCell){
+					rowWidth = data.length;
+				}else{
+					rowWidth = (rows.indexOf(bounds.end.row) - startRow) + 1;
+				}
+				
+				
+				if(startRow >-1){
+					this.table.blockRedraw();
+					
+					rows = rows.slice(startRow, startRow + rowWidth);
+					
+					rows.forEach((row, i) => {
+						row.updateData(data[i % dataLength]);
+					});
+					
+					this.table.restoreRedraw();
+				}
+			}
+		}
+		
+		return rows;
+	}
+};

package/src/js/modules/SelectRange/extensions/clipboard/pasteParsers.js

@@ -0,0 +1,57 @@
+export default {
+	range:function(clipboard){
+		var data = [],
+		rows = [],
+		range = this.table.modules.selectRange.activeRange,
+		singleCell = false,
+		bounds, startCell, colWidth, columnMap, startCol;
+		
+		if(range){
+			bounds = range.getBounds();
+			startCell = bounds.start;
+
+			if(bounds.start === bounds.end){
+				singleCell = true;
+			}
+			
+			if(startCell){
+				//get data from clipboard into array of columns and rows.
+				clipboard = clipboard.split("\n");
+				
+				clipboard.forEach(function(row){
+					data.push(row.split("\t"));
+				});
+				
+				if(data.length){
+					columnMap = this.table.columnManager.getVisibleColumnsByIndex();
+					startCol = columnMap.indexOf(startCell.column);
+
+					if(startCol > -1){
+						if(singleCell){
+							colWidth = data[0].length;
+						}else{
+							colWidth = (columnMap.indexOf(bounds.end.column) - startCol) + 1;
+						}
+
+						columnMap = columnMap.slice(startCol, startCol + colWidth);
+
+						data.forEach((item) => {
+							var row = {};
+							var itemLength = item.length;
+
+							columnMap.forEach(function(col, i){
+								row[col.field] = item[i % itemLength];
+							});
+							
+							rows.push(row);	
+						});
+
+						return rows;
+					}				
+				}
+			}
+		}
+		
+		return false;
+	}
+};

package/src/js/modules/SelectRange/extensions/export/columnLookups.js

@@ -0,0 +1,11 @@
+export default {
+	range:function(){
+		var columns = this.modules.selectRange.selectedColumns();
+
+		if(this.columnManager.rowHeader){
+			columns.unshift(this.columnManager.rowHeader);
+		}
+
+		return columns;
+	},
+};

package/src/js/modules/SelectRange/extensions/export/rowLookups.js

@@ -0,0 +1,5 @@
+export default {
+	range:function(){
+		return this.modules.selectRange.selectedRows();
+	},
+};

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

@@ -0,0 +1,21 @@
+import bindings from './keybindings/bindings.js';
+import actions from './keybindings/actions.js';
+import pasteActions from './clipboard/pasteActions.js';
+import pasteParsers from './clipboard/pasteParsers.js';
+import columnLookups from './export/columnLookups.js';
+import rowLookups from './export/rowLookups.js';
+
+export default {
+	keybindings:{
+		bindings:bindings,
+		actions:actions
+	},
+	clipboard:{
+		pasteActions:pasteActions,
+		pasteParsers:pasteParsers
+	},
+	export:{
+		columnLookups:columnLookups,
+		rowLookups:rowLookups,
+	}
+};

package/src/js/modules/SelectRange/extensions/keybindings/actions.js

@@ -0,0 +1,38 @@
+export default {
+	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);
+	},
+};

package/src/js/modules/SelectRange/extensions/keybindings/bindings.js

@@ -0,0 +1,14 @@
+export default {
+	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/SelectRow/SelectRow.js

@@ -1,6 +1,10 @@
 import Module from '../../core/Module.js';
+import extensions from './extensions/extensions.js';
 
-class SelectRow extends Module{
+export default class SelectRow extends Module{
+
+	static moduleName = "selectRow";
+	static moduleExtensions = extensions;
 	
 	constructor(table){
 		super(table);
@@ -51,11 +55,11 @@ class SelectRow extends Module{
 	}
 
 	deprecatedOptionsCheck(){
-		this.deprecationCheck("selectable", "selectableRows", true);
-		this.deprecationCheck("selectableRollingSelection", "selectableRowsRollingSelection", true);
-		this.deprecationCheck("selectableRangeMode", "selectableRowsRangeMode", true);
-		this.deprecationCheck("selectablePersistence", "selectableRowsPersistence", true);
-		this.deprecationCheck("selectableCheck", "selectableRowsCheck", true);
+		// this.deprecationCheck("selectable", "selectableRows", true);
+		// this.deprecationCheck("selectableRollingSelection", "selectableRowsRollingSelection", true);
+		// this.deprecationCheck("selectableRangeMode", "selectableRowsRangeMode", true);
+		// this.deprecationCheck("selectablePersistence", "selectableRowsPersistence", true);
+		// this.deprecationCheck("selectableCheck", "selectableRowsCheck", true);
 	}
 	
 	rowRetrieve(type, prevValue){
@@ -476,7 +480,7 @@ class SelectRow extends Module{
 	}
 	
 	childRowSelection(row, select){
-		var children = this.table.modules.dataTree.getChildren(row, true);
+		var children = this.table.modules.dataTree.getChildren(row, true, true);
 		
 		if(select){
 			for(let child of children){
@@ -488,8 +492,4 @@ class SelectRow extends Module{
 			}
 		}
 	}
-}
-
-SelectRow.moduleName = "selectRow";
-
-export default SelectRow;
+}

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

@@ -0,0 +1,9 @@
+import rowSelection from './formatters/rowSelection.js';
+
+export default {
+	format:{
+		formatters:{
+			rowSelection:rowSelection,
+		}
+	}
+};

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

@@ -2,7 +2,12 @@ import Module from '../../core/Module.js';
 
 import defaultSorters from './defaults/sorters.js';
 
-class Sort extends Module{
+export default class Sort extends Module{
+
+	static moduleName = "sort";
+
+	//load defaults
+	static sorters = defaultSorters;
 	
 	constructor(table){
 		super(table);
@@ -333,7 +338,7 @@ class Sort extends Module{
 	}
 	
 	//work through sort list sorting data
-	sort(data){
+	sort(data, sortOnly){
 		var self = this,
 		sortList = this.table.options.sortOrderReverse ? self.sortList.slice().reverse() : self.sortList,
 		sortListActual = [],
@@ -343,7 +348,9 @@ class Sort extends Module{
 			this.dispatchExternal("dataSorting", self.getSort());
 		}
 		
-		self.clearColumnHeaders();
+		if(!sortOnly) {
+			self.clearColumnHeaders();
+		}
 		
 		if(this.table.options.sortMode !== "remote"){
 			
@@ -366,7 +373,9 @@ class Sort extends Module{
 						sortListActual.push(item);
 					}
 					
-					self.setColumnHeader(item.column, item.dir);
+					if(!sortOnly) {
+						self.setColumnHeader(item.column, item.dir);
+					}
 				}
 			});
 			
@@ -375,11 +384,12 @@ class Sort extends Module{
 				self._sortItems(data, sortListActual);
 			}
 			
-		}else{
+		}else if(!sortOnly) {
 			sortList.forEach(function(item, i){
 				self.setColumnHeader(item.column, item.dir);
 			});
 		}
+
 		
 		if(this.subscribedExternal("dataSorted")){
 			data.forEach((row) => {
@@ -467,11 +477,4 @@ class Sort extends Module{
 		
 		return column.modules.sort.sorter.call(this, a, b, el1Comp, el2Comp, column.getComponent(), dir, params);
 	}
-}
-
-Sort.moduleName = "sort";
-
-//load defaults
-Sort.sorters = defaultSorters;
-
-export default Sort;
+}