tabulator-tables 5.5.3 → 5.6.0

package/dist/js/tabulator_esm.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.5.3 (c) Oliver Folkerd 2024 */
+/* Tabulator v5.6.0 (c) Oliver Folkerd 2024 */
 class CoreFeature{
 
 	constructor(table){
@@ -119,8 +119,8 @@ class CoreFeature{
 	/////////// Deprecation Checks ///////////
 	//////////////////////////////////////////
 
-	deprecationCheck(oldOption, newOption){
-		return this.table.deprecationAdvisor.check(oldOption, newOption);
+	deprecationCheck(oldOption, newOption,  convert){
+		return this.table.deprecationAdvisor.check(oldOption, newOption,  convert);
 	}
 
 	deprecationCheckMsg(oldOption, msg){
@@ -1079,15 +1079,58 @@ Ajax.defaultLoaderPromise = defaultLoaderPromise;
 Ajax.contentTypeFormatters = defaultContentTypeFormatters;
 
 var defaultPasteActions = {
-	replace:function(rows){
-		return this.table.setData(rows);
+	replace:function(data){
+		return this.table.setData(data);
 	},
-	update:function(rows){
-		return this.table.updateOrAddData(rows);
+	update:function(data){
+		return this.table.updateOrAddData(data);
 	},
-	insert:function(rows){
-		return this.table.addData(rows);
+	insert:function(data){
+		return this.table.addData(data);
 	},
+	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;
+	}
 };
 
 var defaultPasteParsers = {
@@ -1097,72 +1140,127 @@ var defaultPasteParsers = {
 		columns = this.table.columnManager.columns,
 		columnMap = [],
 		rows = [];
-
+		
 		//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 && !(data.length === 1 && data[0].length < 2)){
-
+			
 			//check if headers are present by title
 			data[0].forEach(function(value){
 				var column = columns.find(function(column){
 					return value && column.definition.title && value.trim() && column.definition.title.trim() === value.trim();
 				});
-
+				
 				if(column){
 					columnMap.push(column);
 				}else {
 					headerFindSuccess = false;
 				}
 			});
-
+			
 			//check if column headers are present by field
 			if(!headerFindSuccess){
 				headerFindSuccess = true;
 				columnMap = [];
-
+				
 				data[0].forEach(function(value){
 					var column = columns.find(function(column){
 						return value && column.field && value.trim() && column.field.trim() === value.trim();
 					});
-
+					
 					if(column){
 						columnMap.push(column);
 					}else {
 						headerFindSuccess = false;
 					}
 				});
-
+				
 				if(!headerFindSuccess){
 					columnMap = this.table.columnManager.columnsByIndex;
 				}
 			}
-
+			
 			//remove header row if found
 			if(headerFindSuccess){
 				data.shift();
 			}
-
+			
 			data.forEach(function(item){
 				var row = {};
-
+				
 				item.forEach(function(value, i){
 					if(columnMap[i]){
 						row[columnMap[i].field] = value;
 					}
 				});
-
+				
 				rows.push(row);
 			});
-
+			
 			return rows;
 		}else {
 			return false;
 		}
+	},
+	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;
 	}
 };
 
@@ -1305,6 +1403,7 @@ class Clipboard extends Module{
 		var sel, textRange;
 		this.blocked = false;
 		this.customSelection = false;
+	
 
 		if (this.mode === true || this.mode === "copy") {
 
@@ -1372,7 +1471,7 @@ class Clipboard extends Module{
 	paste(e){
 		var data, rowData, rows;
 
-		if(this.checkPaseOrigin(e)){
+		if(this.checkPasteOrigin(e)){
 
 			data = this.getPasteData(e);
 
@@ -1409,10 +1508,11 @@ class Clipboard extends Module{
 	}
 
 
-	checkPaseOrigin(e){
+	checkPasteOrigin(e){
 		var valid = true;
+		var blocked = this.confirm("clipboard-paste", [e]);
 
-		if(e.target.tagName != "DIV" || this.table.modules.edit.currentCell){
+		if(blocked || !["DIV", "SPAN"].includes(e.target.tagName)){
 			valid = false;
 		}
 
@@ -2829,6 +2929,8 @@ class Column extends CoreFeature{
 
 			this.table.columnManager.rerenderColumns(true);
 
+			this.dispatch("column-deleted", this);
+
 			resolve();
 		});
 	}
@@ -2969,6 +3071,10 @@ class Column extends CoreFeature{
 
 		return this.component;
 	}
+
+	getPosition(){
+		return this.table.columnManager.getVisibleColumnsByIndex().indexOf(this) + 1;
+	}
 }
 
 Column.defaultOptionList = defaultColumnOptions;
@@ -3888,8 +3994,14 @@ class ColumnCalcs extends Module{
 	}
 	
 	initializeTopRow(){
+		var	fragment = document.createDocumentFragment();
+		
 		if(!this.topInitialized){
-			this.table.columnManager.getContentsElement().insertBefore(this.topElement, this.table.columnManager.headersElement.nextSibling);
+
+			fragment.appendChild(document.createElement("br"));
+			fragment.appendChild(this.topElement);
+
+			this.table.columnManager.getContentsElement().insertBefore(fragment, this.table.columnManager.headersElement.nextSibling);
 			this.topInitialized = true;
 		}
 	}
@@ -7631,6 +7743,8 @@ class Edit$1 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));
@@ -7662,16 +7776,30 @@ class Edit$1 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 ///////
 	///////////////////////////////////
@@ -7679,7 +7807,7 @@ class Edit$1 extends Module{
 	keybindingNavigateNext(e){
 		var cell = this.currentCell,
 		newRow = this.options("tabEndNewRow");
-		
+
 		if(cell){
 			if(!this.navigateNext(cell, e)){
 				if(newRow){
@@ -8068,12 +8196,6 @@ class Edit$1 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();
@@ -8081,12 +8203,33 @@ class Edit$1 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);
+					}
+				});
+			}
 		}
 	}
 	
@@ -8233,7 +8376,6 @@ class Edit$1 extends Module{
 			allowEdit = this.allowEdit(cell);
 			
 			if(allowEdit || forceEdit){
-				
 				self.cancelEdit();
 				
 				self.currentCell = cell;
@@ -8283,27 +8425,33 @@ class Edit$1 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 = [];
 		
@@ -8387,10 +8535,20 @@ class Export extends Module{
 		this.cloneTableStyle = style;
 		this.config = config || {};
 		this.colVisProp = colVisProp;
+
+		var headers, body;
 		
-		var headers = this.config.columnHeaders !== false ? this.headersToExportRows(this.generateColumnGroupHeaders()) : [];
-		var body = this.bodyToExportRows(this.rowLookup(range));
-		
+		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);
 	}
 	
@@ -8425,7 +8583,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){
@@ -8439,10 +8601,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);
@@ -8451,7 +8615,7 @@ class Export extends Module{
 				output.push(colData);
 			}
 		});
-		
+
 		return output;
 	}
 	
@@ -8579,16 +8743,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){
@@ -8599,7 +8763,7 @@ class Export extends Module{
 				rows.push(this.table.modules.columnCalcs.botRow);
 			}
 		}
-		
+
 		rows = rows.filter((row) => {
 			switch(row.type){
 				case "group":
@@ -8826,7 +8990,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;
 				
@@ -8853,6 +9018,9 @@ class Export extends Module{
 					getRow:function(){
 						return row.component;
 					},
+					getTable:function(){
+						return table;
+					},
 					getComponent:function(){
 						return cellWrapper;
 					},
@@ -10511,8 +10679,12 @@ function buttonCross(cell, formatterParams, onRendered){
 function rownum(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;
 	});
 	
@@ -10589,7 +10761,7 @@ function rowSelection(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 {
@@ -10600,7 +10772,7 @@ function rowSelection(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);
@@ -10893,7 +11065,9 @@ 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("table-redraw", this.layout.bind(this));
 		this.subscribe("layout-refreshing", this.blockLayout.bind(this));
@@ -10919,16 +11093,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"){
@@ -11019,9 +11193,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);
 			}
@@ -11069,7 +11242,6 @@ class FrozenColumns extends Module{
 	//layout columns appropriately
 	layout(){	
 		if(this.active && !this.blocked){
-		
 			//calculate left columns
 			this.layoutColumnPosition();
 			
@@ -11132,9 +11304,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");
 		}
 	}
 
@@ -11178,12 +11349,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));
@@ -12649,6 +12825,8 @@ var defaultUndoers = {
 
 	rowAdd: function(action){
 		action.component.deleteActual();
+
+		this.table.rowManager.checkPlaceholder();
 	},
 
 	rowDelete: function(action){
@@ -12659,6 +12837,8 @@ var defaultUndoers = {
 		}
 
 		this._rebindRow(action.component, newRow);
+
+		this.table.rowManager.checkPlaceholder();
 	},
 
 	rowMove: function(action){
@@ -12685,10 +12865,14 @@ var defaultRedoers = {
 		}
 
 		this._rebindRow(action.component, newRow);
+
+		this.table.rowManager.checkPlaceholder();
 	},
 
 	rowDelete:function(action){
 		action.component.deleteActual();
+
+		this.table.rowManager.checkPlaceholder();
 	},
 
 	rowMove: function(action){
@@ -12813,7 +12997,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;
 		}
 	}
@@ -12831,7 +13015,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;
 		}
 	}
@@ -13648,6 +13832,8 @@ var defaultBindings = {
 	navNext:9,
 	navUp:38,
 	navDown:40,
+	navLeft:37,
+	navRight:39,
 	scrollPageUp:33,
 	scrollPageDown:34,
 	scrollToStart:36,
@@ -13655,6 +13841,19 @@ var defaultBindings = {
 	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"],
 };
 
 var defaultActions = {
@@ -13742,6 +13941,43 @@ var defaultActions = {
 		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")){
@@ -14020,7 +14256,7 @@ class Menu extends Module{
 			this.subscribe("group-dblclick", this.loadMenuEvent.bind(this, this.table.options.groupDblClickMenu));
 		}
 	}
-	
+
 	initializeColumn(column){
 		var	def = column.definition;
 		
@@ -14229,6 +14465,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;
 				}
@@ -14236,6 +14473,7 @@ class Menu extends Module{
 			
 			this.currentComponent = component;
 			
+			this.dispatch("menu-opened", menu, popup);
 			this.dispatchExternal("menuOpened", component.getComponent());
 		}
 	}
@@ -14279,8 +14517,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,
@@ -16866,7 +17109,7 @@ class Popup$1 extends Module{
 			this.subscribe("group-dblclick", this.loadPopupEvent.bind(this, this.table.options.groupDblClickPopup));
 		}
 	}
-	
+
 	initializeColumn(column){
 		var def = column.definition;
 		
@@ -18023,7 +18266,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);
@@ -18049,7 +18292,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);
@@ -18072,7 +18315,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();
 					}
@@ -18491,11 +18734,11 @@ class SelectRow extends Module{
 		this.selectedRows = []; //hold selected rows
 		this.headerCheckboxElement = null; // hold header select element
 		
-		this.registerTableOption("selectable", "highlight"); //highlight rows on hover
-		this.registerTableOption("selectableRangeMode", "drag");  //highlight rows on hover
-		this.registerTableOption("selectableRollingSelection", true); //roll selection once maximum number of selectable rows is reached
-		this.registerTableOption("selectablePersistence", true); // maintain selection when table view is updated
-		this.registerTableOption("selectableCheck", function(data, row){return true;}); //check whether row is selectable
+		this.registerTableOption("selectableRows", "highlight"); //highlight rows on hover
+		this.registerTableOption("selectableRowsRangeMode", "drag");  //highlight rows on hover
+		this.registerTableOption("selectableRowsRollingSelection", true); //roll selection once maximum number of selectable rows is reached
+		this.registerTableOption("selectableRowsPersistence", true); // maintain selection when table view is updated
+		this.registerTableOption("selectableRowsCheck", function(data, row){return true;}); //check whether row is selectable
 		
 		this.registerTableFunction("selectRow", this.selectRows.bind(this));
 		this.registerTableFunction("deselectRow", this.deselectRows.bind(this));
@@ -18511,17 +18754,32 @@ class SelectRow extends Module{
 	}
 	
 	initialize(){
-		if(this.table.options.selectable !== false){
+
+		this.deprecatedOptionsCheck();
+
+		if(this.table.options.selectableRows === "highlight" && this.table.options.selectableRange){
+			this.table.options.selectableRows = false;
+		}
+
+		if(this.table.options.selectableRows !== false){
 			this.subscribe("row-init", this.initializeRow.bind(this));
 			this.subscribe("row-deleting", this.rowDeleted.bind(this));
 			this.subscribe("rows-wipe", this.clearSelectionData.bind(this));
 			this.subscribe("rows-retrieve", this.rowRetrieve.bind(this));
 			
-			if(this.table.options.selectable && !this.table.options.selectablePersistence){
+			if(this.table.options.selectableRows && !this.table.options.selectableRowsPersistence){
 				this.subscribe("data-refreshing", this.deselectRows.bind(this));
 			}
 		}
 	}
+
+	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);
+	}
 	
 	rowRetrieve(type, prevValue){
 		return type === "selected" ? this.selectedRows : prevValue;
@@ -18546,6 +18804,7 @@ class SelectRow extends Module{
 	
 	initializeRow(row){
 		var self = this,
+		selectable = self.checkRowSelectability(row),
 		element = row.getElement();
 		
 		// trigger end of row selection
@@ -18559,14 +18818,14 @@ class SelectRow extends Module{
 		};
 		
 		row.modules.select = {selected:false};
+
+		element.classList.toggle("tabulator-selectable", selectable);
+		element.classList.toggle("tabulator-unselectable", !selectable);
 		
 		//set row selection class
-		if(self.checkRowSelectability(row)){
-			element.classList.add("tabulator-selectable");
-			element.classList.remove("tabulator-unselectable");
-			
-			if(self.table.options.selectable && self.table.options.selectable != "highlight"){
-				if(self.table.options.selectableRangeMode === "click"){
+		if(self.checkRowSelectability(row)){			
+			if(self.table.options.selectableRows && self.table.options.selectableRows != "highlight"){
+				if(self.table.options.selectableRowsRangeMode === "click"){
 					element.addEventListener("click", this.handleComplexRowClick.bind(this, row));
 				}else {
 					element.addEventListener("click", function(e){
@@ -18615,10 +18874,6 @@ class SelectRow extends Module{
 					});
 				}
 			}
-			
-		}else {
-			element.classList.add("tabulator-unselectable");
-			element.classList.remove("tabulator-selectable");
 		}
 	}
 	
@@ -18640,8 +18895,8 @@ class SelectRow extends Module{
 				toggledRows.forEach((toggledRow)=>{
 					if(toggledRow !== this.lastClickedRow){
 						
-						if(this.table.options.selectable !== true && !this.isRowSelected(row)){
-							if(this.selectedRows.length < this.table.options.selectable){
+						if(this.table.options.selectableRows !== true && !this.isRowSelected(row)){
+							if(this.selectedRows.length < this.table.options.selectableRows){
 								this.toggleRow(toggledRow);
 							}
 						}else {
@@ -18653,9 +18908,9 @@ class SelectRow extends Module{
 			}else {
 				this.deselectRows(undefined, true);
 				
-				if(this.table.options.selectable !== true){
-					if(toggledRows.length > this.table.options.selectable){
-						toggledRows = toggledRows.slice(0, this.table.options.selectable);
+				if(this.table.options.selectableRows !== true){
+					if(toggledRows.length > this.table.options.selectableRows){
+						toggledRows = toggledRows.slice(0, this.table.options.selectableRows);
 					}
 				}
 				
@@ -18675,7 +18930,7 @@ class SelectRow extends Module{
 
 	checkRowSelectability(row){
 		if(row && row.type === "row"){
-			return this.table.options.selectableCheck.call(this.table, row.getComponent());
+			return this.table.options.selectableRowsCheck.call(this.table, row.getComponent());
 		}
 
 		return false;
@@ -18702,6 +18957,10 @@ class SelectRow extends Module{
 				rowMatch = this.table.rowManager.rows;
 				break;
 			
+			case "number":
+				rowMatch = this.table.rowManager.findRow(rows);
+				break;
+				
 			case "string":
 				rowMatch = this.table.rowManager.findRow(rows);
 			
@@ -18737,9 +18996,9 @@ class SelectRow extends Module{
 	//select an individual row
 	_selectRow(rowInfo, silent, force){
 		//handle max row count
-		if(!isNaN(this.table.options.selectable) && this.table.options.selectable !== true && !force){
-			if(this.selectedRows.length >= this.table.options.selectable){
-				if(this.table.options.selectableRollingSelection){
+		if(!isNaN(this.table.options.selectableRows) && this.table.options.selectableRows !== true && !force){
+			if(this.selectedRows.length >= this.table.options.selectableRows){
+				if(this.table.options.selectableRowsRollingSelection){
 					this._deselectRow(this.selectedRows[0]);
 				}else {
 					return false;
@@ -18793,6 +19052,10 @@ class SelectRow extends Module{
 			case "undefined":
 				rowMatch = Object.assign([], this.selectedRows);
 				break;
+
+			case "number":
+				rowMatch = this.table.rowManager.findRow(rows);
+				break;
 			
 			case "string":
 				rowMatch = this.table.rowManager.findRow(rows);
@@ -19220,90 +19483,90 @@ var defaultSorters = {
 };
 
 class Sort extends Module{
-
+	
 	constructor(table){
 		super(table);
-
+		
 		this.sortList = []; //holder current sort
 		this.changed = false; //has the sort changed since last render
-
+		
 		this.registerTableOption("sortMode", "local"); //local or remote sorting
-
+		
 		this.registerTableOption("initialSort", false); //initial sorting criteria
 		this.registerTableOption("columnHeaderSortMulti", true); //multiple or single column sorting
 		this.registerTableOption("sortOrderReverse", false); //reverse internal sort ordering
 		this.registerTableOption("headerSortElement", "<div class='tabulator-arrow'></div>"); //header sort element
 		this.registerTableOption("headerSortClickElement", "header"); //element which triggers sort when clicked
-
+		
 		this.registerColumnOption("sorter");
 		this.registerColumnOption("sorterParams");
-
+		
 		this.registerColumnOption("headerSort", true);
 		this.registerColumnOption("headerSortStartingDir");
 		this.registerColumnOption("headerSortTristate");
-
+		
 	}
-
+	
 	initialize(){
 		this.subscribe("column-layout", this.initializeColumn.bind(this));
 		this.subscribe("table-built", this.tableBuilt.bind(this));
 		this.registerDataHandler(this.sort.bind(this), 20);
-
+		
 		this.registerTableFunction("setSort", this.userSetSort.bind(this));
 		this.registerTableFunction("getSorters", this.getSort.bind(this));
 		this.registerTableFunction("clearSort", this.clearSort.bind(this));
-
+		
 		if(this.table.options.sortMode === "remote"){
 			this.subscribe("data-params", this.remoteSortParams.bind(this));
 		}
 	}
-
+	
 	tableBuilt(){
 		if(this.table.options.initialSort){
 			this.setSort(this.table.options.initialSort);
 		}
 	}
-
+	
 	remoteSortParams(data, config, silent, params){
 		var sorters = this.getSort();
-
+		
 		sorters.forEach((item) => {
 			delete item.column;
 		});
-
+		
 		params.sort = sorters;
-
+		
 		return params;
 	}
-
-
+	
+	
 	///////////////////////////////////
 	///////// Table Functions /////////
 	///////////////////////////////////
-
+	
 	userSetSort(sortList, dir){
 		this.setSort(sortList, dir);
 		// this.table.rowManager.sorterRefresh();
 		this.refreshSort();
 	}
-
+	
 	clearSort(){
 		this.clear();
 		// this.table.rowManager.sorterRefresh();
 		this.refreshSort();
 	}
-
-
+	
+	
 	///////////////////////////////////
 	///////// Internal Logic //////////
 	///////////////////////////////////
-
+	
 	//initialize column header for sorting
 	initializeColumn(column){
 		var sorter = false,
 		colEl,
 		arrowEl;
-
+		
 		switch(typeof column.definition.sorter){
 			case "string":
 				if(Sort.sorters[column.definition.sorter]){
@@ -19312,28 +19575,28 @@ class Sort extends Module{
 					console.warn("Sort Error - No such sorter found: ", column.definition.sorter);
 				}
 				break;
-
+			
 			case "function":
 				sorter = column.definition.sorter;
 				break;
 		}
-
+		
 		column.modules.sort = {
 			sorter:sorter, dir:"none",
 			params:column.definition.sorterParams || {},
 			startingDir:column.definition.headerSortStartingDir || "asc",
 			tristate: column.definition.headerSortTristate,
 		};
-
+		
 		if(column.definition.headerSort !== false){
-
+			
 			colEl = column.getElement();
-
+			
 			colEl.classList.add("tabulator-sortable");
-
+			
 			arrowEl = document.createElement("div");
 			arrowEl.classList.add("tabulator-col-sorter");
-
+			
 			switch(this.table.options.headerSortClickElement){
 				case "icon":
 					arrowEl.classList.add("tabulator-col-sorter-element");
@@ -19345,33 +19608,39 @@ class Sort extends Module{
 					colEl.classList.add("tabulator-col-sorter-element");
 					break;
 			}
-
+			
 			switch(this.table.options.headerSortElement){
 				case "function":
-					//do nothing
+				//do nothing
 					break;
-
+				
 				case "object":
 					arrowEl.appendChild(this.table.options.headerSortElement);
 					break;
-					
+				
 				default:
 					arrowEl.innerHTML = this.table.options.headerSortElement;
 			}
-
+			
 			//create sorter arrow
 			column.titleHolderElement.appendChild(arrowEl);
-
+			
 			column.modules.sort.element = arrowEl;
-
+			
 			this.setColumnHeaderSortIcon(column, "none");
-
+			
+			if(this.table.options.headerSortClickElement === "icon"){
+				arrowEl.addEventListener("mousedown", (e) => {
+					e.stopPropagation();
+				});
+			}
+			
 			//sort on click
 			(this.table.options.headerSortClickElement === "icon" ? arrowEl : colEl).addEventListener("click", (e) => {
 				var dir = "",
 				sorters=[],
 				match = false;
-
+				
 				if(column.modules.sort){
 					if(column.modules.sort.tristate){
 						if(column.modules.sort.dir == "none"){
@@ -19388,26 +19657,26 @@ class Sort extends Module{
 							case "asc":
 								dir = "desc";
 								break;
-
+							
 							case "desc":
 								dir = "asc";
 								break;
-
+							
 							default:
 								dir = column.modules.sort.startingDir;
 						}
 					}
-
+					
 					if (this.table.options.columnHeaderSortMulti && (e.shiftKey || e.ctrlKey)) {
 						sorters = this.getSort();
-
+						
 						match = sorters.findIndex((sorter) => {
 							return sorter.field === column.getField();
 						});
-
+						
 						if(match > -1){
 							sorters[match].dir = dir;
-
+							
 							match = sorters.splice(match, 1)[0];
 							if(dir != "none"){
 								sorters.push(match);
@@ -19417,7 +19686,7 @@ class Sort extends Module{
 								sorters.push({column:column, dir:dir});
 							}
 						}
-
+						
 						//add to existing sort
 						this.setSort(sorters);
 					}else {
@@ -19427,63 +19696,63 @@ class Sort extends Module{
 							//sort by column only
 							this.setSort(column, dir);
 						}
-
+						
 					}
-
+					
 					// this.table.rowManager.sorterRefresh(!this.sortList.length);
 					this.refreshSort();
 				}
 			});
 		}
 	}
-
+	
 	refreshSort(){
 		if(this.table.options.sortMode === "remote"){
 			this.reloadData(null, false, false);
 		}else {
 			this.refreshData(true);
 		}
-
+		
 		//TODO - Persist left position of row manager
 		// left = this.scrollLeft;
 		// this.scrollHorizontal(left);
 	}
-
+	
 	//check if the sorters have changed since last use
 	hasChanged(){
 		var changed = this.changed;
 		this.changed = false;
 		return changed;
 	}
-
+	
 	//return current sorters
 	getSort(){
 		var self = this,
 		sorters = [];
-
+		
 		self.sortList.forEach(function(item){
 			if(item.column){
 				sorters.push({column:item.column.getComponent(), field:item.column.getField(), dir:item.dir});
 			}
 		});
-
+		
 		return sorters;
 	}
-
+	
 	//change sort list and trigger sort
 	setSort(sortList, dir){
 		var self = this,
 		newSortList = [];
-
+		
 		if(!Array.isArray(sortList)){
 			sortList = [{column: sortList, dir:dir}];
 		}
-
+		
 		sortList.forEach(function(item){
 			var column;
-
+			
 			column = self.table.columnManager.findColumn(item.column);
-
+			
 			if(column){
 				item.column = column;
 				newSortList.push(item);
@@ -19491,42 +19760,42 @@ class Sort extends Module{
 			}else {
 				console.warn("Sort Warning - Sort field does not exist and is being ignored: ", item.column);
 			}
-
+			
 		});
-
+		
 		self.sortList = newSortList;
-
+		
 		this.dispatch("sort-changed");
 	}
-
+	
 	//clear sorters
 	clear(){
 		this.setSort([]);
 	}
-
+	
 	//find appropriate sorter for column
 	findSorter(column){
 		var row = this.table.rowManager.activeRows[0],
 		sorter = "string",
 		field, value;
-
+		
 		if(row){
 			row = row.getData();
 			field = column.getField();
-
+			
 			if(field){
-
+				
 				value = column.getFieldValue(row);
-
+				
 				switch(typeof value){
 					case "undefined":
 						sorter = "string";
 						break;
-
+					
 					case "boolean":
 						sorter = "boolean";
 						break;
-
+					
 					default:
 						if(!isNaN(value) && value !== ""){
 							sorter = "number";
@@ -19539,151 +19808,1433 @@ class Sort extends Module{
 				}
 			}
 		}
-
-		return Sort.sorters[sorter];
+		
+		return Sort.sorters[sorter];
+	}
+	
+	//work through sort list sorting data
+	sort(data){
+		var self = this,
+		sortList = this.table.options.sortOrderReverse ? self.sortList.slice().reverse() : self.sortList,
+		sortListActual = [],
+		rowComponents = [];
+		
+		if(this.subscribedExternal("dataSorting")){
+			this.dispatchExternal("dataSorting", self.getSort());
+		}
+		
+		self.clearColumnHeaders();
+		
+		if(this.table.options.sortMode !== "remote"){
+			
+			//build list of valid sorters and trigger column specific callbacks before sort begins
+			sortList.forEach(function(item, i){
+				var sortObj;
+				
+				if(item.column){
+					sortObj = item.column.modules.sort;
+					
+					if(sortObj){
+						
+						//if no sorter has been defined, take a guess
+						if(!sortObj.sorter){
+							sortObj.sorter = self.findSorter(item.column);
+						}
+						
+						item.params = typeof sortObj.params === "function" ? sortObj.params(item.column.getComponent(), item.dir) : sortObj.params;
+						
+						sortListActual.push(item);
+					}
+					
+					self.setColumnHeader(item.column, item.dir);
+				}
+			});
+			
+			//sort data
+			if (sortListActual.length) {
+				self._sortItems(data, sortListActual);
+			}
+			
+		}else {
+			sortList.forEach(function(item, i){
+				self.setColumnHeader(item.column, item.dir);
+			});
+		}
+		
+		if(this.subscribedExternal("dataSorted")){
+			data.forEach((row) => {
+				rowComponents.push(row.getComponent());
+			});
+			
+			this.dispatchExternal("dataSorted", self.getSort(), rowComponents);
+		}
+		
+		return data;
+	}
+	
+	//clear sort arrows on columns
+	clearColumnHeaders(){
+		this.table.columnManager.getRealColumns().forEach((column) => {
+			if(column.modules.sort){
+				column.modules.sort.dir = "none";
+				column.getElement().setAttribute("aria-sort", "none");
+				this.setColumnHeaderSortIcon(column, "none");
+			}
+		});
+	}
+	
+	//set the column header sort direction
+	setColumnHeader(column, dir){
+		column.modules.sort.dir = dir;
+		column.getElement().setAttribute("aria-sort", dir === "asc" ? "ascending" : "descending");
+		this.setColumnHeaderSortIcon(column, dir);
+	}
+	
+	setColumnHeaderSortIcon(column, dir){
+		var sortEl = column.modules.sort.element,
+		arrowEl;
+		
+		if(column.definition.headerSort && typeof this.table.options.headerSortElement === "function"){
+			while(sortEl.firstChild) sortEl.removeChild(sortEl.firstChild);
+			
+			arrowEl = this.table.options.headerSortElement.call(this.table, column.getComponent(), dir);
+			
+			if(typeof arrowEl === "object"){
+				sortEl.appendChild(arrowEl);
+			}else {
+				sortEl.innerHTML = arrowEl;
+			}
+		}
+	}
+	
+	//sort each item in sort list
+	_sortItems(data, sortList){
+		var sorterCount = sortList.length - 1;
+		
+		data.sort((a, b) => {
+			var result;
+			
+			for(var i = sorterCount; i>= 0; i--){
+				let sortItem = sortList[i];
+				
+				result = this._sortRow(a, b, sortItem.column, sortItem.dir, sortItem.params);
+				
+				if(result !== 0){
+					break;
+				}
+			}
+			
+			return result;
+		});
+	}
+	
+	//process individual rows for a sort function on active data
+	_sortRow(a, b, column, dir, params){
+		var el1Comp, el2Comp;
+		
+		//switch elements depending on search direction
+		var el1 = dir == "asc" ? a : b;
+		var el2 = dir == "asc" ? b : a;
+		
+		a = column.getFieldValue(el1.getData());
+		b = column.getFieldValue(el2.getData());
+		
+		a = typeof a !== "undefined" ? a : "";
+		b = typeof b !== "undefined" ? b : "";
+		
+		el1Comp = el1.getComponent();
+		el2Comp = el2.getComponent();
+		
+		return column.modules.sort.sorter.call(this, a, b, el1Comp, el2Comp, column.getComponent(), dir, params);
+	}
+}
+
+Sort.moduleName = "sort";
+
+//load defaults
+Sort.sorters = defaultSorters;
+
+class RangeComponent {
+	constructor(range) {
+		this._range = range;
+
+		return new Proxy(this, {
+			get: function (target, name, receiver) {
+				if (typeof target[name] !== "undefined") {
+					return target[name];
+				} else {
+					return target._range.table.componentFunctionBinder.handle("range", target._range, name);
+				}
+			},
+		});
+	}
+
+	getElement() {
+		return this._range.element;
+	}
+
+	getData() {
+		return this._range.getData();
+	}
+
+	getCells() {
+		return this._range.getCells(true);
+	}
+
+	getStructuredCells() {
+		return this._range.getStructuredCells();
+	}
+
+	getRows() {
+		return this._range.getRows().map((row) => row.getComponent());
+	}
+
+	getColumns() {
+		return this._range.getColumns().map((column) => column.getComponent());
+	}
+	
+	getBounds() {
+		return this._range.getBounds();
+	}
+
+	getTopEdge() {
+		return this._range.top;
+	}
+
+	getBottomEdge() {
+		return this._range.bottom;
+	}
+
+	getLeftEdge() {
+		return this._range.left;
+	}
+
+	getRightEdge() {
+		return this._range.right;
+	}
+
+	setBounds(start, end){
+		if(this._range.destroyedGuard("setBounds")){
+			this._range.setBounds(start ? start._cell : start, end ? end._cell : end);
+		}
+	}
+
+	setStartBound(start){
+		if(this._range.destroyedGuard("setStartBound")){
+			this._range.setEndBound(start ? start._cell : start);
+			this._range.rangeManager.layoutElement();
+		}
+	}
+
+	setEndBound(end){
+		if(this._range.destroyedGuard("setEndBound")){
+			this._range.setEndBound(end ? end._cell : end);
+			this._range.rangeManager.layoutElement();
+		}
+	}
+
+	clearValues(){
+		if(this._range.destroyedGuard("clearValues")){
+			this._range.clearValues();
+		}
+	}
+
+	remove(){
+		if(this._range.destroyedGuard("remove")){
+			this._range.destroy(true);
+		}
+	}
+}
+
+class Range extends CoreFeature{
+	constructor(table, rangeManager, start, end) {
+		super(table);
+		
+		this.rangeManager = rangeManager;
+		this.element = null;
+		this.initialized = false;
+		this.initializing = {
+			start:false,
+			end:false,
+		};
+		this.destroyed = false;
+		
+		this.top = 0;
+		this.bottom = 0;
+		this.left = 0;
+		this.right = 0;
+		
+		this.table = table;
+		this.start = {row:0, col:0};
+		this.end = {row:0, col:0};
+		
+		this.initElement();
+		
+		setTimeout(() => {
+			this.initBounds(start, end);
+		});
+	}
+	
+	initElement(){
+		this.element = document.createElement("div");
+		this.element.classList.add("tabulator-range");
+	}
+	
+	initBounds(start, end){
+		this._updateMinMax();
+		
+		if(start){
+			this.setBounds(start, end || start);
+		}
+	}
+	
+	///////////////////////////////////
+	///////   Boundary Setup    ///////
+	///////////////////////////////////
+	
+	setStart(row, col) {
+		if(this.start.row !== row || this.start.col !== col){
+			this.start.row = row;
+			this.start.col = col;
+			
+			this.initializing.start = true;
+			this._updateMinMax();
+		}
+	}
+	
+	setEnd(row, col) {
+		if(this.end.row !== row || this.end.col !== col){
+			this.end.row = row;
+			this.end.col = col;
+			
+			this.initializing.end = true;
+			this._updateMinMax();
+		}
+	}
+	
+	setBounds(start, end, visibleRows){
+		if(start){
+			this.setStartBound(start);
+		}
+		
+		this.setEndBound(end || start);
+		this.rangeManager.layoutElement(visibleRows);
+	}
+	
+	setStartBound(element){
+		var row, col;
+		
+		if (element.type === "column") {
+			if(this.rangeManager.columnSelection){
+				this.setStart(0, element.getPosition() - 2);
+			}
+		}else {
+			row = element.row.position - 1;
+			col = element.column.getPosition() - 2;
+			
+			if (element.column === this.rangeManager.rowHeader) {
+				this.setStart(row, 0);
+			} else {
+				this.setStart(row, col);
+			}
+		}
+	}
+	
+	setEndBound(element){
+		var rowsCount = this._getTableRows().length,
+		row, col, isRowHeader;
+		
+		if (element.type === "column") {
+			if(this.rangeManager.columnSelection){
+				if (this.rangeManager.selecting === "column") {
+					this.setEnd(rowsCount - 1, element.getPosition() - 2);
+				} else if (this.rangeManager.selecting === "cell") {
+					this.setEnd(0, element.getPosition() - 2);
+				}
+			}
+		}else {
+			row = element.row.position - 1;
+			col = element.column.getPosition() - 2;
+			isRowHeader = element.column === this.rangeManager.rowHeader;
+			
+			if (this.rangeManager.selecting === "row") {
+				this.setEnd(row, this._getTableColumns().length - 2);
+			} else if (this.rangeManager.selecting !== "row" && isRowHeader) {
+				this.setEnd(row, 0);
+			} else if (this.rangeManager.selecting === "column") {
+				this.setEnd(rowsCount - 1, col);
+			} else {
+				this.setEnd(row, col);
+			}
+		}
+	}
+	
+	_updateMinMax() {
+		this.top = Math.min(this.start.row, this.end.row);
+		this.bottom = Math.max(this.start.row, this.end.row);
+		this.left = Math.min(this.start.col, this.end.col);
+		this.right = Math.max(this.start.col, this.end.col);
+		
+		if(this.initialized){
+			this.dispatchExternal("rangeChanged", this.getComponent());
+		}else {
+			if(this.initializing.start && this.initializing.end){
+				this.initialized = true;
+				this.dispatchExternal("rangeAdded", this.getComponent());
+			}
+		}
+	}
+	
+	_getTableColumns() {
+		return this.table.columnManager.getVisibleColumnsByIndex();
+	}
+	
+	_getTableRows() {
+		return this.table.rowManager.getDisplayRows();
+	}
+	
+	///////////////////////////////////
+	///////      Rendering      ///////
+	///////////////////////////////////
+	
+	layout() {
+		var _vDomTop = this.table.rowManager.renderer.vDomTop,
+		_vDomBottom = this.table.rowManager.renderer.vDomBottom,
+		_vDomLeft = this.table.columnManager.renderer.leftCol,
+		_vDomRight = this.table.columnManager.renderer.rightCol,		
+		top, bottom, left, right, topLeftCell, bottomRightCell;
+		
+		if (_vDomTop == null) {
+			_vDomTop = 0;
+		}
+		
+		if (_vDomBottom == null) {
+			_vDomBottom = Infinity;
+		}
+		
+		if (_vDomLeft == null) {
+			_vDomLeft = 0;
+		}
+		
+		if (_vDomRight == null) {
+			_vDomRight = Infinity;
+		}
+		
+		if (this.overlaps(_vDomLeft, _vDomTop, _vDomRight, _vDomBottom)) {
+			top = Math.max(this.top, _vDomTop);
+			bottom = Math.min(this.bottom, _vDomBottom);
+			left = Math.max(this.left, _vDomLeft);
+			right = Math.min(this.right, _vDomRight);
+			
+			topLeftCell = this.rangeManager.getCell(top, left);
+			bottomRightCell = this.rangeManager.getCell(bottom, right);
+			
+			this.element.classList.add("tabulator-range-active");
+			// this.element.classList.toggle("tabulator-range-active", this === this.rangeManager.activeRange);
+			
+			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";
+		}
+	}
+	
+	atTopLeft(cell) {
+		return cell.row.position - 1 === this.top && cell.column.getPosition() - 2 === this.left;
+	}
+	
+	atBottomRight(cell) {
+		return cell.row.position - 1 === this.bottom && cell.column.getPosition() - 2 === this.right;
+	}
+	
+	occupies(cell) {
+		return this.occupiesRow(cell.row) && this.occupiesColumn(cell.column);
+	}
+	
+	occupiesRow(row) {
+		return this.top <= row.position - 1 && row.position - 1 <= this.bottom;
+	}
+	
+	occupiesColumn(col) {
+		return this.left <= col.getPosition() - 2 && col.getPosition() - 2 <= this.right;
+	}
+	
+	overlaps(left, top, right, bottom) {
+		if ((this.left > right || left > this.right) || (this.top > bottom || top > this.bottom)){
+			return false;
+		}
+		
+		return true;
+	}
+	
+	getData() {
+		var data = [],
+		rows = this.getRows(),
+		columns = this.getColumns();
+		
+		rows.forEach((row) => {
+			var rowData = row.getData(),
+			result = {};
+			
+			columns.forEach((column) => {
+				result[column.field] = rowData[column.field];
+			});
+			
+			data.push(result);
+		});
+		
+		return data;
+	}
+	
+	getCells(structured, component) {
+		var cells = [],
+		rows = this.getRows(),
+		columns = this.getColumns();
+		
+		if (structured) {
+			cells = rows.map((row) => {
+				var arr = [];
+				
+				row.getCells().forEach((cell) => {
+					if (columns.includes(cell.column)) {
+						arr.push(component ? cell.getComponent() : cell);
+					}
+				});
+				
+				return arr;
+			});
+		} else {
+			rows.forEach((row) => {
+				row.getCells().forEach((cell) => {
+					if (columns.includes(cell.column)) {
+						cells.push(component ? cell.getComponent() : cell);
+					}
+				});
+			});
+		}
+		
+		return cells;
+	}
+	
+	getStructuredCells() {
+		return this.getCells(true, true);
+	}
+	
+	getRows() {
+		return this._getTableRows().slice(this.top, this.bottom + 1);
+	}
+	
+	getColumns() {
+		return this._getTableColumns().slice(this.left + 1, this.right + 2);
+	}
+	
+	clearValues(){
+		var cells = this.getCells();
+		var clearValue = this.table.options.selectableRangeClearCellsValue;
+		
+		this.table.blockRedraw();
+		
+		cells.forEach((cell) => {
+			cell.setValue(clearValue);
+		});
+		
+		this.table.restoreRedraw();
+		
+	}
+	
+	getBounds(component){
+		var cells = this.getCells(false, component),
+		output = {
+			start:null,
+			end:null,
+		};
+		
+		if(cells.length){
+			output.start = cells[0];
+			output.end = cells[cells.length - 1];
+		}else {
+			console.warn("No bounds defined on range");
+		}
+		
+		return output;
+	}
+	
+	getComponent() {
+		if (!this.component) {
+			this.component = new RangeComponent(this);
+		}
+		return this.component;
+	}
+	
+	destroy(notify) {
+		this.destroyed = true;
+		
+		this.element.remove();
+		
+		if(notify){
+			this.rangeManager.rangeRemoved(this);
+		}
+		
+		if(this.initialized){
+			this.dispatchExternal("rangeRemoved", this.getComponent());
+		}
+	}
+	
+	destroyedGuard(func){
+		if(this.destroyed){
+			console.warn("You cannot call the "  + func + " function on a destroyed range");
+		}
+		
+		return !this.destroyed;
+	}
+}
+
+class SelectRange extends Module {
+	constructor(table) {
+		super(table);
+		
+		this.selecting = "cell";
+		this.mousedown = false;
+		this.ranges = [];
+		this.overlay = null;
+		this.rowHeader = null;
+		this.layoutChangeTimeout = null;
+		this.columnSelection = false;
+		this.rowSelection = false;
+		this.maxRanges = 0;
+		this.activeRange = false;
+		this.blockKeydown = false;
+		
+		this.keyDownEvent = this._handleKeyDown.bind(this);
+		this.mouseUpEvent = this._handleMouseUp.bind(this);
+		
+		this.registerTableOption("selectableRange", false); //enable selectable range
+		this.registerTableOption("selectableRangeColumns", false); //enable selectable range
+		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));
+	}
+	
+	///////////////////////////////////
+	///////    Initialization   ///////
+	///////////////////////////////////
+	
+	initialize() {
+		if (this.options("selectableRange")) {		
+			if(!this.options("selectableRows")){
+				
+				this.maxRanges = this.options("selectableRange");
+				
+				this.initializeTable();
+				this.initializeWatchers();
+			}else {
+				console.warn("SelectRange functionality cannot be used in conjunction with row selection");
+			}
+		}
+	}
+	
+	
+	initializeTable() {		
+		this.overlay = document.createElement("div");
+		this.overlay.classList.add("tabulator-range-overlay");
+		
+		this.rangeContainer = document.createElement("div");
+		this.rangeContainer.classList.add("tabulator-range-container");
+		
+		this.activeRangeCellElement = document.createElement("div");
+		this.activeRangeCellElement.classList.add("tabulator-range-cell-active");
+		
+		this.overlay.appendChild(this.rangeContainer);
+		this.overlay.appendChild(this.activeRangeCellElement);
+		
+		this.table.rowManager.element.addEventListener("keydown", this.keyDownEvent);
+		
+		this.resetRanges();
+		
+		this.table.rowManager.element.appendChild(this.overlay);
+		this.table.columnManager.element.setAttribute("tabindex", 0);
+		this.table.element.classList.add("tabulator-ranges");
+	}
+	
+	initializeWatchers() {
+		this.columnSelection = this.options("selectableRangeColumns");
+		this.rowSelection = this.options("selectableRangeRows");
+		
+		this.subscribe("column-init", this.initializeColumn.bind(this));
+		this.subscribe("column-mousedown", this.handleColumnMouseDown.bind(this));
+		this.subscribe("column-mousemove", this.handleColumnMouseMove.bind(this));
+		this.subscribe("column-resized", this.handleColumnResized.bind(this));
+		this.subscribe("column-width", this.layoutChange.bind(this));
+		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));
+		this.subscribe("cell-mousemove", this.handleCellMouseMove.bind(this));
+		this.subscribe("cell-click", this.handleCellClick.bind(this));
+		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));
+		
+		this.subscribe("data-destroy", this.tableDestroyed.bind(this));
+		this.subscribe("data-processed", this.resetRanges.bind(this));
+		
+		this.subscribe("table-layout", this.layoutElement.bind(this));
+		this.subscribe("table-redraw", this.redraw.bind(this));
+		this.subscribe("table-destroy", this.tableDestroyed.bind(this));
+		
+		this.subscribe("edit-editor-clear", this.finishEditingCell.bind(this));
+		this.subscribe("edit-blur", this.restoreFocus.bind(this));
+		
+		this.subscribe("keybinding-nav-prev", this.keyNavigate.bind(this, "left"));
+		this.subscribe("keybinding-nav-next", this.keyNavigate.bind(this, "right"));
+		this.subscribe("keybinding-nav-left", this.keyNavigate.bind(this, "left"));
+		this.subscribe("keybinding-nav-right", this.keyNavigate.bind(this, "right"));
+		this.subscribe("keybinding-nav-up", this.keyNavigate.bind(this, "up"));
+		this.subscribe("keybinding-nav-down", this.keyNavigate.bind(this, "down"));
+		this.subscribe("keybinding-nav-range", this.keyNavigateRange.bind(this));
+	}
+	
+	
+	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");
+		}
+		
+		if (column.modules.edit) ;
+	}
+	
+	updateHeaderColumn(){
+		if(this.rowSelection){
+			this.rowHeader = this.table.columnManager.getVisibleColumnsByIndex()[0];
+			
+			if(this.rowHeader){
+				this.rowHeader.definition.cssClass = this.rowHeader.definition.cssClass + " tabulator-range-row-header";
+				
+				if(this.rowHeader.definition.headerSort){
+					console.warn("Using column headerSort with selectableRangeRows option may result in unpredictable behavior");
+				}
+				
+				if(this.rowHeader.definition.editor){
+					console.warn("Using column editor with selectableRangeRows option may result in unpredictable behavior");
+				}
+			}
+		}
+	}
+	
+	///////////////////////////////////
+	///////   Table Functions   ///////
+	///////////////////////////////////
+	
+	getRanges(){
+		return this.ranges.map((range) => range.getComponent());
+	}
+	
+	getRangesData() {
+		return this.ranges.map((range) => range.getData());
+	}
+	
+	addRangeFromComponent(start, end){
+		start = start ? start._cell : null;
+		end = end ? end._cell : null;
+		
+		return this.addRange(start, end);
+	}
+	
+	///////////////////////////////////
+	/////// Component Functions ///////
+	///////////////////////////////////
+	
+	cellGetRanges(cell){
+		var ranges = [];
+		
+		if (cell.column === this.rowHeader) {
+			ranges = this.ranges.filter((range) => range.occupiesRow(cell.row));
+		} else {
+			ranges = this.ranges.filter((range) => range.occupies(cell));
+		}
+		
+		return ranges.map((range) => range.getComponent());
+	}
+	
+	rowGetRanges(row){
+		var ranges = this.ranges.filter((range) => range.occupiesRow(row));
+		
+		return ranges.map((range) => range.getComponent());
+	}
+	
+	colGetRanges(col){
+		var ranges = this.ranges.filter((range) => range.occupiesColumn(col));
+		
+		return ranges.map((range) => range.getComponent());
+	}
+	
+	///////////////////////////////////
+	////////// Event Handlers /////////
+	///////////////////////////////////
+	
+	_handleMouseUp(e){
+		this.mousedown = false;
+		document.removeEventListener("mouseup", this.mouseUpEvent);
+	}
+	
+	_handleKeyDown(e) {
+		if (!this.blockKeydown && (!this.table.modules.edit || (this.table.modules.edit && !this.table.modules.edit.currentCell))) {
+			if (e.key === "Enter") {
+				// is editing a cell?
+				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();
+				}
+			}
+		}
+	}
+	
+	initializeFocus(cell){
+		var range;
+		
+		try{
+			if (document.selection) { // IE
+				range = document.body.createTextRange();
+				range.moveToElementText(cell.getElement());
+				range.select();
+			} else if (window.getSelection) {
+				range = document.createRange();
+				range.selectNode(cell.getElement());
+				window.getSelection().removeAllRanges();
+				window.getSelection().addRange(range);
+			}
+		}catch(e){}
+	}
+	
+	restoreFocus(element){
+		this.table.rowManager.element.focus();
+		
+		return true;
+	}
+	
+	///////////////////////////////////
+	////// Column Functionality ///////
+	///////////////////////////////////
+	
+	handleColumnResized(column) {
+		var selected;
+		
+		if (this.selecting !== "column" && this.selecting !== "all") {
+			return;
+		}
+		
+		selected = this.ranges.some((range) => range.occupiesColumn(column));
+		
+		if (!selected) {
+			return;
+		}
+		
+		this.ranges.forEach((range) => {
+			var selectedColumns = range.getColumns(true);
+			
+			selectedColumns.forEach((selectedColumn) => {
+				if (selectedColumn !== column) {
+					selectedColumn.setWidth(column.width);
+				}
+			});
+		});
+	}
+	
+	handleColumnMouseDown(event, column) {
+		if (event.button === 2 && (this.selecting === "column" || this.selecting === "all") && this.activeRange.occupiesColumn(column)) {
+			return;
+		}
+		
+		this.mousedown = true;
+		
+		document.addEventListener("mouseup", this.mouseUpEvent);
+		
+		this.newSelection(event, column);
+	}
+	
+	handleColumnMouseMove(e, column) {
+		if (column === this.rowHeader || !this.mousedown || this.selecting === 'all') {
+			return;
+		}
+		
+		this.activeRange.setBounds(false, column, true);
+	}
+	
+	///////////////////////////////////
+	//////// Cell Functionality ///////
+	///////////////////////////////////
+	
+	renderCell(cell) {
+		var el = cell.getElement(),
+		rangeIdx = this.ranges.findIndex((range) => range.occupies(cell));
+		
+		el.classList.toggle("tabulator-range-selected", rangeIdx !== -1);
+		el.classList.toggle("tabulator-range-only-cell-selected", this.ranges.length === 1 && this.ranges[0].atTopLeft(cell) &&	this.ranges[0].atBottomRight(cell));
+		
+		el.dataset.range = rangeIdx;
+	}
+	
+	handleCellMouseDown(event, cell) {
+		if (event.button === 2 && (this.activeRange.occupies(cell) || ((this.selecting === "row" || this.selecting === "all") && this.activeRange.occupiesRow(cell.row)))) {
+			return;
+		}
+		
+		this.mousedown = true;
+		
+		document.addEventListener("mouseup", this.mouseUpEvent);
+		
+		this.newSelection(event, cell);
+	}
+	
+	handleCellMouseMove(e, cell) {
+		if (!this.mousedown || this.selecting === "all") {
+			return;
+		}
+		
+		this.activeRange.setBounds(false, cell, true);
+	}
+	
+	handleCellClick(e, cell){
+		this.initializeFocus(cell);
+	}
+	
+	handleEditingCell(cell) {
+		if(this.activeRange){
+			this.activeRange.setBounds(cell);
+		}
+	}
+	
+	finishEditingCell() {
+		this.blockKeydown = true;
+		this.table.rowManager.element.focus();
+
+		setTimeout(() => {
+			this.blockKeydown = false;
+		}, 10);
+	}
+	
+	///////////////////////////////////
+	///////     Navigation      ///////
+	///////////////////////////////////
+	
+	keyNavigate(dir, e){
+		if(this.navigate(false, false, dir)){
+			e.preventDefault();
+		}
+	}
+	
+	keyNavigateRange(e, dir, jump, expand){
+		if(this.navigate(jump, expand, dir)){
+			e.preventDefault();
+		}
+	}
+	
+	navigate(jump, expand, dir) {
+		var moved = false,
+		range, rangeEdge, nextRow, nextCol, row, column;
+		
+		// Don't navigate while editing
+		if (this.table.modules.edit && this.table.modules.edit.currentCell) {
+			return false;
+		}
+		
+		// If there are more than 1 range, use the active range and destroy the others
+		if (this.ranges.length > 1) {
+			this.ranges = this.ranges.filter((range) => {
+				if (range === this.activeRange) {
+					range.setEnd(range.start.row, range.start.col);
+					return true;
+				}
+				range.destroy();
+				return false;
+			});
+		}
+		
+		range = this.activeRange;
+		
+		rangeEdge = expand ? range.end : range.start;
+		nextRow = rangeEdge.row;
+		nextCol = rangeEdge.col;
+		
+		if(jump){
+			switch(dir){
+				case "left":
+					nextCol = this.findJumpCellLeft(range.start.row, rangeEdge.col);
+					break;
+				case "right":
+					nextCol = this.findJumpCellRight(range.start.row, rangeEdge.col);
+					break;
+				case "up":
+					nextRow = this.findJumpCellUp(rangeEdge.row, range.start.col);
+					break;
+				case "down":
+					nextRow = this.findJumpCellDown(rangeEdge.row, range.start.col);
+					break;
+			}
+		}else {
+			if(expand){
+				if ((this.selecting === 'row' && (dir === 'left' || dir === 'right')) || (this.selecting === 'column' && (dir === 'up' || dir === 'down'))) {
+					return;
+				}
+			}
+			
+			switch(dir){
+				case "left":
+					nextCol = Math.max(nextCol - 1, 0);
+					break;
+				case "right":
+					nextCol = Math.min(nextCol + 1, this.getTableColumns().length - 2);
+					break;
+				case "up":
+					nextRow = Math.max(nextRow - 1, 0);
+					break;
+				case "down":
+					nextRow = Math.min(nextRow + 1, this.getTableRows().length - 1);
+					break;
+			}
+		}
+		
+		moved = nextCol !== rangeEdge.col || nextRow !== rangeEdge.row;
+		
+		if(!expand){
+			range.setStart(nextRow, nextCol);
+		}
+		
+		range.setEnd(nextRow, nextCol);
+		
+		if(!expand){
+			this.selecting = "cell";
+		}
+		
+		if (moved) {
+			row = this.getRowByRangePos(range.end.row);
+			column = this.getColumnByRangePos(range.end.col);
+			
+			if ((dir === 'left' || dir === 'right') && column.getElement().parentNode === null) {
+				column.getComponent().scrollTo(undefined, false);
+			} else if ((dir === 'up' || dir === 'down') && row.getElement().parentNode === null) {
+				row.getComponent().scrollTo(undefined, false);
+			} else {
+				// Use faster autoScroll when the elements are on the DOM
+				this.autoScroll(range, row.getElement(), column.getElement());
+			}
+			
+			this.layoutElement();
+			
+			return true;
+		}
+	}
+	
+	rangeRemoved(removed){
+		this.ranges = this.ranges.filter((range) => range !== removed);
+		
+		if(this.activeRange === removed){
+			if(this.ranges.length){
+				this.activeRange = this.ranges[this.ranges.length - 1];
+			}else {
+				this.addRange();
+			}
+		}
+		
+		this.layoutElement();
+	}
+	
+	findJumpCell(cells, reverse, emptyStart, emptySide){
+		var nextCell;
+		
+		if(reverse){
+			cells = cells.reverse();
+		}
+		
+		for(let currentCell of cells){
+			let currentValue = currentCell.getValue();
+			
+			if(emptyStart){
+				nextCell = currentCell;
+				if(currentValue){
+					break;
+				}
+			}else {
+				if(emptySide){
+					nextCell = currentCell;
+					
+					if(currentValue){
+						break;
+					}
+				}else {
+					if(currentValue){
+						nextCell = currentCell;
+					}else {
+						break;
+					}
+				}
+			}
+		}
+		
+		return nextCell;
+	}
+	
+	findJumpCellLeft(rowPos, colPos){
+		var row = this.getRowByRangePos(rowPos),
+		cells = row.cells.filter((cell) => cell.column.visible),
+		isStartingCellEmpty = !cells[colPos + 1].getValue(),
+		isLeftOfStartingCellEmpty = cells[colPos] ? !cells[colPos].getValue() : false,
+		jumpCol = colPos,
+		nextCell = this.findJumpCell(cells.slice(0, colPos), true, isStartingCellEmpty, isLeftOfStartingCellEmpty);
+		
+		if(nextCell){
+			jumpCol = nextCell.column.getPosition() - 2;
+		}
+		
+		return jumpCol;
+	}
+	
+	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,
+		jumpCol = colPos,
+		nextCell = this.findJumpCell(cells.slice(colPos + 2, cells.length), false, isStartingCellEmpty, isRightOfStartingCellEmpty);
+		
+		if(nextCell){
+			jumpCol = nextCell.column.getPosition() - 2;
+		}
+		
+		return jumpCol;
+	}
+	
+	findJumpCellUp(rowPos, colPos) {
+		var column = this.getColumnByRangePos(colPos),
+		cells = column.cells.filter((cell) => this.table.rowManager.activeRows.includes(cell.row)),
+		isStartingCellEmpty = !cells[rowPos].getValue(),
+		isTopOfStartingCellEmpty = cells[rowPos - 1] ? !cells[rowPos - 1].getValue() : false,
+		jumpRow = rowPos,
+		nextCell = this.findJumpCell(cells.slice(0, jumpRow), true, isStartingCellEmpty, isTopOfStartingCellEmpty);
+		
+		if(nextCell){
+			jumpRow = nextCell.row.position - 1;
+		}
+		
+		return jumpRow;
+	}
+	
+	findJumpCellDown(rowPos, colPos) {
+		var column = this.getColumnByRangePos(colPos),
+		cells = column.cells.filter((cell) => this.table.rowManager.activeRows.includes(cell.row)),
+		isStartingCellEmpty = !cells[rowPos].getValue(),
+		isBottomOfStartingCellEmpty = cells[rowPos + 1] ? !cells[rowPos + 1].getValue() : false,
+		jumpRow = rowPos,
+		nextCell = this.findJumpCell(cells.slice(jumpRow + 1, cells.length), false, isStartingCellEmpty, isBottomOfStartingCellEmpty);
+		
+		if(nextCell){
+			jumpRow = nextCell.row.position - 1;
+		}
+		
+		return jumpRow;
+	}
+	
+	///////////////////////////////////
+	///////      Selection      ///////
+	///////////////////////////////////
+	newSelection(event, element) {
+		var range;
+		
+		if (element.type === "column") {
+			if(!this.columnSelection){
+				return;
+			}
+			
+			if (element === this.rowHeader) {
+				range = this.resetRanges();
+				this.selecting = "all";
+				
+				const topLeftCell = this.getCell(0, 0);
+				const bottomRightCell = this.getCell(-1, -1);
+				
+				range.setBounds(topLeftCell, bottomRightCell);		
+				return;
+			} else {
+				this.selecting = "column";
+			}
+		} else if (element.column === this.rowHeader) {
+			this.selecting = "row";
+		} else {
+			this.selecting = "cell";
+		}
+		
+		if (event.shiftKey) {
+			this.activeRange.setBounds(false, element);
+		} else if (event.ctrlKey) {
+			this.addRange().setBounds(element);
+		} else {
+			this.resetRanges().setBounds(element);
+		}
 	}
-
-	//work through sort list sorting data
-	sort(data){
-		var self = this,
-		sortList = this.table.options.sortOrderReverse ? self.sortList.slice().reverse() : self.sortList,
-		sortListActual = [],
-		rowComponents = [];
-
-		if(this.subscribedExternal("dataSorting")){
-			this.dispatchExternal("dataSorting", self.getSort());
+	
+	autoScroll(range, row, column) {
+		var tableHolder = this.table.rowManager.element,
+		rowHeader = this.rowHeader.getElement(),
+		rect, view, withinHorizontalView, withinVerticalView;
+		
+		if (typeof row === 'undefined') {
+			row = this.getRowByRangePos(range.end.row).getElement();
 		}
-
-		self.clearColumnHeaders();
-
-		if(this.table.options.sortMode !== "remote"){
-
-			//build list of valid sorters and trigger column specific callbacks before sort begins
-			sortList.forEach(function(item, i){
-				var sortObj;
-
-				if(item.column){
-					sortObj = item.column.modules.sort;
-
-					if(sortObj){
-
-						//if no sorter has been defined, take a guess
-						if(!sortObj.sorter){
-							sortObj.sorter = self.findSorter(item.column);
-						}
-
-						item.params = typeof sortObj.params === "function" ? sortObj.params(item.column.getComponent(), item.dir) : sortObj.params;
-
-						sortListActual.push(item);
-					}
-
-					self.setColumnHeader(item.column, item.dir);
-				}
-			});
-
-			//sort data
-			if (sortListActual.length) {
-				self._sortItems(data, sortListActual);
+		
+		if (typeof column === 'undefined') {
+			column = this.getColumnByRangePos(range.end.col).getElement();
+		}
+		
+		rect = {
+			left: column.offsetLeft,
+			right: column.offsetLeft + column.offsetWidth,
+			top: row.offsetTop,
+			bottom: row.offsetTop + row.offsetHeight,
+		};
+		
+		view = {
+			left: tableHolder.scrollLeft + rowHeader.offsetWidth,
+			right: Math.ceil(tableHolder.scrollLeft + tableHolder.clientWidth),
+			top: tableHolder.scrollTop,
+			bottom:	tableHolder.scrollTop +	tableHolder.offsetHeight - this.table.rowManager.scrollbarWidth,
+		};
+		
+		withinHorizontalView = view.left < rect.left &&	rect.left < view.right && view.left < rect.right &&	rect.right < view.right;
+		
+		withinVerticalView = view.top < rect.top &&	rect.top < view.bottom && view.top < rect.bottom &&	rect.bottom < view.bottom;
+		
+		if (!withinHorizontalView) {
+			if (rect.left < view.left) {
+				tableHolder.scrollLeft = rect.left - rowHeader.offsetWidth;
+			} else if (rect.right > view.right) {
+				tableHolder.scrollLeft = rect.right - tableHolder.clientWidth;
 			}
-
-		}else {
-			sortList.forEach(function(item, i){
-				self.setColumnHeader(item.column, item.dir);
-			});
 		}
-
-		if(this.subscribedExternal("dataSorted")){
-			data.forEach((row) => {
-				rowComponents.push(row.getComponent());
-			});
-
-			this.dispatchExternal("dataSorted", self.getSort(), rowComponents);
+		
+		if (!withinVerticalView) {
+			if (rect.top < view.top) {
+				tableHolder.scrollTop = rect.top;
+			} else if (rect.bottom > view.bottom) {
+				tableHolder.scrollTop = rect.bottom - tableHolder.clientHeight;
+			}
 		}
-
-		return data;
 	}
-
-	//clear sort arrows on columns
-	clearColumnHeaders(){
-		this.table.columnManager.getRealColumns().forEach((column) => {
-			if(column.modules.sort){
-				column.modules.sort.dir = "none";
-				column.getElement().setAttribute("aria-sort", "none");
-				this.setColumnHeaderSortIcon(column, "none");
+	
+	
+	///////////////////////////////////
+	///////       Layout        ///////
+	///////////////////////////////////
+	
+	layoutChange(){
+		this.overlay.style.visibility = "hidden";
+		clearTimeout(this.layoutChangeTimeout);
+		this.layoutChangeTimeout = setTimeout(this.layoutRanges.bind(this), 200);
+	}
+	
+	redraw(force) {
+		if (force) {
+			this.selecting = 'cell';
+			this.resetRanges();
+			this.layoutElement();
+		}
+	}
+	
+	layoutElement(visibleRows) {
+		var rows;
+		
+		if (visibleRows) {
+			rows = this.table.rowManager.getVisibleRows(true);
+		} else {
+			rows = this.table.rowManager.getRows();
+		}
+		
+		rows.forEach((row) => {
+			if (row.type === "row") {
+				this.layoutRow(row);
+				row.cells.forEach((cell) => this.renderCell(cell));
 			}
 		});
+		
+		this.getTableColumns().forEach((column) => {
+			this.layoutColumn(column);
+		});
+		
+		this.layoutRanges();
 	}
-
-	//set the column header sort direction
-	setColumnHeader(column, dir){
-		column.modules.sort.dir = dir;
-		column.getElement().setAttribute("aria-sort", dir === "asc" ? "ascending" : "descending");
-		this.setColumnHeaderSortIcon(column, dir);
+	
+	layoutRow(row) {
+		var el = row.getElement(),
+		selected = false,
+		occupied = this.ranges.some((range) => range.occupiesRow(row));
+		
+		if (this.selecting === "row") {
+			selected = occupied;
+		} else if (this.selecting === "all") {
+			selected = true;
+		}
+		
+		el.classList.toggle("tabulator-range-selected", selected);
+		el.classList.toggle("tabulator-range-highlight", occupied);
 	}
-
-	setColumnHeaderSortIcon(column, dir){
-		var sortEl = column.modules.sort.element,
-		arrowEl;
-
-		if(column.definition.headerSort && typeof this.table.options.headerSortElement === "function"){
-			while(sortEl.firstChild) sortEl.removeChild(sortEl.firstChild);
-
-			arrowEl = this.table.options.headerSortElement.call(this.table, column.getComponent(), dir);
+	
+	layoutColumn(column) {
+		var el = column.getElement(),		
+		selected = false,
+		occupied = this.ranges.some((range) => range.occupiesColumn(column));
+		
+		if (this.selecting === "column") {
+			selected = occupied;
+		} else if (this.selecting === "all") {
+			selected = true;
+		}
+		
+		el.classList.toggle("tabulator-range-selected", selected);
+		el.classList.toggle("tabulator-range-highlight", occupied);
+	}
+	
+	layoutRanges() {
+		var activeCell;
+		
+		if (!this.table.initialized) {
+			return;
+		}
+		
+		activeCell = this.getActiveCell();
+		
+		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";
+		
+		this.ranges.forEach((range) => range.layout());
+		
+		this.overlay.style.visibility = "visible";
+	}
+	
+	
+	///////////////////////////////////
+	///////  Helper Functions   ///////
+	///////////////////////////////////	
+	
+	getCell(rowIdx, colIdx) {
+		var row;
+		
+		if (colIdx < 0) {
+			colIdx = this.getTableColumns().length + colIdx - 1;
 			
-			if(typeof arrowEl === "object"){
-				sortEl.appendChild(arrowEl);
-			}else {
-				sortEl.innerHTML = arrowEl;
+			if (colIdx < 0) {
+				return null;
 			}
 		}
+		
+		if (rowIdx < 0) {
+			rowIdx = this.getTableRows().length + rowIdx;
+		}
+		
+		row = this.table.rowManager.getRowFromPosition(rowIdx + 1);
+		
+		return row ? row.getCells(false, true).filter((cell) => cell.column.visible)[colIdx + 1] : null;
 	}
+	
+	
+	getActiveCell() {
+		return this.getCell(this.activeRange.start.row, this.activeRange.start.col);
+	}
+	
+	getRowByRangePos(pos) {
+		return this.getTableRows()[pos];
+	}
+	
+	getColumnByRangePos(pos) {
+		return this.getTableColumns()[pos + 1];
+	}
+	
+	getTableRows() {
+		return this.table.rowManager.getDisplayRows();
+	}
+	
+	getTableColumns() {
+		return this.table.columnManager.getVisibleColumnsByIndex();
+	}
+	
+	addRange(start, end) {
+		var  range;
+		
+		if(this.maxRanges !== true && this.ranges.length >= this.maxRanges){
+			this.ranges.shift().destroy();
+		}
+		
+		range = new Range(this.table, this, start, end);
+		
+		this.activeRange = range;
+		this.ranges.push(range);
+		this.rangeContainer.appendChild(range.element);
+		
+		return range;
+	}
+	
+	resetRanges() {
+		var range, cell;
+		
+		this.ranges.forEach((range) => range.destroy());
+		this.ranges = [];
+		
+		range = this.addRange();
+		
+		if(this.table.rowManager.activeRows.length){
+			cell = this.table.rowManager.activeRows[0].cells[this.rowHeader ? 1 : 0];
 
-	//sort each item in sort list
-	_sortItems(data, sortList){
-		var sorterCount = sortList.length - 1;
-
-		data.sort((a, b) => {
-			var result;
-
-			for(var i = sorterCount; i>= 0; i--){
-				let sortItem = sortList[i];
-
-				result = this._sortRow(a, b, sortItem.column, sortItem.dir, sortItem.params);
-
-				if(result !== 0){
-					break;
-				}
+			if(cell){
+				range.setBounds(cell);
+				this.initializeFocus(cell);
 			}
-
-			return result;
-		});
+		}
+		
+		return range;
 	}
-
-	//process individual rows for a sort function on active data
-	_sortRow(a, b, column, dir, params){
-		var el1Comp, el2Comp;
-
-		//switch elements depending on search direction
-		var el1 = dir == "asc" ? a : b;
-		var el2 = dir == "asc" ? b : a;
-
-		a = column.getFieldValue(el1.getData());
-		b = column.getFieldValue(el2.getData());
-
-		a = typeof a !== "undefined" ? a : "";
-		b = typeof b !== "undefined" ? b : "";
-
-		el1Comp = el1.getComponent();
-		el2Comp = el2.getComponent();
-
-		return column.modules.sort.sorter.call(this, a, b, el1Comp, el2Comp, column.getComponent(), dir, params);
+	
+	tableDestroyed(){
+		document.removeEventListener("mouseup", this.mouseUpEvent);
+		this.table.rowManager.element.removeEventListener("keydown", this.keyDownEvent);
+	}
+	
+	selectedRows(component) {
+		return component ? this.activeRange.getRows().map((row) => row.getComponent()) : this.activeRange.getRows();
+	}
+	
+	selectedColumns(component) {
+		return component ? this.activeRange.getColumns().map((col) => col.getComponent()) : this.activeRange.getColumns();
 	}
 }
 
-Sort.moduleName = "sort";
-
-//load defaults
-Sort.sorters = defaultSorters;
+SelectRange.moduleName = "selectRange";
 
 class Tooltip extends Module{
 	
@@ -19850,6 +21401,17 @@ var defaultValidators = {
 		return isNaN(value);
 	},
 
+	//must be alphanumeric
+	alphanumeric: function(cell, value, parameters){
+		if(value === "" || value === null || typeof value === "undefined"){
+			return true;
+		}
+
+		var reg = new RegExp(/^[a-z0-9]+$/i);
+
+		return reg.test(value);
+	},
+
 	//maximum value
 	max: function(cell, value, parameters){
 		if(value === "" || value === null || typeof value === "undefined"){
@@ -20286,6 +21848,7 @@ var modules = /*#__PURE__*/Object.freeze({
 	ResponsiveLayoutModule: ResponsiveLayout,
 	SelectRowModule: SelectRow,
 	SortModule: Sort,
+	SelectRangeModule: SelectRange,
 	TooltipModule: Tooltip,
 	ValidateModule: Validate
 });
@@ -21610,6 +23173,10 @@ class ColumnManager extends CoreFeature {
 		
 		return index > -1 ? this.columnsByIndex[index] : false;
 	}
+
+	getVisibleColumnsByIndex() {
+		return this.columnsByIndex.filter((col) => col.visible);
+	}
 	
 	getColumns(){
 		return this.columns;
@@ -22009,8 +23576,6 @@ class BasicVertical extends Renderer{
 			}
 		});
 		
-		
-		
 		if(onlyGroupHeaders){
 			element.style.minWidth = this.table.columnManager.getWidth() + "px";
 		}else {
@@ -22027,6 +23592,10 @@ class BasicVertical extends Renderer{
 		}
 		
 		this.renderRows();
+
+		if(!this.rows().length){
+			this.table.rowManager.tableEmpty();
+		}
 	}
 	
 	scrollToRowNearestTop(row){
@@ -23020,7 +24589,7 @@ class RowManager extends CoreFeature{
 			
 			this.regenerateRowPositions();
 			
-			if(rows.length){
+			if(this.displayRowsCount){
 				this._clearPlaceholder();
 			}
 			
@@ -23649,6 +25218,14 @@ class RowManager extends CoreFeature{
 		this.renderEmptyScroll();
 		this._showPlaceholder();
 	}
+
+	checkPlaceholder(){
+		if(this.displayRowsCount){
+			this._clearPlaceholder();
+		}else {
+			this.tableEmpty();
+		}
+	}
 	
 	_showPlaceholder(){
 		if(this.placeholder){
@@ -24130,11 +25707,11 @@ class InteractionManager extends CoreFeature {
 				}
 			}
 		}
-		
+
 		if(targets.group && targets.group === targets.row){
 			delete targets.row;
 		}
-		
+
 		return targets;
 	}
 	
@@ -24666,7 +26243,7 @@ class DeprecationAdvisor extends CoreFeature{
 		}
 	}
 	
-	check(oldOption, newOption){
+	check(oldOption, newOption, convert){
 		var msg = "";
 		
 		if(typeof this.options(oldOption) !== "undefined"){
@@ -24675,6 +26252,10 @@ class DeprecationAdvisor extends CoreFeature{
 			if(newOption){
 				msg = msg + ", Please use the %c" + newOption + "%c option instead";
 				this._warnUser(msg, 'font-weight: bold;', 'font-weight: normal;', 'font-weight: bold;', 'font-weight: normal;');
+
+				if(convert){
+					this.table.options[newOption] = this.table.options[oldOption];
+				}
 			}else {
 				this._warnUser(msg, 'font-weight: bold;', 'font-weight: normal;');
 			}
@@ -25463,6 +27044,8 @@ class Alert extends CoreFeature{
 	alert(content, type = "msg"){
 		if(content){
 			this.clear();
+
+			this.dispatch("alert-show", type);
             
 			this.type = type;
             
@@ -25485,6 +27068,8 @@ class Alert extends CoreFeature{
 	}
     
 	clear(){
+		this.dispatch("alert-hide", this.type);
+
 		if(this.element.parentNode){
 			this.element.parentNode.removeChild(this.element);
 		}
@@ -25748,6 +27333,7 @@ class Tabulator {
 	
 	_loadInitialData(){
 		this.dataLoader.load(this.options.data);
+		this.columnManager.verticalAlignHeaders();
 	}
 	
 	//deconstructor
@@ -26414,7 +28000,9 @@ class PseudoRow {
 	setCellHeight(){}
 
 	clearCellHeight(){}
+
+	rendered(){}
 }
 
-export { Accessor as AccessorModule, Ajax as AjaxModule, CalcComponent, CellComponent, Clipboard as ClipboardModule, ColumnCalcs as ColumnCalcsModule, ColumnComponent, DataTree as DataTreeModule, Download as DownloadModule, Edit$1 as EditModule, Export as ExportModule, Filter as FilterModule, Format as FormatModule, FrozenColumns as FrozenColumnsModule, FrozenRows as FrozenRowsModule, GroupComponent, GroupRows as GroupRowsModule, History as HistoryModule, HtmlTableImport as HtmlTableImportModule, Import as ImportModule, Interaction as InteractionModule, Keybindings as KeybindingsModule, Menu as MenuModule, Module, MoveColumns as MoveColumnsModule, MoveRows as MoveRowsModule, Mutator as MutatorModule, Page as PageModule, Persistence as PersistenceModule, Popup$1 as PopupModule, Print as PrintModule, PseudoRow, ReactiveData as ReactiveDataModule, Renderer, ResizeColumns as ResizeColumnsModule, ResizeRows as ResizeRowsModule, ResizeTable as ResizeTableModule, ResponsiveLayout as ResponsiveLayoutModule, RowComponent, SelectRow as SelectRowModule, Sort as SortModule, Tabulator, TabulatorFull, Tooltip as TooltipModule, Validate as ValidateModule };
+export { Accessor as AccessorModule, Ajax as AjaxModule, CalcComponent, CellComponent, Clipboard as ClipboardModule, ColumnCalcs as ColumnCalcsModule, ColumnComponent, DataTree as DataTreeModule, Download as DownloadModule, Edit$1 as EditModule, Export as ExportModule, Filter as FilterModule, Format as FormatModule, FrozenColumns as FrozenColumnsModule, FrozenRows as FrozenRowsModule, GroupComponent, GroupRows as GroupRowsModule, History as HistoryModule, HtmlTableImport as HtmlTableImportModule, Import as ImportModule, Interaction as InteractionModule, Keybindings as KeybindingsModule, Menu as MenuModule, Module, MoveColumns as MoveColumnsModule, MoveRows as MoveRowsModule, Mutator as MutatorModule, Page as PageModule, Persistence as PersistenceModule, Popup$1 as PopupModule, Print as PrintModule, PseudoRow, ReactiveData as ReactiveDataModule, Renderer, ResizeColumns as ResizeColumnsModule, ResizeRows as ResizeRowsModule, ResizeTable as ResizeTableModule, ResponsiveLayout as ResponsiveLayoutModule, RowComponent, SelectRange as SelectRangeModule, SelectRow as SelectRowModule, Sort as SortModule, Tabulator, TabulatorFull, Tooltip as TooltipModule, Validate as ValidateModule };
 //# sourceMappingURL=tabulator_esm.js.map