@openui5/sap.m 1.115.1 → 1.117.0

package/src/sap/m/plugins/CellSelector.js

@@ -12,51 +12,27 @@ sap.ui.define([
 ], function (PluginBase, KeyCodes, Core, Element, Log) {
 	"use strict";
 
-	var SELECTION_DIRECTION = {
-		NEXT: 1,
-		PREVIOUS: 2
+	var DIRECTION = {
+		ROW: "row",
+		COL: "col"
 	};
 
-	var MOUSE_POSITION = {
-		ABOVE: 0,
-		RIGHT: 1,
-		BELOW: 2,
-		LEFT: 3,
-		IN: 4
-	};
-
-	var CSS_CLASS = "sapMPluginsCellSelector";
-
 	/**
 	 * Constructor for a new CellSelector plugin.
 	 *
 	 * @param {string} [sId] id for the new control, generated automatically if no id is given
 	 * @param {object} [mSettings] initial settings for the new control
 	 *
-	 * The CellSelector plugins enables cell selection inside the table, when added as a dependent to the control.
+	 * The CellSelector plugins enables cell selection inside the table, when it is added as a dependent to the control.
 	 * It allows the user to individually select a cell block.
 	 *
-	 * Keyboard Usage:
-	 * - SPACE: Select the currently focused cell.
-	 * - SHIFT + ARROW_KEYS: Expands/shrink the current cell selection block into the specified direction by one row/column.
-	 * - SHIFT + SPACE: Enahnces the current cell selection block to cover the whole row.
-	 * - CTRL + SPACE: Enhances the current cell selection block to cover the whole column.
-	 * - SHIFT + HOME: Enhances the current cell selection block to the begin of the covered rows.
-	 * - SHIFT + END: Enhances the current cell selection block to the end of the covered rows.
-	 * - CTRL + SHIFT + A: Clears the selection.
-	 *
-	 * Mouse Usage:
-	 * - Left Click: Select the clicked cell.
-	 * - Mousedown + Moving: Select an area of cells.
-	 * - Drag Borders: Drag the horizontal/vertical borders to enhance the cell selection in the corresponding direction.
-	 * - Drag Edge: Enhance your current cell selection in any direction, when dragging a corner.
-	 *
 	 * @extends sap.m.plugins.PluginBase
 	 * @class
-	 * @version 1.115.1
+	 * @version 1.117.0
 	 * @author SAP SE
 	 *
 	 * @private
+	 * @experimental
 	 * @alias sap.m.plugins.CellSelector
 	 */
 	var CellSelector = PluginBase.extend("sap.m.plugins.CellSelector", {
@@ -82,50 +58,99 @@ sap.ui.define([
 		}
 	});
 
+	/*
+	CellSelector Interactions
+	Keyboard Usage:
+	- SPACE: Select the currently focused cell. If pressed inside a selection block, removes selection.
+	- SHIFT + ARROW_KEYS: Adjusts an already existing selection block OR creates a new one, if used outside of selection block.
+	- SHIFT + SPACE: Transforms current selection block into row selection. Result depends on selection mode applied to table.
+	- CTRL + SPACE: Extends selection to all cells of the column (up to the range limit).
+	- CTRL + SHIFT + A: Clears selection
+	Mouse Usage:
+	- CTRL + Click: Select cell. If click is on selection block, removes selection block.
+	- Mousedown + Movement: Selects the cell where mouse was pressed down. If move goes outside, extends selection.
+	- Borders: Extend/reduce selection either horizontally or vertically.
+	- Edge: Extend/reduce selection freely.
+	*/
+
 	CellSelector.prototype.onActivate = function (oControl) {
+		this._iRtl = Core.getConfiguration().getRTL() ? -1 : 1;
 		oControl.addDelegate(this, true, this);
-		this._oSession = {};
-		this._oSession.oCanvas = {};
-		this._oSession.oEdge = {};
-		this._oSession.oBorderLine = {};
-
-		var sScrollEvent = this.getConfig("scrollEvent");
-		sScrollEvent && oControl.attachEvent(sScrollEvent, this._handleScroll, this);
-
-		this._fnMouseupHandler = this._onmouseup.bind(this);
-		document.addEventListener("mouseup", this._fnMouseupHandler);
-		var oContainerRef = this.getControl().getDomRef(this.getConfig("scrollContainer"));
-		if (oContainerRef) {
-			this._fnMouseleaveHandler = this._onMouseLeave.bind(this);
-			oContainerRef.addEventListener("mouseleave", this._fnMouseleaveHandler);
-		}
+		this._oSession = { cellRefs: [] };
+		this._mTimeouts = {};
+		this._fnControlUpdate = function(oEvent) {
+			if (this._bScrolling) {
+				this._scrollSelect(this._oSession.scrollForward, this._oSession.isVertical, oEvent);
+			} else {
+				this._selectCells();
+			}
+		}.bind(this);
+		this._fnOnMouseEnter = this._onmouseenter.bind(this);
+		this._fnOnMouseOut = this._onmouseout.bind(this);
+		this._fnOnMouseMove = this._onmousemove.bind(this);
+		this._fnOnMouseUp = this.onmouseup.bind(this);
+
+		// Register Events, as adding dependent does not trigger rerendering
+		this._registerEvents();
 	};
 
 	CellSelector.prototype.onDeactivate = function (oControl) {
 		oControl.removeDelegate(this, this);
-		this._oSession = {};
-		this._oSession.oCanvas = {};
-		this._oSession.oEdge = {};
-		this._oSession.oBorderLine = {};
-
-		var sScrollEvent = this.getConfig("scrollEvent");
-		sScrollEvent && oControl.detachEvent(sScrollEvent, this._handleScroll, this);
-
-		document.removeEventListener("mouseup", this._fnMouseupHandler);
-		var oContainerRef = this.getControl().getDomRef(this.getConfig("scrollContainer"));
-		if (oContainerRef) {
-			oContainerRef.removeEventListener("mouseleave", this._fnMouseleaveHandler);
+		if (this._oSession) {
+			this.removeSelection();
+			this._oSession = null;
+			this._mTimeouts = null;
 		}
+
+		this._deregisterEvents();
 	};
 
-	CellSelector.prototype.onAfterRendering = function () {
-		this._fnMouseupHandler = this._onmouseup.bind(this);
-		document.addEventListener("mouseup", this._fnMouseupHandler);
-		var oContainerRef = this.getControl().getDomRef(this.getConfig("scrollContainer"));
-		if (oContainerRef) {
-			this._fnMouseleaveHandler = this._onMouseLeave.bind(this);
-			oContainerRef.addEventListener("mouseleave", this._fnMouseleaveHandler);
+	CellSelector.prototype.destroy = function() {
+		if (this.getControl()  && !this.getControl().isDestroyed()) {
+			this.removeSelection();
 		}
+		this._deregisterEvents();
+		this._oSession = null;
+		this._mTimeouts = null;
+
+		return PluginBase.prototype.destroy.call(this);
+	};
+
+	CellSelector.prototype.onBeforeRendering = function() {
+		if (this._oResizer) {
+			// remove resizer, as due to rerendering table element may be gone
+			this._oResizer.remove();
+			this._oResizer = null;
+		}
+	};
+
+	CellSelector.prototype.onAfterRendering = function() {
+		this._deregisterEvents();
+		this._registerEvents();
+	};
+
+	CellSelector.prototype._registerEvents = function() {
+		if (this.getControl()) {
+			this.getControl().attachEvent(this.getConfig("scrollEvent"), this._fnControlUpdate);
+			var oScrollArea = this.getControl().getDomRef(this.getConfig("scrollArea"));
+			if (oScrollArea) {
+				oScrollArea.addEventListener("mouseleave", this._fnOnMouseOut);
+				oScrollArea.addEventListener("mouseenter", this._fnOnMouseEnter);
+			}
+		}
+		document.addEventListener("mousemove", this._fnOnMouseMove);
+		document.addEventListener("mouseup", this._fnOnMouseUp);
+	};
+
+	CellSelector.prototype._deregisterEvents = function() {
+		if (this.getControl()) {
+			this.getControl().detachEvent(this.getConfig("scrollEvent"), this._fnControlUpdate);
+			var oScrollArea = this.getControl().getDomRef(this.getConfig("scrollArea"));
+			oScrollArea.removeEventListener("mouseleave", this._fnOnMouseOut);
+			oScrollArea.removeEventListener("mouseenter", this._fnOnMouseEnter);
+		}
+		document.removeEventListener("mousemove", this._fnOnMouseMove);
+		document.removeEventListener("mouseup", this._fnOnMouseUp);
 	};
 
 	/**
@@ -143,7 +168,7 @@ sap.ui.define([
 			return null;
 		}
 
-		var mSelectionRange = getNormalizedBounds(this._oSession.mSource, this._oSession.mTarget);
+		var mSelectionRange = this._getNormalizedBounds(this._oSession.mSource, this._oSession.mTarget, true);
 		if (isNaN(mSelectionRange.from.rowIndex) || isNaN(mSelectionRange.to.rowIndex)) {
 			return null;
 		}
@@ -174,319 +199,265 @@ sap.ui.define([
 	};
 
 	CellSelector.prototype.onsapspace = function (oEvent) {
-		if (oEvent.isMarked()) {
-			return;
-		} else if (!this.getConfig("isSelectionEnabled", this.getControl())) {
-			Log.error("Cell selection is inactive, because preconditions are not met.");
-			return;
-		}
-
-		var oTarget = oEvent.target;
-		var oCellInfo = this.getConfig("getCellInfo", this.getControl(), oTarget);
-
-		if (oCellInfo) {
-			this._bSelecting = true;
-			if (this._oSession.mSource) {
-				if (this._oSession.mSource.rowIndex !== oCellInfo.rowIndex || this._oSession.mSource.colIndex !== oCellInfo.colIndex) {
-					this._oSession.mSource = null;
-					this._oSession.mTarget = null;
-				}
-			}
-			this._oSession.mSource = oCellInfo;
-			this._oSession.mStart = oCellInfo;
-			this._selectCells(this._oSession.mSource, oCellInfo, {info: {focus: oCellInfo}});
-
-			oEvent.preventDefault();
-			oEvent.setMarked();
-		}
+		this._startSelection(oEvent, false);
 	};
 
-	CellSelector.prototype.onsapnext = CellSelector.prototype.onsapprevious = function (oEvent) {
-		if (!this._bSelecting) {
-			return;
-		}
-		this.clearSelection();
+	CellSelector.prototype.onsapupmodifiers = function(oEvent) {
+		this._onsaparrowmodifiers(oEvent, DIRECTION.ROW, -1, 0);
 	};
 
-	CellSelector.prototype.onsaphome = CellSelector.prototype.onsapend = CellSelector.prototype.onsapnext;
+	CellSelector.prototype.onsapdownmodifiers = function(oEvent) {
+		this._onsaparrowmodifiers(oEvent, DIRECTION.ROW, 1, 0);
+	};
 
-	CellSelector.prototype.onsapnextmodifiers = function (oEvent) {
-		this._selectNextCell(oEvent, false, 1);
+	CellSelector.prototype.onsapleftmodifiers = function(oEvent) {
+		this._onsaparrowmodifiers(oEvent, DIRECTION.COL, 0, -1);
 	};
 
-	CellSelector.prototype.onsappreviousmodifiers = function (oEvent) {
-		this._selectNextCell(oEvent, true.valueOf, -1);
+	CellSelector.prototype.onsaprightmodifiers = function(oEvent) {
+		this._onsaparrowmodifiers(oEvent, DIRECTION.COL, 0, 1);
 	};
 
-	CellSelector.prototype._selectNextCell = function (oEvent, bIsPrevious, iDirectionIndex) {
-		if (!this._bSelecting || !oEvent.shiftKey || oEvent.isMarked() || !this._isInSelectionArea(oEvent.target)) {
+	CellSelector.prototype._onsaparrowmodifiers = function(oEvent, sDirectionType, iRowDiff, iColDiff) {
+		if (oEvent.isMarked() || !oEvent.shiftKey) {
 			return;
 		}
 
-		var oFocusCellInfo = this.getConfig("getCellInfo", this.getControl(), oEvent.target);
-		var mFrom = Object.assign({}, this._oSession.mSource);
-		var mTo = Object.assign({}, this._oSession.mTarget);
+		var oSelectableCell = this._getSelectableCell(oEvent.target);
+		if (!oSelectableCell) {
+			return;
+		}
 
-		var sKeyCode = bIsPrevious ? KeyCodes.ARROW_UP : KeyCodes.ARROW_DOWN,
-			iDirection = bIsPrevious ? SELECTION_DIRECTION.PREVIOUS : SELECTION_DIRECTION.NEXT;
+		var oInfo = this.getConfig("getCellInfo", this.getControl(), oSelectableCell);
+		if (!this._inSelection(oEvent.target) || !this._oSession.mSource || !this._oSession.mTarget) {
+			// If not in selection block, start new selection block
+			this._oSession.mSource = this._oSession.mTarget = oInfo;
+		}
 
-		var sType = oEvent.keyCode == sKeyCode ? "row" : "col";
-		mTo[sType + "Index"] += iDirectionIndex;
-		oFocusCellInfo[sType + "Index"] += iDirectionIndex;
+		var mBounds = this._getNormalizedBounds(this._oSession.mSource, this._oSession.mTarget);
+		const { from, to, focus } = this._getUpdatedBounds(iRowDiff, iColDiff * this._iRtl, oInfo);
 
-		if (!this.getConfig("isNavigatableCell", this.getControl(), mTo)) {
+		if (focus[sDirectionType + "Index"] < 0 || focus.colIndex >= this.getConfig("getVisibleColumns", this.getControl()).length) {
 			return;
 		}
 
-		this._selectCells(mFrom, mTo, {info: {focus: oFocusCellInfo, direction: iDirection}});
-		oEvent.preventDefault();
-		oEvent.setMarked();
+		this.getConfig("focusCell", this.getControl(), focus, iRowDiff > 0);
+		if (sDirectionType == DIRECTION.ROW && (oInfo.rowIndex == mBounds.from.rowIndex || oInfo.rowIndex == mBounds.to.rowIndex)
+			|| sDirectionType == DIRECTION.COL && (oInfo.colIndex == mBounds.from.colIndex || oInfo.colIndex == mBounds.to.colIndex)) {
+			this._bSelecting = true;
+			this._selectCells(from, to);
+
+			oEvent.preventDefault();
+			oEvent.setMarked();
+			oEvent.setMarked("sapUiTableSkipItemNavigation", true); // Required to prevent item navigation in GridTable for MultiToggle
+		}
 	};
 
-	CellSelector.prototype.onsapspacemodifiers = function (oEvent) {
+	// To be implemented. See internal documentation.
+	CellSelector.prototype.onsaphomemodifiers = function (oEvent) {};
+
+	// To be implemented. See internal documentation.
+	CellSelector.prototype.onsapendmodifiers = function (oEvent) {};
+
+	/**
+	 * Handles:
+	 * - CTRL + SHIFT + A
+	 * - CTRL + A
+	 * @param {sap.ui.base.Event} oEvent event instance
+	 */
+	CellSelector.prototype.onkeydown = function (oEvent) {
 		if (!this._bSelecting || oEvent.isMarked()) {
 			return;
 		}
 
-		var mTo = Object.assign({}, this._oSession.mTarget);
-		var oFocusCellInfo = this.getConfig("getCellInfo", this.getControl(), oEvent.target);
-
-		if (oEvent.shiftKey) {
-			// Select rows, if single row selection, only select focused row
-			this._oSession.mSource.colIndex = -Infinity;
-			mTo.colIndex = Infinity;
-			this._selectCells(this._oSession.mSource, mTo, {info: {focus: oFocusCellInfo, boundaryChange: true}});
-		} else if (oEvent.ctrlKey || oEvent.metaKey) {
-			// Select columns
-			this._oSession.mSource.rowIndex = -Infinity;
-			mTo.rowIndex = Infinity;
-			this._selectCells(this._oSession.mSource, mTo, {info: {focus: oFocusCellInfo, boundaryChange: true}});
-		}
-		oEvent.preventDefault();
-		oEvent.setMarked();
-	};
-
-	CellSelector.prototype.onsaphomemodifiers = function (oEvent) {
-		if (!this._bSelecting || oEvent.isMarked() || !oEvent.shiftKey || !this._isInSelectionArea(oEvent.target)) {
-			return;
+		if (isKeyCombination(oEvent, KeyCodes.A, true, true) || isKeyCombination(oEvent, KeyCodes.A, false, false)) {
+			this.removeSelection();
 		}
 
-		var mTo = Object.assign({}, this._oSession.mTarget);
-		mTo.colIndex = -Infinity;
-		this._selectCells(this._oSession.mSource, mTo, {info: {focus: mTo, boundaryChange: true}});
-		oEvent.setMarked();
+		oEvent.preventDefault();
 	};
 
-	CellSelector.prototype.onsapendmodifiers = function (oEvent) {
-		if (!this._bSelecting || oEvent.isMarked() || !oEvent.shiftKey || !this._isInSelectionArea(oEvent.target)) {
+	/**
+	 * Handles:
+	 * - SPACE + SHIFT
+	 * - SPACE + CTRL/CMD
+	 * @param {sap.ui.base.Event} oEvent event instance
+	 */
+	CellSelector.prototype.onkeyup = function(oEvent) {
+		if (oEvent.isMarked()) {
 			return;
 		}
 
-		var mTo = Object.assign({}, this._oSession.mTarget);
-		mTo.colIndex = Infinity;
-		this._selectCells(this._oSession.mSource, mTo, {info: {focus: mTo, boundaryChange: true}});
-		oEvent.setMarked();
-	};
-
-	CellSelector.prototype.onkeydown = function (oEvent) {
-		if (this._bSelecting) {
-			// CTRL+SHIFT+A: Clear Selection
-			if (isKeyCombination(oEvent, KeyCodes.A, true, true)) {
-				this.clearSelection();
-				oEvent.preventDefault();
+		var mBounds = this._bSelecting ? this._getNormalizedBounds(this._oSession.mSource, this._oSession.mTarget) : undefined;
+		if (isKeyCombination(oEvent, KeyCodes.SPACE, true, false)) {
+			if (this._inSelection(oEvent.target)) {
+				var oInfo = this.getConfig("getCellInfo", this.getControl(), oEvent.target);
+				this.getConfig("selectRows", this.getControl(), mBounds.from.rowIndex, mBounds.to.rowIndex, oInfo.rowIndex) && this.removeSelection();
 				oEvent.setMarked();
 			}
+		} else if (this._bSelecting && isKeyCombination(oEvent, KeyCodes.SPACE, false, true)) {
+			if (!this._inSelection(oEvent.target)) {
+				// If focus is on cell outside of selection, select focused column
+				var oInfo = this.getConfig("getCellInfo", this.getControl(), oEvent.target);
+				mBounds.from.colIndex = mBounds.to.colIndex = oInfo.colIndex;
+			}
+			mBounds.from.rowIndex = 0;
+			mBounds.to.rowIndex = Infinity;
+			this._selectCells(mBounds.from, mBounds.to);
 		}
+
+		oEvent.preventDefault();
 	};
 
 	// Mouse Navigation
 
-	CellSelector.prototype.ontouchstart = function (oEvent) {
-		var oCellRef = this._getSelectableCell(oEvent.target);
-		if (oEvent.isMarked() || !oCellRef) {
-			return;
-		} else if (!this.getConfig("isSelectionEnabled", this.getControl())) {
-			Log.error("Cell selection is inactive, because preconditions are not met.");
+	CellSelector.prototype.onmousedown = function(oEvent) {
+		if (oEvent.isMarked && oEvent.isMarked()) {
 			return;
 		}
 
-		var oCellInfo = this.getConfig("getCellInfo", this.getControl(), oCellRef);
-
-		if (oCellInfo) {
-			this._bSelecting = true;
-			this._bMouseDown = true;
-			this._bByEdge = false;
-			if (this._oSession.mSource) {
-				if (this._oSession.mSource.rowIndex !== oCellInfo.rowIndex || this._oSession.mSource.colIndex !== oCellInfo.colIndex) {
-					this._oSession.mSource = null;
-					this._oSession.mTarget = null;
-				}
-			}
+		if (oEvent.ctrlKey || oEvent.metaKey) {
+			this._startSelection(oEvent);
+		}
 
-			this._oSession.mSource = oCellInfo;
-			this._oSession.mStart = oCellInfo;
-			this._selectCells(this._oSession.mSource, oCellInfo, {info: {focus: oCellInfo}});
-			oEvent.preventDefault();
+		this._bMouseDown = true;
+		var oSelectableCell = this._getSelectableCell(oEvent.target);
+		if (oSelectableCell) {
+			this._mClickedCell = this.getConfig("getCellInfo", this.getControl(), oSelectableCell);
 		}
-		oEvent.setMarked();
 	};
 
-	CellSelector.prototype.ontouchmove = function (oEvent) {
-		if (!this._bMouseDown || !this._bSelecting) {
-			return;
+	/**
+	 * Event handler for mouse movement. Handles mouse movement during cell selection. Takes on tasks like:
+	 * - updating resizer positions
+	 * - mouse selection via cell click and move
+	 * - selection enhancement via border and edge
+	 * @param {sap.ui.base.Event} oEvent event
+	 */
+	CellSelector.prototype._onmousemove = function(oEvent) {
+		// Only update the resizer, if we are selecting and the border is not pressed. During border/edge pressing, don't update it
+		if (this._bSelecting && !this._bMouseDown) {
+			var mBounds = this._getNormalizedBounds(this._oSession.mSource, this._oSession.mTarget);
+			this._updateResizers(mBounds, oEvent.clientX, oEvent.clientY);
 		}
 
-		var oTouchPosition = this._getMousePosition(this.getConfig("scrollContainer"), oEvent.clientX, oEvent.clientY);
-		if (oTouchPosition.x == MOUSE_POSITION.IN && oTouchPosition.y == MOUSE_POSITION.IN) {
-			this._bScrollSelecting = false;
+		var oSelectableCell = this._getSelectableCell(oEvent.target);
+		if (!oSelectableCell || !this._bMouseDown) {
+			return;
 		}
 
-		var oTargetRef = this._getSelectableCell(oEvent.target);
-		if (!oTargetRef) {
+		// If clicked cell (=starting cell) is equal to currently hovered cell, don't do anything
+		var oInfo = this.getConfig("getCellInfo", this.getControl(), oSelectableCell);
+		if (this._mClickedCell
+			&& oInfo.rowIndex == this._mClickedCell.rowIndex
+			&& oInfo.colIndex == this._mClickedCell.colIndex) {
 			return;
 		}
 
-		var oTargetInfo = this.getConfig("getCellInfo", this.getControl(), oTargetRef);
-		if (oTargetInfo) {
-			if (oTargetInfo.rowIndex == this._oSession.mTarget.rowIndex && oTargetInfo.colIndex == this._oSession.mTarget.colIndex) {
-				// if current mouse position is equal to current saved target position, no change is needed
-				return;
-			}
+		// Remove text selection during mouse cell selection
+		window.getSelection().removeAllRanges();
 
-			var oBounds = getNormalizedBounds(this._oSession.mSource, this._oSession.mTarget);
-
-			if (this._oEdgeInfo && this._oEdgeInfo.isActive && this._oEdgeInfo.moveStart) {
-				this._oEdgeInfo.moveStart = false;
-
-				// Move Start position to opposite edge to ensure correct enlarging/decreasing of selection area
-				if (this._oEdgeInfo.edgePosition === "NE") {
-					this._oSession.mStart.rowIndex = oBounds.to.rowIndex;
-					this._oSession.mStart.colIndex = oBounds.from.colIndex;
-				} else if (this._oEdgeInfo.edgePosition === "SE") {
-					this._oSession.mStart = oBounds.from;
-				} else if (this._oEdgeInfo.edgePosition === "SW") {
-					this._oSession.mStart.rowIndex = oBounds.from.rowIndex;
-					this._oSession.mStart.colIndex = oBounds.to.colIndex;
-				} else if (this._oEdgeInfo.edgePosition === "NW") {
-					this._oSession.mStart = oBounds.to;
-				}
-			} else if (this._oBorderMoveInfo && this._oBorderMoveInfo.isActive) {
-				// Move Start position to opposite border to ensure correct enlarging/decreasing of selection area
-				var sDirection = this._oBorderMoveInfo.direction, bMoveStart = this._oBorderMoveInfo.moveStart;
-				if (sDirection === "N") {
-					this._oSession.mStart = bMoveStart ? oBounds.to : this._oSession.mStart;
-					oTargetInfo.colIndex = oBounds.from.colIndex;
-				} else if (sDirection === "E") {
-					this._oSession.mStart = bMoveStart ? oBounds.from : this._oSession.mStart;
-					oTargetInfo.rowIndex = oBounds.to.rowIndex;
-				} else if (sDirection === "S") {
-					this._oSession.mStart = bMoveStart ? oBounds.from : this._oSession.mStart;
-					oTargetInfo.colIndex = oBounds.to.colIndex;
-				} else if (sDirection === "W") {
-					this._oSession.mStart = bMoveStart ? oBounds.to : this._oSession.mStart;
-					oTargetInfo.rowIndex = oBounds.from.rowIndex;
-				}
-				this._oBorderMoveInfo.moveStart = false;
+		if (this._bBorderDown && !this._bScrolling) {
+			var oBorder = this._oSession.border;
+			var mDiff = {
+				colIndex: isNaN(oBorder.colIndex) ? 0 : oInfo.colIndex - oBorder.colIndex,
+				rowIndex: isNaN(oBorder.rowIndex) ? 0 : oInfo.rowIndex - oBorder.rowIndex
+			};
+
+			if (mDiff.rowIndex != 0 || mDiff.colIndex != 0) {
+				const { from, to } = this._getUpdatedBounds(mDiff.rowIndex, mDiff.colIndex, oBorder);
+
+				this._selectCells(from, to);
+
+				this._oSession.border.rowIndex += mDiff.rowIndex;
+				this._oSession.border.colIndex += mDiff.colIndex;
 			}
-			var mFrom = this._oSession.mStart, mTo = oTargetInfo;
-			this._selectCells(mFrom, mTo, {info: {focus: oTargetInfo}});
+		} else {
+			this._startSelection(oEvent, true);
 		}
 	};
 
-	CellSelector.prototype._onMouseLeave = function (oEvent) {
-		if (this._bMouseDown && this._bSelecting) {
-			this._bScrollSelecting = true;
-			var oMousePosition = this._getMousePosition(this.getConfig("scrollContainer"), oEvent.clientX, oEvent.clientY);
-			this._onScrollSelect(oMousePosition);
+	/** Event Handler for Mouse Selection (leaving table, etc.) */
+	CellSelector.prototype._onmouseout = function(oEvent) {
+		var oScrollAreaRef = this.getControl().getDomRef(this.getConfig("scrollArea"));
+
+		if (!oScrollAreaRef || !this._bMouseDown) { return; }
+
+		var oScrollAreaRect = oScrollAreaRef.getBoundingClientRect();
+
+		var bForward, bVertical;
+		this._bScrolling = false;
+		if (oEvent.clientY > oScrollAreaRect.bottom || oEvent.clientY < oScrollAreaRect.top) {
+			this._oSession.scrollForward = bForward = oEvent.clientY > oScrollAreaRect.bottom;
+			this._oSession.isVertical = bVertical = true;
+			this._bScrolling = true;
+		}
+
+		if (oEvent.clientX > oScrollAreaRect.right || oEvent.clientX < oScrollAreaRect.left) {
+			this._oSession.scrollForward = bForward = oEvent.clientX > oScrollAreaRect.right;
+			this._oSession.isVertical = bVertical = false;
+			this._bScrolling = true;
+		}
+
+		if (this._bScrolling) {
+			this._doScroll(bForward, bVertical, oEvent);
 		}
 	};
 
-	/**
-	 * Event handler for scroll selection. If the mouse is outside of the table while selecting cells, the table will be scrolled accordingly.
-	 *
-	 * Returns a promise, which will resolve if selection is stopped or the control has been destroyed.
-	 * @param {object} oMousePosition mouse position information
-	 * @param {MOUSE_POSITION} oMousePosition.x x position
-	 * @param {MOUSE_POSITION} oMousePosition.y y position
-	 * @returns {Promise} event promise
-	 */
-	CellSelector.prototype._onScrollSelect = function (oMousePosition) {
-		// recursively calls _onScrollSelect every 100ms, as long as scroll selecting is active
-		return new Promise(function (resolve, reject) {
-			if (!this._bScrollSelecting) {
-				resolve();
-				return;
-			}
-			setTimeout(function () {
-				if (!this.getControl()) {
-					// If during the asynchronous process, the control is somehow destroyed, simply resolve and return
-					resolve();
-					return;
-				}
-				var oContainerRef = this.getControl().getDomRef(this.getConfig("container"));
-				if (oMousePosition.x === MOUSE_POSITION.LEFT) {
-					if (this._oSession.mSource.colIndex < this._oSession.mTarget.colIndex && this._oSession.mSource.colIndex > 0) {
-						this._oSession.mSource.colIndex--;
-					} else if (this._oSession.mTarget.colIndex > 0) {
-						this._oSession.mTarget.colIndex--;
-					}
-					oContainerRef.dispatchEvent(new WheelEvent("wheel", {deltaX: -1, deltaMode: window.WheelEvent.DOM_DELTA_LINE}));
-					this._selectCells(this._oSession.mSource, this._oSession.mTarget);
-				} else if (oMousePosition.x === MOUSE_POSITION.RIGHT) {
-					this._oSession.mTarget.colIndex++;
-					oContainerRef.dispatchEvent(new WheelEvent("wheel", {deltaX: 1, deltaMode: window.WheelEvent.DOM_DELTA_LINE}));
-					this._selectCells(this._oSession.mSource, this._oSession.mTarget);
-				}
-				if (oMousePosition.y === MOUSE_POSITION.ABOVE) {
-					if (this._oSession.mSource.rowIndex < this._oSession.mTarget.rowIndex && this._oSession.mSource.rowIndex > 0) {
-						this._oSession.mSource.rowIndex--;
-					} else if (this._oSession.mTarget.rowIndex > 0) {
-						this._oSession.mTarget.rowIndex--;
-					}
-					oContainerRef.dispatchEvent(new WheelEvent("wheel", {deltaY: -1, deltaMode: window.WheelEvent.DOM_DELTA_LINE}));
-				} else if (oMousePosition.y === MOUSE_POSITION.BELOW) {
-					this._oSession.mTarget.rowIndex++;
-					oContainerRef.dispatchEvent(new WheelEvent("wheel", {deltaY: 1, deltaMode: window.WheelEvent.DOM_DELTA_LINE}));
-				}
-				resolve();
-			}.bind(this), 100);
-		}.bind(this)).then(function () {
-			if (!this._bScrollSelecting) {
-				return;
+	CellSelector.prototype._onmouseenter = function(oEvent) {
+		this._bScrolling = false;
+		this._clearScroller();
+	};
+
+	CellSelector.prototype._doScroll = function(bForward, bVertical, oEvent) {
+		this._clearScroller();
+		if (this._bScrolling) {
+			this.getConfig("scroll", this.getControl(), bForward, bVertical);
+			this._mTimeouts.scrollTimerId = setTimeout(this._doScroll.bind(this, bForward, bVertical), 500);
+
+			// If vertical scrolling, wait for the event, then select the next cells, not possible currently with horizontal scrolling
+			if (!bVertical) {
+				this._scrollSelect(bForward, bVertical, oEvent);
 			}
-			this._onScrollSelect(oMousePosition);
-		}.bind(this));
+		}
 	};
 
-	/**
-	 * Event handler for mouse movement with border or edge handles while selecting cells. Sets the according selection flags, if a selection is active.
-	 * @param {String} sFacing direction of movement
-	 * @param {boolean} bBorder is the movement by border dragging
-	 * @private
-	 */
-	CellSelector.prototype._onHandleMove = function (sFacing, bBorder) {
-		if (this._oBorderMoveInfo && this._oBorderMoveInfo.isActive) {
+	CellSelector.prototype._scrollSelect = function(bForward, bVertical, oEvent) {
+		if (!this._bSelecting) {
 			return;
 		}
-		this._bSelecting = true;
-		this._bMouseDown = true;
-		if (bBorder) {
-			this._oBorderMoveInfo = {isActive: true, direction: sFacing, moveStart: true};
-		} else {
-			this._oEdgeInfo = {isActive: true, moveStart: true, edgePosition: sFacing};
+		var mBounds = this._getNormalizedBounds(this._oSession.mSource, this._oSession.mTarget);
+		if (this._bScrolling) {
+			var sDirectionType = bVertical ? DIRECTION.ROW : DIRECTION.COL;
+			var mDiff = { "row": 0, "col": 0 };
+			var sType = bForward ? "to" : "from";
+
+			mDiff[sDirectionType] = bForward ? 1 : -1;
+			const { from, to } = this._getUpdatedBounds(mDiff[DIRECTION.ROW], mDiff[DIRECTION.COL], mBounds[sType]);
+			this._selectCells(from, to);
 		}
 	};
 
-	/**
-	 * Event handler for mouseup. Stops the cell selection and sets the necessary flags accordingly.
-	 * @param {sap.ui.base.Event} oEvent event object
-	 * @private
-	 */
-	CellSelector.prototype._onmouseup = function (oEvent) {
+	CellSelector.prototype._clearScroller = function() {
+		if (this._mTimeouts.scrollTimerId) {
+			window.clearTimeout(this._mTimeouts.scrollTimerId);
+			this._mTimeouts.scrollTimerId = null;
+		}
+	};
+
+	CellSelector.prototype.onmouseup = function(oEvent) {
 		this._bMouseDown = false;
-		this._oEdgeInfo = null;
-		this._oBorderMoveInfo = null;
-		this._bScrollSelecting = false;
+		this._bBorderDown = false;
+		this._mClickedCell = undefined;
+		this._bScrolling = false;
+		this._clearScroller();
+	};
+
+	CellSelector.prototype._onborderdown = function(oEvent) {
+		this._oSession.border = Object.assign({}, this._oCurrentBorder);
+		this._bBorderDown = true;
+		this._bMouseDown = true;
+		// TODO: when borderdown, make "border" active
 	};
 
 	/**
@@ -498,29 +469,69 @@ sap.ui.define([
 		return oDomRef && oDomRef.closest(this.getConfig("selectableCells"));
 	};
 
+	CellSelector.prototype._inSelection = function(oTarget) {
+		var oInfo = this.getConfig("getCellInfo", this.getControl(), oTarget);
+		if (!oInfo || !this._oSession.mSource || !this._oSession.mTarget) {
+			return false;
+		}
+
+		var oBounds = this._getNormalizedBounds(this._oSession.mSource, this._oSession.mTarget);
+
+		return !(oInfo.rowIndex < oBounds.from.rowIndex || oInfo.rowIndex > oBounds.to.rowIndex
+			|| oInfo.colIndex < oBounds.from.colIndex || oInfo.colIndex > oBounds.to.colIndex);
+	};
+
+	CellSelector.prototype._startSelection = function(oEvent, bMove) {
+		if (oEvent.isMarked && oEvent.isMarked()) {
+			return;
+		}
+
+		var oTarget = this._getSelectableCell(oEvent.target);
+		if (!oTarget) {
+			return;
+		}
+
+		if (this._inSelection(oTarget) && !bMove) {
+			this.removeSelection();
+		} else {
+			var oCellInfo = this.getConfig("getCellInfo", this.getControl(), oTarget);
+			var mStart = this._mClickedCell ? this._mClickedCell : oCellInfo;
+
+			this._bSelecting = true;
+			this._oSession.mSource = oCellInfo;
+			this._selectCells(mStart, oCellInfo);
+			this.getConfig("focusCell", this.getControl(), oCellInfo);
+		}
+
+		oEvent.preventDefault();
+		oEvent.setMarked && oEvent.setMarked();
+	};
+
 	/**
-	 * Checks if the given target element is in the selection area.
-	 * @param {HTMLElement} oTarget target element
-	 * @returns {boolean} bInArea - true: in selection area, false: not in area
+	 * Selects the next cells in a specific direction (ROW, COL).
 	 * @private
 	 */
-	CellSelector.prototype._isInSelectionArea = function (oTarget) {
-		var oFocusInfo = this.getConfig("getCellInfo", this.getControl(), oTarget);
-		var bInArea = false;
-
-		if (oFocusInfo) {
-			var oNormalizedBounds = getNormalizedBounds(this._oSession.mSource, this._oSession.mTarget);
-			var aRows = this.getControl().getRows();
-
-			bInArea = !(oFocusInfo.rowIndex < oNormalizedBounds.from.rowIndex
-				|| oFocusInfo.rowIndex > oNormalizedBounds.to.rowIndex
-				|| oFocusInfo.colIndex < oNormalizedBounds.from.colIndex
-				|| oFocusInfo.colIndex > oNormalizedBounds.to.colIndex)
-				|| oFocusInfo.rowIndex == aRows[0].getIndex()
-				|| oFocusInfo.rowIndex == aRows[aRows.length - 1].getIndex();
+	CellSelector.prototype._getUpdatedBounds = function(iRowDiff, iColDiff, mOldFocus) {
+		var mBounds = this._getNormalizedBounds(this._oSession.mSource, this._oSession.mTarget);
+		var mFocus = Object.assign({}, mOldFocus);
+
+		// Determine which "side" to adjust according to current position
+		var sAdjustRowType = mFocus.rowIndex == mBounds.from.rowIndex ? "from" : "to";
+		var sAdjustColType = mFocus.colIndex == mBounds.from.colIndex ? "from" : "to";
+
+		mBounds[sAdjustRowType].rowIndex += iRowDiff;
+		mBounds[sAdjustColType].colIndex += iColDiff;
+
+		if (!this._bBorderDown) {
+			mFocus.rowIndex = Math.max(0, mFocus.rowIndex + iRowDiff);
+			mFocus.colIndex = Math.max(0, mFocus.colIndex + iColDiff);
 		}
 
-		return bInArea;
+		return {
+			from: mBounds.from,
+			to: mBounds.to,
+			focus: mFocus
+		};
 	};
 
 	/**
@@ -537,87 +548,27 @@ sap.ui.define([
 	 * @param {Object} mTo target cell coordinates
 	 * @param {int} mTo.rowIndex row index
 	 * @param {int} mTo.colIndex column index
-	 * @param {object} oOptions cell selection options
-	 * @param {object} oOptions.info options info
-	 * @param {object} oOptions.info.focus focus info
-	 * @param {boolean} oOptions.info.boundaryChange change of both both boundaries
 	 * @private
 	 */
-	CellSelector.prototype._selectCells = function (mFrom, mTo, oOptions) {
+	CellSelector.prototype._selectCells = function (mFrom, mTo, mFocus) {
 		if (!this._bSelecting) {
 			return;
 		}
 
-		this._oSession.aCells = [];
-		this._savePreviousSelectionAreas();
-		this._eraseSelection();
-
-		if (!this._oSession.mTarget) {
-			this._oSession.mTarget = mTo;
-		}
-		if (!mFrom) {
-			this._oSession.mSource = mFrom = mTo;
-		}
-		if (!oOptions) {
-			oOptions = {};
-		}
-
-		var mBounds = getNormalizedBounds(mFrom, mTo);
-
-		// "Select cells" - returns the area to draw on (boundaries), border information for drawing and selected cell information
-		var oSelection = this.getConfig("selectCells", this.getControl(), mBounds, oOptions);
+		this._clearSelection();
 
-		var mDrawableBounds = this._getDrawableBounds(mBounds);
-
-		if (!mDrawableBounds.from || !mDrawableBounds.to) {
-			// If there are no drawable bounds, do not continue.
-			return;
-		}
+		mFrom = mFrom ? mFrom : this._oSession.mSource;
+		mTo = mTo ? mTo : this._oSession.mTarget;
+		var mBounds = this._getNormalizedBounds(mFrom, mTo);
 
-		if (mBounds.to.rowIndex == Infinity) {
+		if (mTo.rowIndex == Infinity || mFrom.rowIndex == Infinity) {
 			this.getConfig("loadContexts", this.getControl(), mBounds.from.rowIndex, this.getRangeLimit());
 		}
 
-		var oBorderOptions = this._getBorderOptions(mBounds, mDrawableBounds);
-		this._oSession.aCells = oSelection.cells;
-		this._drawSelection(mDrawableBounds, oBorderOptions);
+		this._drawSelection(mBounds);
 
-		if (!oOptions.info || (oOptions.info && !oOptions.info.boundaryChange)) {
-			// Set new source and target positions
-			this._oSession.mSource = mFrom;
-			this._oSession.mTarget = mTo;
-		} else {
-			// If it is something like column, row (begin/end/whole) selection, the source and target positions need to be adjusted to the normalized bounds
-			this._oSession.mSource = mBounds.from;
-			this._oSession.mTarget = mBounds.to;
-		}
-	};
-
-	CellSelector.prototype._getDrawableBounds = function (mBounds) {
-		var mDrawableBounds = {from: {}, to: {}};
-
-		var mRange = this.getConfig("getVisibleRange", this.getControl(), mBounds); // from, to
-
-		if (mBounds.to.rowIndex < mRange.from.rowIndex || mBounds.from.rowIndex > mRange.to.rowIndex) {
-			mDrawableBounds = {};
-		} else {
-			mDrawableBounds.from.rowIndex = Math.max(mBounds.from.rowIndex, mRange.from.rowIndex);
-			mDrawableBounds.from.colIndex = Math.max(mBounds.from.colIndex, mRange.from.colIndex);
-			mDrawableBounds.to.rowIndex = Math.min(mBounds.to.rowIndex, mRange.to.rowIndex);
-			mDrawableBounds.to.colIndex = Math.min(mBounds.to.colIndex, mRange.to.colIndex);
-		}
-		return mDrawableBounds;
-	};
-
-	CellSelector.prototype._getBorderOptions = function (mBounds, mDrawableBounds) {
-		var oBorderOptions = {top: true, bottom: true};
-		if (mDrawableBounds.from.rowIndex > mBounds.from.rowIndex) {
-			oBorderOptions.top = false;
-		}
-		if (mDrawableBounds.to.rowIndex < mBounds.to.rowIndex) {
-			oBorderOptions.bottom = false;
-		}
-		return oBorderOptions;
+		this._oSession.mSource = mFrom;
+		this._oSession.mTarget = mTo;
 	};
 
 	/**
@@ -627,237 +578,136 @@ sap.ui.define([
 	 * @param {Object} mBounds.to to position
 	 * @private
 	 */
-	CellSelector.prototype._drawSelection = function (mBounds, oOptions) {
+	CellSelector.prototype._drawSelection = function (mBounds) {
 		if (!mBounds.from || !mBounds.to) {
 			return;
 		}
 
-		var aSelectionAreas = this.getConfig("getSelectionAreas", this.getControl(), mBounds.from, mBounds.to);
-
-		// Iterate through every selection area
-		aSelectionAreas.forEach(function (oArea, iIndex) {
-			var oTableDomRef = this.getControl().getDomRef(oArea.container),
-				oFromDomRef = this.getConfig("getCellRef", this.getControl(), oArea.from),
-				oToDomRef = this.getConfig("getCellRef", this.getControl(), oArea.to);
-			var mFromRect, mToRect, oTableRect;
-			var oStyle = {};
-
-			if (!oFromDomRef || !oToDomRef) {
-				return;
+		this._oSession.cellRefs = [];
+		for (var iRow = mBounds.from.rowIndex; iRow <= mBounds.to.rowIndex; iRow++) {
+			for (var iCol = mBounds.from.colIndex; iCol <= mBounds.to.colIndex; iCol++) {
+				var oCellRef = this.getConfig("getCellRef", this.getControl(), {rowIndex: iRow, colIndex: iCol});
+				if (oCellRef) {
+					oCellRef.classList.toggle("sapMPluginsCellSelectorTop", iRow == mBounds.from.rowIndex);
+					oCellRef.classList.toggle("sapMPluginsCellSelectorBottom", iRow == mBounds.to.rowIndex);
+					oCellRef.classList.toggle("sapMPluginsCellSelectorRight", iCol == mBounds.to.colIndex);
+					oCellRef.classList.toggle("sapMPluginsCellSelectorSelected", true);
+					oCellRef.setAttribute("aria-selected", "true");
+					this._oSession.cellRefs.push(oCellRef);
+
+					// Grid Table has only border-right, so adding border-left would change the size of the column. Instead, for the left border, take the previous cell and set border-right.
+					if (iCol == mBounds.from.colIndex) {
+						const oPrevCellRef = this.getConfig("getCellRef", this.getControl(), {rowIndex: iRow, colIndex: iCol - 1});
+						let sClass = "sapMPluginsCellSelectorLeft";
+						if (oPrevCellRef) {
+							oCellRef = oPrevCellRef;
+							sClass = "sapMPluginsCellSelectorRight";
+							this._oSession.cellRefs.push(oCellRef);
+						}
+						oCellRef.classList.toggle(sClass, iCol == mBounds.from.colIndex);
+					}
+				}
 			}
+		}
+	};
 
-			mFromRect = oFromDomRef.getBoundingClientRect();
-			mToRect = oToDomRef.getBoundingClientRect();
-			oTableRect = oTableDomRef.getBoundingClientRect();
+	CellSelector.prototype._updateResizers = function(mBounds, iPositionX, iPositionY) {
+		var oResizer = this._getResizer();
 
-			// There are instances, where no offset needs to be factored in (e.g. fixed columns).
-			var mOffsetLeft = oArea.hasOffset ? oTableRect.left : 0;
+		var oFromRef = this.getConfig("getCellRef", this.getControl(), mBounds.from, false),
+			oToRef = this.getConfig("getCellRef", this.getControl(), mBounds.to, false);
+		var mOutOfBounds = { 0: false, 1: false }; // 0: top, 1: bottom
 
-			oStyle.left = Math.min(mFromRect.left, mToRect.left) - mOffsetLeft;
-			oStyle.top = Math.min(mFromRect.top, mToRect.top) - oTableRect.top;
-			oStyle.width = Math.max(mToRect.right, mFromRect.right) - oStyle.left - mOffsetLeft;
-			oStyle.height = Math.max(mToRect.bottom, mFromRect.bottom) - oStyle.top - oTableRect.top;
+		if (!oFromRef) {
+			mOutOfBounds[0] = true;
+			oFromRef = this.getConfig("getCellRef", this.getControl(), mBounds.from, true);
+		}
 
-			oStyle.noBorderTop = !oOptions.top;
-			oStyle.noBorderBottom = !oOptions.bottom;
+		if (!oToRef) {
+			mOutOfBounds[1] = true;
+			oToRef = this.getConfig("getCellRef", this.getControl(), mBounds.to, true);
+		}
 
-			// if there are multiple areas omit the left/right border accordingly
-			oStyle.noBorderRight = aSelectionAreas.length > 1 && iIndex < (aSelectionAreas.length - 1) ? true : false;
-			oStyle.noBorderLeft = aSelectionAreas.length > 1 && iIndex > 0 ? true : false;
+		var oFromRect = oFromRef.getBoundingClientRect(),
+			oToRect = oToRef.getBoundingClientRect(),
+			oTableRect = this.getControl().getDomRef().getBoundingClientRect();
 
-			// Draw selection area
-			this._drawSelectionArea(oStyle, oArea.container);
+		var mStyleMap = {
+			x: { 0: oFromRect.left, 1: oToRect.left + oToRect.width },
+			y: { 0: oFromRect.top - oTableRect.top, 1: oToRect.top + oToRect.height - oTableRect.top }
+		};
+		var mDiffMap = {
+			x: { 0: iPositionX - oFromRect.left, 1: iPositionX - oToRect.right },
+			y: { 0: iPositionY - oFromRect.top, 1: iPositionY - oToRect.bottom }
+		};
 
-			// Draw Edge Handles
-			if (!this._oSession.oEdge[oArea.container]) {
-				this._oSession.oEdge[oArea.container] = {};
-			}
-			this._drawEdgeHandle(oStyle, oArea.container, "NE");
-			this._drawEdgeHandle(oStyle, oArea.container, "SE");
-			this._drawEdgeHandle(oStyle, oArea.container, "SW");
-			this._drawEdgeHandle(oStyle, oArea.container, "NW");
-
-			// Draw Border Lines
-			if (!this._oSession.oBorderLine[oArea.container]) {
-				this._oSession.oBorderLine[oArea.container] = {};
-			}
-			this._drawBorderLine(oStyle, oArea.container, "N");
-			this._drawBorderLine(oStyle, oArea.container, "E");
-			this._drawBorderLine(oStyle, oArea.container, "S");
-			this._drawBorderLine(oStyle, oArea.container, "W");
-		}.bind(this));
-	};
+		// 2 Bit Flags:
+		// Y Direction | X Direction
+		// 0           | 0
+		var mFlags = 0;
+		mFlags |= Math.abs(mDiffMap.x[0]) < Math.abs(mDiffMap.x[1]) ? 0 : 1;
+		mFlags |= Math.abs(mDiffMap.y[0]) < Math.abs(mDiffMap.y[1]) ? 0 : 2;
 
-	/**
-	 * Draw the selection area for the given style in the given container.
-	 * @param {Object} oTargetStyle object containing style information (left, top, width, height)
-	 * @param {float} oTargetStyle.left left position
-	 * @param {float} oTargetStyle.top top position
-	 * @param {float} oTargetStyle.width width
-	 * @param {float} oTargetStyle.height height
-	 * @param {string} sContainer name of the container
-	 * @private
-	 */
-	CellSelector.prototype._drawSelectionArea = function (oTargetStyle, sContainer) {
-		if (!this._oSession.oCanvas[sContainer]) {
-			this._oSession.oCanvas[sContainer] = document.createElement("div");
-			this._oSession.oCanvas[sContainer].className = CSS_CLASS + "Canvas";
-		}
-		if (!this._oSession.oCanvas[sContainer].isConnected) {
-			this.getControl().getDomRef(sContainer).append(this._oSession.oCanvas[sContainer]);
+		var iDiffX = Math.abs(mDiffMap.x[mFlags & 1]), iDiffY = Math.abs(mDiffMap.y[(mFlags >> 1) & 1]);
+		if (iDiffX > 10 && iDiffY > 10 || iDiffX > 10 && mOutOfBounds[(mFlags >> 1) & 1]) {
+			return;
 		}
 
-		var oStyle = this._oSession.oCanvas[sContainer].style;
-		oStyle.left = oTargetStyle.left + "px";
-		oStyle.top = oTargetStyle.top + "px";
-		oStyle.width = oTargetStyle.width + "px";
-		oStyle.height = oTargetStyle.height + "px";
-		oStyle.display = "block";
-
-		oStyle.borderTop = oTargetStyle.noBorderTop ? "0px" : "";
-		oStyle.borderBottom = oTargetStyle.noBorderBottom ? "0px" : "";
-		oStyle.borderRight = oTargetStyle.noBorderRight ? "0px" : "";
-		oStyle.borderLeft = oTargetStyle.noBorderLeft ? "0px" : "";
-	};
+		oResizer.style.left = iDiffX <= 10 ? mStyleMap.x[mFlags & 1] + "px" : mStyleMap.x[0] + "px";
+		oResizer.style.top = iDiffY <= 10 ? mStyleMap.y[(mFlags >> 1) & 1] + "px" : mStyleMap.y[0] + "px";
+		oResizer.style.width = iDiffX <= 10 ? "" : oToRect.right - oFromRect.left + "px";
+		oResizer.style.height = iDiffX <= 10 ? oToRect.bottom - oFromRect.top + "px" : "";
 
-	/**
-	 * Draws the edge handles, which can be used to extend the cell selection in any direction.
-	 * @param {object} oTargetStyle object containing style information
-	 * @param {String} sContainer container name
-	 * @param {String} sFacing direction of edge
-	 * @private
-	 */
-	CellSelector.prototype._drawEdgeHandle = function (oTargetStyle, sContainer, sFacing) {
-		if (!this._oSession.oEdge[sContainer][sFacing]) {
-			this._oSession.oEdge[sContainer][sFacing] = {};
+		const bXinRange = iDiffX <= 10, bYinRange = iDiffY <= 10;
+		oResizer.classList.toggle("sapMPluginsVerticalBorder", bXinRange);
+		oResizer.classList.toggle("sapMPluginsHorizontalBorder", bYinRange);
+		oResizer.classList.toggle("sapMPluginsEdge", bXinRange && bYinRange);
+		oResizer.classList.toggle("sapMPluginsNESW", bXinRange && bYinRange && (mFlags == 2 || mFlags == 1));
+		oResizer.classList.toggle("sapMPluginsNWSE", bXinRange && bYinRange && (mFlags == 3 || mFlags == 0));
 
-			this._oSession.oEdge[sContainer][sFacing].wrapper = document.createElement("div");
-			this._oSession.oEdge[sContainer][sFacing].wrapper.className = CSS_CLASS + "EdgeWrapper";
+		this._oCurrentBorder = {};
+		if (bXinRange) {
+			this._oCurrentBorder.colIndex = mFlags & 1 ? mBounds.to.colIndex : mBounds.from.colIndex;
+			this._oCurrentBorder.type = DIRECTION.COL;
 		}
-		if (!this._oSession.oEdge[sContainer][sFacing].wrapper.isConnected) {
-			this._oSession.oCanvas[sContainer].append(this._oSession.oEdge[sContainer][sFacing].wrapper);
-			this._oSession.oEdge[sContainer][sFacing].wrapper.addEventListener("mousedown", this._onHandleMove.bind(this, sFacing, false));
-		}
-		this._oSession.oEdge[sContainer][sFacing].wrapper.classList.add("sapMPluginsEdge" + sFacing);
-	};
 
-	/**
-	 * Draws a line for the border, which can be dragged to extend selection.
-	 * @param {object} oTargetStyle object containing style information
-	 * @param {String} sContainer container name
-	 * @param {String} sFacing direction of border
-	 * @private
-	 */
-	CellSelector.prototype._drawBorderLine = function (oTargetStyle, sContainer, sFacing) {
-		if (!this._oSession.oBorderLine[sContainer][sFacing]) {
-			this._oSession.oBorderLine[sContainer][sFacing] = document.createElement("div");
-			this._oSession.oBorderLine[sContainer][sFacing].className = CSS_CLASS + "BorderLine";
+		if (bYinRange) {
+			this._oCurrentBorder.rowIndex = (mFlags >> 1) & 1 ? mBounds.to.rowIndex : mBounds.from.rowIndex;
+			this._oCurrentBorder.type = DIRECTION.ROW;
 		}
-		if (!this._oSession.oBorderLine[sContainer][sFacing].isConnected) {
-			this._oSession.oCanvas[sContainer].append(this._oSession.oBorderLine[sContainer][sFacing]);
-			this._oSession.oBorderLine[sContainer][sFacing].addEventListener("mousedown", this._onHandleMove.bind(this, sFacing, true));
-		}
-
-		var oStyle = this._oSession.oBorderLine[sContainer][sFacing].style;
-		this._oSession.oBorderLine[sContainer][sFacing].classList.add("sapMPluginsBorder" + sFacing);
-		if (sFacing === "N" || sFacing === "S") {
-			oStyle.width = oTargetStyle.width + "px";
-		} else {
-			oStyle.height = oTargetStyle.height + "px";
-		}
-		oStyle.display = "block";
 	};
 
-	/**
-	 * Clears the currently selected cells.
-	 */
-	CellSelector.prototype.clearSelection = function () {
-		this._bSelecting = false;
-		this._eraseSelection();
-		this._oSession.mSource = null;
-		this._oSession.mTarget = null;
-	};
+	CellSelector.prototype._getResizer = function() {
+		if (!this._oResizer) {
+			this._oResizer = document.createElement("div");
+			this._oResizer.setAttribute("id", "cs-rsz");
+			this._oResizer.classList.add("sapMPluginsCellSelectorRsz");
 
-	/**
-	 * Erases the selection
-	 * @private
-	 */
-	CellSelector.prototype._eraseSelection = function () {
-		Object.values(this._oSession.oCanvas).forEach(function (oArea) {
-			oArea.style = "";
-		});
-		Object.values(this._oSession.oBorderLine).forEach(function (oArea) {
-			Object.values(oArea).forEach(function (oBorder) {
-				oBorder.style = "";
-			});
-		});
-		Object.values(this._oSession.oEdge).forEach(function (oArea) {
-			Object.values(oArea).forEach(function (oEdge) {
-				Object.values(oEdge).forEach(function (oEdgePart) {
-					oEdgePart.style = "";
-				});
-			});
-		});
-	};
+			this._oResizer.addEventListener("mousedown", this._onborderdown.bind(this));
 
-	/**
-	 * A special scroll handler, which handles selection accordingly when the table is scrolling vertically.
-	 * @param {sap.ui.base.Event} oEvent scroll event
-	 * @private
-	 */
-	CellSelector.prototype._handleScroll = function (oEvent) {
-		// Rerender selection
-		if (!this._bSelecting) {
-			return;
+			this.getControl().getDomRef().appendChild(this._oResizer);
 		}
-		this._selectCells(this._oSession.mSource, this._oSession.mTarget);
+		return this._oResizer;
 	};
 
-	/**
-	 * Saves all the previous selection areas for later reference and calculation.
-	 * @private
-	 */
-	CellSelector.prototype._savePreviousSelectionAreas = function () {
-		Object.entries(this._oSession.oCanvas).forEach(function (aEntries) {
-			var sContainer = aEntries[0], oArea = aEntries[1];
-			if (oArea.style.left && oArea.style.top && oArea.style.width && oArea.style.height) {
-				if (!this._oSession.previousSelection) {
-					this._oSession.previousSelection = {};
-				}
-				this._oSession.previousSelection[sContainer] = {
-					top: parseFloat(oArea.style.top),
-					left: parseFloat(oArea.style.left),
-					width: parseFloat(oArea.style.width),
-					height: parseFloat(oArea.style.height)
-				};
-			}
-		}.bind(this));
+	CellSelector.prototype._clearSelection = function() {
+		this._oSession.cellRefs.forEach(function(oCellRef) {
+			oCellRef.classList.remove("sapMPluginsCellSelectorSelected", "sapMPluginsCellSelectorTop", "sapMPluginsCellSelectorBottom", "sapMPluginsCellSelectorLeft", "sapMPluginsCellSelectorRight");
+			oCellRef.removeAttribute("aria-selected");
+		});
+		var oResizer = this._getResizer();
+		oResizer.style.left = "-10000px";
+		oResizer.style.top = "-10000px";
 	};
 
 	/**
-	 * Retrieves the current mouse position and returns info on whether the mouse is inside the control or not.
-	 * @param {String} sContainer container name
-	 * @param {number} iX x position of mouse
-	 * @param {y} iY y position of mouse
-	 * @returns {object} object containing position information for x, y
+	 * Remove the current selection block.
 	 */
-	CellSelector.prototype._getMousePosition = function (sContainer, iX, iY) {
-		var oContainerRef = this.getControl().getDomRef(sContainer);
-		var oPosition = {x: MOUSE_POSITION.IN, y: MOUSE_POSITION.IN};
-		if (oContainerRef) {
-			var oContainerRect = oContainerRef.getBoundingClientRect();
-			if (iY > oContainerRect.bottom) {
-				oPosition.y = MOUSE_POSITION.BELOW;
-			} else if (iY < oContainerRect.top) {
-				oPosition.y = MOUSE_POSITION.ABOVE;
-			}
-			if (iX > oContainerRect.right) {
-				oPosition.x = MOUSE_POSITION.RIGHT;
-			} else if (iX < oContainerRect.left) {
-				oPosition.x = MOUSE_POSITION.LEFT;
-			}
-		}
-		return oPosition;
+	CellSelector.prototype.removeSelection = function () {
+		this._clearSelection();
+
+		this._bSelecting = false;
+		this._oSession = { cellRefs: [] };
 	};
 
 	/**
@@ -872,12 +722,23 @@ sap.ui.define([
 	 * @param {int} mTo.colIndex column index
 	 * @returns object containing coordinates for from and to
 	 */
-	function getNormalizedBounds(mFrom, mTo) {
+	CellSelector.prototype._getNormalizedBounds = function(mFrom, mTo, bKeepBounds) {
+		const iMaxColumns = this.getConfig("getVisibleColumns", this.getControl()).length;
+		const iMaxRows = this.getRangeLimit() == 0 ? this.getConfig("getRowCount", this.getControl()) : this.getRangeLimit();
+
+		let toRowIndex = Math.max(mFrom.rowIndex, mTo.rowIndex);
+		let toColIndex =  Math.max(mFrom.colIndex, mTo.colIndex);
+
+		if (!bKeepBounds) {
+			toRowIndex = Math.min(iMaxRows - 1, toRowIndex);
+			toColIndex = Math.min(iMaxColumns, toColIndex);
+		}
+
 		return {
-			from: {rowIndex: Math.min(mFrom.rowIndex, mTo.rowIndex), colIndex: Math.min(mFrom.colIndex, mTo.colIndex)},
-			to: {rowIndex: Math.max(mFrom.rowIndex, mTo.rowIndex), colIndex: Math.max(mFrom.colIndex, mTo.colIndex)}
+			from: {rowIndex: Math.max(0, Math.min(mFrom.rowIndex, mTo.rowIndex)), colIndex: Math.max(0, Math.min(mFrom.colIndex, mTo.colIndex))},
+			to: {rowIndex: toRowIndex, colIndex: toColIndex}
 		};
-	}
+	};
 
 	/**
 	 * Check if the given key combination applies to the event.
@@ -893,33 +754,9 @@ sap.ui.define([
 
 	PluginBase.setConfigs({
 		"sap.ui.table.Table": {
-			container: "tableCCnt",
-			scrollContainer: "sapUiTableCtrlScr",
 			selectableCells: ".sapUiTableDataCell",
-			scrollEvent: "firstVisibleRowChanged",
-			onActivate: function (oControl, oPlugin) {
-				var sEvent = "rowSelectionChange";
-				var oSelectionPlugin = oControl;
-				oControl.getPlugins().forEach(function (oPlugin) {
-					if (oPlugin.isA("sap.ui.table.plugins.SelectionPlugin")) {
-						sEvent = "selectionChange";
-						oSelectionPlugin = oPlugin;
-					}
-				});
-				oSelectionPlugin.attachEvent(sEvent, oPlugin.clearSelection, oPlugin);
-			},
-			onDeactivate: function (oControl, oPlugin) {
-				var sEvent = "rowSelectionChange";
-				var oSelectionPlugin = oControl;
-				oControl.getPlugins().forEach(function (oPlugin) {
-					if (oPlugin.isA("sap.ui.table.plugins.SelectionPlugin")) {
-						sEvent = "selectionChange";
-						oSelectionPlugin = oPlugin;
-						return;
-					}
-				});
-				oSelectionPlugin.detachEvent(sEvent, oPlugin.clearSelection, oPlugin);
-			},
+			scrollArea: "sapUiTableCtrlScr",
+			scrollEvent: "_rowsUpdated",
 			/**
 			 * Get visible columns of the table.
 			 * @param {sap.ui.table.Table} oTable table instance
@@ -930,13 +767,8 @@ sap.ui.define([
 					return oColumn.getDomRef();
 				});
 			},
-			/**
-			 * Checks if the selection is enabled for the control.
-			 * @param {sap.ui.core.Control} oControl control instance
-			 * @returns {boolean} is selection enabled or not
-			 */
-			isSelectionEnabled: function (oControl) {
-				return !(oControl.getSelectionBehavior() !== "RowSelector" || oControl.getSelectionMode() == "None");
+			getRowCount: function(oTable) {
+				return oTable._getTotalRowCount();
 			},
 			/**
 			 * Retrieve the cell reference for a given position
@@ -946,14 +778,33 @@ sap.ui.define([
 			 * @param {int} mPosition.colIndex column index
 			 * @returns {HTMLElement} cell's DOM element
 			 */
-			getCellRef: function (oTable, mPosition) {
-				var oRow = this._getRowByIndex(oTable, mPosition.rowIndex);
+			getCellRef: function (oTable, mPosition, bRange) {
+				var aRows = oTable.getRows();
+				var oRow = aRows.find(function(oRow) {
+					return oRow.getIndex() == mPosition.rowIndex;
+				});
 				if (oRow) {
 					var oColumn = this.getVisibleColumns(oTable)[mPosition.colIndex];
 					var oCell = oColumn && oRow.getCells()[mPosition.colIndex];
 					if (oCell) {
 						return oCell.$().closest(this.selectableCells)[0];
 					}
+				} else if (bRange) {
+					if (aRows[0].getIndex() > mPosition.rowIndex) {
+						oRow = aRows[0];
+						var oColumn = this.getVisibleColumns(oTable)[mPosition.colIndex];
+						var oCell = oColumn && oRow.getCells()[mPosition.colIndex];
+						if (oCell) {
+							return oCell.$().closest(this.selectableCells)[0];
+						}
+					} else if (aRows[aRows.length - 1].getIndex() < mPosition.rowIndex) {
+						oRow = aRows[aRows.length - 1];
+						var oColumn = this.getVisibleColumns(oTable)[mPosition.colIndex];
+						var oCell = oColumn && oRow.getCells()[mPosition.colIndex];
+						if (oCell) {
+							return oCell.$().closest(this.selectableCells)[0];
+						}
+					}
 				}
 			},
 			/**
@@ -964,113 +815,10 @@ sap.ui.define([
 			 */
 			getCellInfo: function (oTable, oTarget) {
 				return {
-					rowIndex: this.rowIndex(null, oTarget),
-					colIndex: this.colIndex(oTable, oTarget)
-				};
-			},
-			/**
-			 * Retrieve the visible row range for the given table.
-			 * @param {sap.ui.table.Table} oTable table instance
-			 * @returns {Object} object containing from - to table range
-			 */
-			getVisibleRange: function (oTable) {
-				var aRows = oTable.getRows();
-				return {
-					from: {rowIndex: aRows[0].getIndex(), colIndex: 0},
-					to: {rowIndex: aRows[aRows.length - 1].getIndex(), colIndex: this.getVisibleColumns(oTable).length - 1}
+					rowIndex: Element.closestTo(oTarget, true).getIndex(),
+					colIndex: this.getVisibleColumns(oTable).indexOf(Core.byId(oTarget.getAttribute("data-sap-ui-colid")))
 				};
 			},
-			/**
-			 * Returns the controls' available selection areas for the given bounds.
-			 *
-			 * Note: The order of the areas is from left to right. Area at index 0 is the leftmost area, etc.
-			 * @param {sap.ui.table.Table} oTable table instance
-			 * @param {Object} mFrom from position
-			 * @param {Object} mTo to position
-			 * @returns {Object[]} array of objects (container, from, to) containing information for each area. It contains the name of the container
-			 * and the area that will be selected in said container.
-			 */
-			getSelectionAreas: function (oTable, mFrom, mTo) {
-				// push selection areas from left to right
-				var aAreas = [], iFixedColumnCount = oTable.getFixedColumnCount();
-				if (iFixedColumnCount > 0 && (mFrom.colIndex < iFixedColumnCount || mFrom.colIndex === -Infinity)) {
-					var iToCol = mTo.colIndex === Infinity ? iFixedColumnCount - 1 : Math.min(mTo.colIndex, iFixedColumnCount - 1);
-					var mFixedFrom = {rowIndex: mFrom.rowIndex, colIndex: mFrom.colIndex},
-						mFixedTo = {rowIndex: mTo.rowIndex, colIndex: iToCol};
-					aAreas.push({container: "sapUiTableCtrlScrFixed", from: mFixedFrom, to: mFixedTo});
-				}
-				if (mTo.colIndex >= iFixedColumnCount || mTo.colIndex === Infinity) {
-					aAreas.push({container: "tableCtrlCnt", from: mFrom, to: mTo, hasOffset: true});
-				}
-				return aAreas;
-			},
-			/**
-			 * Retrieves selected cells and returns their position and the boundaries of the selection area fitted to the table and its border options.
-			 *
-			 * Note: As the selection area may vary based on control-specific settings (e.g. SingleSelection), the information is returned as well.
-			 * @param {sap.ui.table.Table} oTable table instance
-			 * @param {Object} mSelectionBounds selection options
-			 * @param {Object} oOptions selection options
-			 * @returns {Object} oSelection object containg <code>bounds</code> (selection bounds) and <code>cells</code> (selected cell positions)
-			 * @returns {Object} oSelection.bounds
-			 * @returns {int[]} oSelection.cells
-			 */
-			selectCells: function (oTable, mSelectionBounds, oOptions) {
-				var mBounds = {}, oBorderOptions = {top: true, bottom: true};
-				var iBindingLength = oTable.getBinding("rows").getLength();
-				mBounds.from = Object.assign({}, mSelectionBounds.from);
-				mBounds.to = Object.assign({}, mSelectionBounds.to);
-
-				mBounds.from.rowIndex = Math.max(mBounds.from.rowIndex, 0);
-				mBounds.from.colIndex = Math.max(mBounds.from.colIndex, 0);
-
-				mBounds.to.rowIndex = Math.min(mBounds.to.rowIndex, iBindingLength);
-				mBounds.to.colIndex = Math.min(mBounds.to.colIndex, this.getVisibleColumns(oTable).length - 1);
-
-				var aCells = [];
-
-				// Replace MIN/MAX with according number for focus object
-				if (oOptions && oOptions.info) {
-					oOptions.info.focus.rowIndex = Math.min(Math.max(oOptions.info.focus.rowIndex, 0), iBindingLength);
-					oOptions.info.focus.colIndex = Math.min(Math.max(oOptions.info.focus.colIndex, 0), this.getVisibleColumns(oTable).length - 1);
-					this._focusCell(oTable, oOptions.info.focus, oOptions.info.direction);
-				}
-
-				// If table is in Single Selection Mode, only select the row with focus in it
-				if (mBounds.from.colIndex === 0 && mBounds.to.colIndex === (this.getVisibleColumns(oTable).length - 1) && oTable.getSelectionMode() == "Single") {
-					mBounds.from.rowIndex = mSelectionBounds.from.rowIndex = oOptions.info.focus.rowIndex;
-					mBounds.to.rowIndex = mSelectionBounds.to.rowIndex = oOptions.info.focus.rowIndex;
-				}
-
-				for (var iRow = mBounds.from.rowIndex; iRow <= mBounds.to.rowIndex; iRow++) {
-					var oRow = this._getRowByIndex(oTable, iRow);
-					if (oRow) {
-						for (var iCol = mBounds.from.colIndex; iCol <= mBounds.to.colIndex; iCol++) {
-							aCells.push([iRow, iCol]);
-						}
-					}
-				}
-
-				return {borderOptions: oBorderOptions, cells: aCells};
-			},
-			/**
-			 * Retrieves the row index for the given cell's DOM reference.
-			 * @param {sap.ui.table.Table} oTable table instance
-			 * @param {HTMLElement} oCellDomRef DOM reference of cell
-			 * @returns {int} row index
-			 */
-			rowIndex: function (oTable, oCellDomRef) {
-				return Element.closestTo(oCellDomRef, true).getIndex();
-			},
-			/**
-			 * Retrieves the column index for the given cell's DOM reference.
-			 * @param {sap.ui.table.Table} oTable table instance
-			 * @param {HTMLElement} oCellDomRef DOM reference of cell
-			 * @returns {int} column index
-			 */
-			colIndex: function (oTable, oCellDomRef) {
-				return this.getVisibleColumns(oTable).indexOf(Core.byId(oCellDomRef.getAttribute("data-sap-ui-colid")));
-			},
 			/**
 			 * Loads contexts according to the provided parameters without changing the binding's state.
 			 *
@@ -1106,74 +854,61 @@ sap.ui.define([
 				}
 				return aContexts;
 			},
-			columnByIndex: function(oTable, iColIndex) {
-				var oColumn = this.getVisibleColumns(oTable)[iColIndex];
-				if (!oColumn.getVisible()) {
-					return;
-				}
-				return oColumn;
-			},
-			isNavigatableCell: function (oTable, mPosition) {
-				if ((mPosition.rowIndex < 0 || mPosition.rowIndex >= oTable.getBinding("rows").getLength()
-					|| mPosition.colIndex < 0 || mPosition.colIndex >= this.getVisibleColumns(oTable).length)
-					&& !(mPosition.rowIndex == -Infinity || mPosition.rowIndex == Infinity
-					|| mPosition.colIndex == -Infinity || mPosition.colIndex == Infinity)) {
-					return false;
-				}
-				return true;
-			},
 			/**
-			 * Scroll one row up or down based on the given direction.
-			 * @param {sap.ui.table.Table} oTable table instance
-			 * @param {int} iDirection scroll direction
-			 * @param {int} iRow row index
+			 * Select rows beginning at iFrom to iTo.
+			 * @param {sap.ui.table.Table} oTable The table instance
+			 * @param {int} iFrom starting row index
+			 * @param {int} iTo ending row index
+			 * @param {int} mFocus focused row index
 			 */
-			_scrollRow: function (oTable, iDirection, iRow) {
-				var iFirstRow = oTable.getFirstVisibleRow();
-				if (iRow >= 0 && iRow < oTable.getBinding("rows").getLength()) {
-					if (oTable.getFixedRowCount() > 0 && iRow == oTable.getFixedRowCount()) {
-						oTable.setFirstVisibleRow(0);
-					} else {
-						iDirection == SELECTION_DIRECTION.NEXT ? iFirstRow++ : iFirstRow--;
-						iFirstRow = iFirstRow < 0 ? 0 : iFirstRow;
-						oTable.setFirstVisibleRow(iFirstRow);
-					}
+			selectRows: function(oTable, iFrom, iTo, iFocus) {
+				var oSelectionOwner = PluginBase.getPlugin(oTable, "sap.ui.table.plugins.SelectionPlugin") || oTable;
+				var sSelectionMode = oTable.getSelectionMode();
+
+				if (sSelectionMode == "None") {
+					return false;
+				} else if (sSelectionMode == "Single") {
+					iFrom = iTo = iFocus;
+				}
+
+				if (oSelectionOwner.addSelectionInterval) {
+					oSelectionOwner.addSelectionInterval(iFrom, iTo);
+					return true;
 				}
-			},
-			/**
-			 * Focus the specified cell and scroll if necessary.
-			 * @param {sap.ui.table.Table} oTable table instance
-			 * @param {Object} mPosition position object
-			 * @param {int} mPosition.rowIndex row index
-			 * @param {int} mPosition.colIndex column index
-			 * @param {int} iDirection scroll direction
-			 */
-			_focusCell: function (oTable, mPosition, iDirection) {
-				var oCellRef = this.getCellRef(oTable, mPosition);
 
+				// TODO: Handle V4 correctly. Currrently only selects visible rows
+				var aRows = oTable.getRows().filter(function(oRow) {
+					return oRow.getIndex() >= iFrom && oRow.getIndex() <= iTo;
+				});
+				aRows.forEach(function(oRow) {
+					oSelectionOwner.setSelected(oRow, true);
+				});
+				return true;
+			},
+			focusCell: function(oTable, mFocus, bForward) {
+				var oCellRef = this.getCellRef(oTable, mFocus);
 				if (!oCellRef) {
-					this._scrollRow(oTable, iDirection, mPosition.rowIndex);
-					oCellRef = this.getCellRef(oTable, mPosition);
-					if (!oCellRef) {
-						oTable.setFirstVisibleRow(mPosition.rowIndex);
-						oCellRef = this.getCellRef(oTable, mPosition);
-					}
+					this.scroll(oTable, bForward, true);
+					return;
 				}
-				oCellRef &&	oCellRef.focus();
+				oCellRef.focus();
 			},
-			/**
-			 * Retrieve a row by its index.
-			 * @param {sap.ui.table.Table} oTable table instance
-			 * @param {int} iRowIndex row index
-			 * @returns {sap.ui.table.Row|null} row instance
-			 */
-			_getRowByIndex: function (oTable, iRowIndex) {
-				var aItems = oTable.getRows();
-				for (var i = 0; i < aItems.length; i++) {
-					if (aItems[i].getIndex() == iRowIndex) {
-						return aItems[i];
+			scroll: function(oTable, bForward, bVertical) {
+				if (bVertical) {
+					var iFirstVisibleRowIndex = oTable.getFirstVisibleRow();
+					var iIndex = bForward ? iFirstVisibleRowIndex + 1 : iFirstVisibleRowIndex - 1;
+					if (iIndex >= 0 && iIndex != iFirstVisibleRowIndex) {
+						oTable.setFirstVisibleRow(iIndex);
+						return Promise.resolve();
 					}
+				} else {
+					var oScrollBar = oTable._getScrollExtension().getHorizontalScrollbar();
+					var iScrollDiff = Math.pow(-1, +!bForward) * 10;
+
+					oScrollBar.scrollLeft = Math.max(0, oScrollBar.scrollLeft + iScrollDiff);
+					return Promise.resolve();
 				}
+				return false;
 			}
 		}
 	}, CellSelector);