@openui5/sap.ui.table 1.117.0 → 1.118.0

package/src/sap/ui/table/plugins/ODataV4Selection.js

@@ -88,7 +88,6 @@ sap.ui.define([
 
 		this._bLimitReached = false;
 		this.oDeselectAllIcon = oIcon;
-		this._oNotificationPopover = null;
 		this._oRangeSelectionStartContext = null;
 	};
 
@@ -99,11 +98,6 @@ sap.ui.define([
 			this.oDeselectAllIcon.destroy();
 			this.oDeselectAllIcon = null;
 		}
-
-		if (this._oNotificationPopover) {
-			this._oNotificationPopover.destroy();
-			this._oNotificationPopover = null;
-		}
 	};
 
 	ODataV4Selection.prototype.onActivate = function(oTable) {
@@ -116,10 +110,6 @@ sap.ui.define([
 		oTable.detachFirstVisibleRowChanged(this.onFirstVisibleRowChange, this);
 		oTable.setProperty("selectionMode", TableSelectionMode.None);
 		this.clearSelection();
-
-		if (this._oNotificationPopover) {
-			this._oNotificationPopover.close();
-		}
 	};
 
 	ODataV4Selection.prototype.setSelected = function(oRow, bSelected, mConfig) {
@@ -131,19 +121,21 @@ sap.ui.define([
 
 		if (mConfig && mConfig.range) {
 			extendLastSelectionTo(this, oRow);
-			// TODO: Multiple consecutive range selections don't work if the selection hits the limit. The "rangeSelectionStartContexts" needs to
-			//  be the last actually selected context.
-			//this._oRangeSelectionStartContext = bSelected && this.getSelectionMode() === SelectionMode.MultiToggle ? oContext : null;
+			return;
+		}
+
+		if (this.isSelected(oRow) === bSelected) {
 			return;
 		}
 
 		if (this.getSelectionMode() === SelectionMode.Single) {
-			this.clearSelection(); // TODO: Fires 2 selectionChange events, first for deselection, then for selection
+			this._bSuppressSelectionChangeEvent = true;
+			this.clearSelection();
 		}
 
 		oContext.setSelected(bSelected);
 		this._oRangeSelectionStartContext = bSelected && this.getSelectionMode() === SelectionMode.MultiToggle ? oContext : null;
-		this.fireSelectionChange(); // TODO: Only fire the event if the selection state has really changed!
+		this.fireSelectionChange();
 	};
 
 	ODataV4Selection.prototype.setSelectedContexts = function(aContexts) {
@@ -207,7 +199,9 @@ sap.ui.define([
 			oPlugin.clearSelection();
 		} else if (oPlugin._isLimitDisabled()) {
 			var oBinding = oPlugin.getTableBinding();
-			select(oPlugin, 0, oBinding ? oBinding.getLength() - 1 : -1);
+			if (oBinding && oBinding.getLength()) {
+				select(oPlugin, 0, oBinding.getLength() - 1);
+			}
 		}
 	}
 
@@ -292,16 +286,23 @@ sap.ui.define([
 	};
 
 	/**
-	 * Calculates the correct start and end index for the range selection and loads the corresponding contexts.
+	 * Returns <code>true</code> if the selection limit has been reached (only the last selection), <code>false</code> otherwise.
+	 *
+	 * @return {boolean}
+	 */
+	ODataV4Selection.prototype.isLimitReached = function() {
+		return this._bLimitReached;
+	};
+
+	/**
+	 * Calculates the correct start and end index for the range selection, loads the corresponding contexts and sets the selected state.
 	 *
 	 * @param {sap.ui.table.plugins.ODataV4Selection} oPlugin The selection plugin.
 	 * @param {int} iIndexFrom The start index of the range selection.
 	 * @param {int} iIndexTo The end index of the range selection.
-	 * @return {Promise<{indexTo: int, indexFrom: int, contexts: sap.ui.model.odata.v4.Context[]}>}
-	 *   A promise that resolves with the corrected start and end index when the contexts are loaded. The Promise is rejected if the index is out of
-	 *   range.
 	 */
-	function loadLimitedContexts(oPlugin, iIndexFrom, iIndexTo) {
+	function select(oPlugin, iIndexFrom, iIndexTo) {
+		var oTable = oPlugin.getTable();
 		var iLimit = oPlugin.getLimit();
 		var bUpwardSelection = iIndexTo < iIndexFrom; // Indicates whether the selection is made from bottom to top.
 		var iGetContextsStartIndex = bUpwardSelection ? iIndexTo : iIndexFrom;
@@ -320,44 +321,36 @@ sap.ui.define([
 
 				// The table will be scrolled one row further to make it transparent for the user where the selection ends.
 				// load the extra row here to avoid additional batch request.
-				iGetContextsLength = iLimit + 1; // TODO: This additional context is only required for scrolling and must not be selected!
+				iGetContextsLength = iLimit + 1;
 			}
 		}
 
-		return loadContexts(oPlugin.getTableBinding(), iGetContextsStartIndex, iGetContextsLength).then(function(aContexts) {
-			return {indexFrom: iIndexFrom, indexTo: iIndexTo, contexts: aContexts};
-		});
-	}
-
-	function loadContexts(oBinding, iStartIndex, iLength) {
-		var aContexts = oBinding.getContexts(iStartIndex, iLength, 0, true);
-		var bContextsAvailable = aContexts.length === iLength && !aContexts.includes(undefined);
-
-		if (bContextsAvailable) {
-			return Promise.resolve(aContexts);
-		}
-
-		return new Promise(function(resolve) {
-			oBinding.attachEventOnce("dataReceived", function() {
-				resolve(loadContexts(oBinding, iStartIndex, iLength));
-			});
-		});
-	}
-
-	function select(oPlugin, iIndexFrom, iIndexTo) {
-		if (iIndexFrom < 0 || iIndexTo < 0) {
-			return;
-		}
-
-		loadLimitedContexts(oPlugin, iIndexFrom, iIndexTo).then(function(mSelectionInfo) {
-			mSelectionInfo.contexts.forEach(function(oContext) {
-				if (isContextSelectable(oContext)) {
+		var bSelectionChange = false;
+		TableUtils.loadContexts(oPlugin.getTableBinding(), iGetContextsStartIndex, iGetContextsLength).then(function(aContexts) {
+			aContexts.forEach(function(oContext) {
+				if (!isContextSelectable(oContext) || oContext.isSelected()) {
+					return;
+				}
+				if (bUpwardSelection && oContext.getIndex() >= iIndexTo || oContext.getIndex() <= iIndexTo) {
 					oContext.setSelected(true);
+					bSelectionChange = true;
+				}
+				if (oContext.getIndex() === iIndexTo) {
+					oPlugin._oRangeSelectionStartContext = oContext;
 				}
 			});
-			return oPlugin._scrollTableToIndex(mSelectionInfo.indexTo, mSelectionInfo.indexFrom > mSelectionInfo.indexTo);
-		}).then(function() {
-			oPlugin.fireSelectionChange(); // TODO: Only fire if the selection state of a context was really changed!
+
+			if (oPlugin.isLimitReached()) {
+				TableUtils.scrollTableToIndex(oTable, iIndexTo, bUpwardSelection).then(function() {
+					if (oPlugin.getEnableNotification()) {
+						TableUtils.showNotificationPopoverAtIndex(oTable, iIndexTo, oPlugin.getLimit());
+					}
+				});
+			}
+
+			if (bSelectionChange) {
+				oPlugin.fireSelectionChange();
+			}
 		});
 	}
 
@@ -376,9 +369,10 @@ sap.ui.define([
 			oContext.setSelected(false);
 		});
 
-		if (bContextDeselected) {
+		if (bContextDeselected && !this._bSuppressSelectionChangeEvent) {
 			this.fireSelectionChange();
 		}
+		this._bSuppressSelectionChangeEvent = false;
 	};
 
 	ODataV4Selection.prototype.getSelectedContexts = function() {
@@ -389,124 +383,6 @@ sap.ui.define([
 		}) : [];
 	};
 
-	/**
-	 * If the limit is reached, the table is scrolled to the <code>iIndex</code>.
-	 * If <code>bReverse</code> is true the <code>firstVisibleRow</code> property of the Table is set to <code>iIndex</code> - 1,
-	 * otherwise to <code>iIndex</code> - row count + 2.
-	 *
-	 * @param {int} iIndex The index of the row to which to scroll to.
-	 * @param {boolean} bReverse Whether the row should be displayed at the bottom of the table.
-	 * @returns {Promise} A promise that resolves when the table is scrolled.
-	 * @private
-	 * TODO: For reuse between this plugin and MultiSelectionPlugin, move this to utils
-	 */
-	ODataV4Selection.prototype._scrollTableToIndex = function(iIndex, bReverse) {
-		var oTable = this.getParent();
-
-		if (!oTable || !this._bLimitReached) {
-			return Promise.resolve();
-		}
-
-		var iFirstVisibleRow = oTable.getFirstVisibleRow();
-		var mRowCounts = oTable._getRowCounts();
-		var iLastVisibleRow = iFirstVisibleRow + mRowCounts.scrollable - 1;
-		var bExpectRowsUpdatedEvent = false;
-
-		if (iIndex < iFirstVisibleRow || iIndex > iLastVisibleRow) {
-			var iNewIndex = bReverse ? iIndex - mRowCounts.fixedTop - 1 : iIndex - mRowCounts.scrollable - mRowCounts.fixedTop + 2;
-
-			bExpectRowsUpdatedEvent = oTable._setFirstVisibleRowIndex(Math.max(0, iNewIndex));
-		}
-
-		this._showNotificationPopoverAtIndex(iIndex);
-
-		return new Promise(function(resolve) {
-			if (bExpectRowsUpdatedEvent) {
-				oTable.attachEventOnce("rowsUpdated", resolve);
-			} else {
-				resolve();
-			}
-		});
-	};
-
-	/**
-	 * Displays a notification Popover beside the row selector that indicates a limited selection. The given index
-	 * references the index of the data context in the binding.
-	 *
-	 * @param {number} iIndex - Index of the data context
-	 * @private
-	 * @returns {Promise} A Promise that resolves after the notification popover has been opened
-	 */
-	ODataV4Selection.prototype._showNotificationPopoverAtIndex = function(iIndex) {
-		var that = this;
-		var oPopover = this._oNotificationPopover;
-		var oTable = this.getParent();
-		var oRow = oTable.getRows()[iIndex - oTable._getFirstRenderedRowIndex()];
-		var sTitle = TableUtils.getResourceText("TBL_SELECT_LIMIT_TITLE");
-		var sMessage = TableUtils.getResourceText("TBL_SELECT_LIMIT", [this.getLimit()]);
-
-		if (!this.getEnableNotification()) {
-			return Promise.resolve();
-		}
-
-		return new Promise(function(resolve) {
-			sap.ui.require([
-				"sap/m/Popover", "sap/m/Bar", "sap/m/Title", "sap/m/Text", "sap/m/HBox", "sap/ui/core/library", "sap/m/library"
-			], function(Popover, Bar, Title, Text, HBox, coreLib, mLib) {
-				if (!oPopover) {
-					oPopover = new Popover(that.getId() + "-notificationPopover", {
-						customHeader: [
-							new Bar({
-								contentMiddle: [
-									new HBox({
-										items: [
-											new Icon({src: "sap-icon://message-warning", color: coreLib.IconColor.Critical})
-												.addStyleClass("sapUiTinyMarginEnd"),
-											new Title({text: sTitle, level: coreLib.TitleLevel.H2})
-										],
-										renderType: mLib.FlexRendertype.Bare,
-										justifyContent: mLib.FlexJustifyContent.Center,
-										alignItems: mLib.FlexAlignItems.Center
-									})
-								]
-							})
-						],
-						content: new Text({text: sMessage})
-					});
-
-					oPopover.addStyleClass("sapUiContentPadding");
-					that._oNotificationPopover = oPopover;
-				} else {
-					oPopover.getContent()[0].setText(sMessage);
-				}
-
-				oTable.detachFirstVisibleRowChanged(that.onFirstVisibleRowChange, that);
-				oTable.attachFirstVisibleRowChanged(that.onFirstVisibleRowChange, that);
-
-				var oRowSelector = oRow.getDomRefs().rowSelector;
-
-				if (oRowSelector) {
-					oPopover.attachEventOnce("afterOpen", resolve);
-					oPopover.openBy(oRowSelector);
-				} else {
-					resolve();
-				}
-			});
-		});
-	};
-
-	ODataV4Selection.prototype.onFirstVisibleRowChange = function() {
-		if (!this._oNotificationPopover) {
-			return;
-		}
-
-		var oTable = this.getParent();
-		if (oTable) {
-			oTable.detachFirstVisibleRowChanged(this.onFirstVisibleRowChange, this);
-		}
-		this._oNotificationPopover.close();
-	};
-
 	ODataV4Selection.prototype.onThemeChanged = function() {
 		this.oDeselectAllIcon.setSrc(IconPool.getIconURI(TableUtils.ThemeParameters.clearSelectionIcon));
 	};

package/src/sap/ui/table/plugins/PluginBase.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.117.0
+	 * @version 1.118.0
 	 *
 	 * @private
 	 * @experimental Since 1.75

package/src/sap/ui/table/plugins/SelectionModelSelection.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 *
 	 * @class Implements the selection methods for a Table
 	 * @extends sap.ui.table.plugins.SelectionPlugin
-	 * @version 1.117.0
+	 * @version 1.118.0
 	 * @constructor
 	 * @private
 	 * @alias sap.ui.table.plugins.SelectionModelSelection

package/src/sap/ui/table/plugins/SelectionPlugin.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @class Implements the selection methods for a table.
 	 * @extends sap.ui.core.Element
 	 * @author SAP SE
-	 * @version 1.117.0
+	 * @version 1.118.0
 	 * @public
 	 * @since 1.64
 	 * @experimental As of version 1.64

package/src/sap/ui/table/plugins/V4Aggregation.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * @class TODO (don't forget to document fixed row count restrictions because fixed rows are set by this plugin)
 	 * @extends sap.ui.table.plugins.PluginBase
 	 * @author SAP SE
-	 * @version 1.117.0
+	 * @version 1.118.0
 	 * @private
 	 * @since 1.76
 	 * @experimental

package/src/sap/ui/table/rowmodes/{AutoRowMode.js → Auto.js}

@@ -4,13 +4,11 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([
-	"../library",
 	"../utils/TableUtils",
 	"./RowMode",
 	"sap/ui/Device",
 	"sap/ui/thirdparty/jquery"
 ], function(
-	library,
 	TableUtils,
 	RowMode,
 	Device,
@@ -21,31 +19,59 @@ sap.ui.define([
 	var _private = TableUtils.createWeakMapFacade();
 
 	/**
-	 * Constructor for a new auto row mode.
+	 * Constructor for a new <code>Auto</code> row mode.
 	 *
 	 * @param {string} [sId] id for the new control, generated automatically if no id is given
 	 * @param {object} [mSettings] initial settings for the new control
 	 *
 	 * @class
-	 * TODO: Class description
-	 * @extends sap.ui.table.rowmodes.RowMode
+	 * The number of rows displayed in the table is calculated based on the space it is allowed to cover (limited by the surrounding container).
+	 * The table must be rendered without siblings in the DOM. The only exception is if the table's parent element is a flexbox, and the table is a
+	 * flex item allowed to grow and shrink.
+	 * The number of rows to be displayed can only be determined after the layout has been completed. The data can already be requested before that.
+	 * To avoid multiple data requests, the amount of initially requested data is based on the maximum number of potentially displayed rows,
+	 * which takes the window size into consideration, for example.
+	 * @extends module:sap/ui/table/rowmodes/RowMode
 	 * @constructor
-	 * @alias sap.ui.table.rowmodes.AutoRowMode
+	 * @alias module:sap/ui/table/rowmodes/Auto
 	 * @private
-	 * @ui5-restricted sap.ui.mdc
 	 *
 	 * @author SAP SE
-	 * @version 1.117.0
+	 * @version 1.118.0
 	 */
-	var AutoRowMode = RowMode.extend("sap.ui.table.rowmodes.AutoRowMode", /** @lends sap.ui.table.rowmodes.AutoRowMode.prototype */ {
+	var AutoRowMode = RowMode.extend("sap.ui.table.rowmodes.Auto", /** @lends sap.ui.table.rowmodes.Auto.prototype */ {
 		metadata: {
 			library: "sap.ui.table",
 			properties: {
+				/**
+				 * The minimum number of displayed rows.
+				 */
 				minRowCount: {type: "int", defaultValue: 5, group: "Appearance"},
+				/**
+				 * The maximum number of displayed rows. The <code>minRowCount</code> is ignored if the maximum is lower than the minimum.
+				 */
 				maxRowCount: {type: "int", defaultValue: -1, group: "Appearance"},
+				/**
+				 * The number of rows in the fixed area at the top. If the number of fixed rows exceeds the number of displayed rows, the number of
+				 * fixed rows is reduced.
+				 * The table may limit the possible number of fixed rows.
+				 */
 				fixedTopRowCount: {type: "int", defaultValue: 0, group: "Appearance"},
+				/**
+				 * The number of rows in the fixed area at the bottom. If the number of fixed rows exceeds the number of displayed rows, the number of
+				 * fixed rows is reduced.
+				 * The table may limit the possible number of fixed rows.
+				 */
 				fixedBottomRowCount: {type: "int", defaultValue: 0, group: "Appearance"},
+				/**
+				 * The row content height in pixel. The actual row height is also influenced by other factors, such as the border width. If no value
+				 * is set (includes 0), a default height is applied based on the content density configuration.
+				 */
 				rowContentHeight: {type: "int", defaultValue: 0, group: "Appearance"},
+				/**
+				 * Whether to hide empty rows.
+				 * TODO: make hidden before making the class public
+				 */
 				hideEmptyRows: {type: "boolean", defaultValue: false, group: "Appearance"}
 			}
 		},
@@ -567,7 +593,7 @@ sap.ui.define([
 	};
 
 	/**
-	 * @this sap.ui.table.rowmodes.AutoRowMode
+	 * @this sap.ui.table.rowmodes.Auto
 	 */
 	TableDelegate.onBeforeRendering = function(oEvent) {
 		var bRenderedRows = oEvent && oEvent.isMarked("renderRows");
@@ -578,7 +604,7 @@ sap.ui.define([
 	};
 
 	/**
-	 * @this sap.ui.table.rowmodes.AutoRowMode
+	 * @this sap.ui.table.rowmodes.Auto
 	 */
 	TableDelegate.onAfterRendering = function(oEvent) {
 		var bRenderedRows = oEvent && oEvent.isMarked("renderRows");

package/src/sap/ui/table/rowmodes/{FixedRowMode.js → Fixed.js}

@@ -4,42 +4,59 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([
-	"../library",
 	"./RowMode",
 	"../utils/TableUtils"
 ], function(
-	library,
 	RowMode,
 	TableUtils
 ) {
 	"use strict";
 
 	/**
-	 * Constructor for a new fixed row mode.
+	 * Constructor for a new <code>Fixed</code> row mode.
 	 *
 	 * @param {string} [sId] id for the new control, generated automatically if no id is given
 	 * @param {object} [mSettings] initial settings for the new control
 	 *
 	 * @class
-	 * TODO: Class description
-	 * @extends sap.ui.table.rowmodes.RowMode
+	 * A fixed number of rows is displayed in the table.
+	 * @extends module:sap/ui/table/rowmodes/RowMode
 	 * @constructor
-	 * @alias sap.ui.table.rowmodes.FixedRowMode
+	 * @alias module:sap/ui/table/rowmodes/Fixed
 	 * @private
-	 * @ui5-restricted sap.ui.mdc
 	 *
 	 * @author SAP SE
-	 * @version 1.117.0
-	 *
+	 * @version 1.118.0
 	 */
-	var FixedRowMode = RowMode.extend("sap.ui.table.rowmodes.FixedRowMode", /** @lends sap.ui.table.rowmodes.FixedRowMode.prototype */ {
+	var FixedRowMode = RowMode.extend("sap.ui.table.rowmodes.Fixed", /** @lends sap.ui.table.rowmodes.Fixed.prototype */ {
 		metadata: {
 			library: "sap.ui.table",
 			properties: {
+				/**
+				 * The number of rows displayed in the table. The number of rows in the scrollable area is reduced by the number of fixed rows.
+				 */
 				rowCount: {type: "int", defaultValue: 10, group: "Appearance"},
+				/**
+				 * The number of rows in the fixed area at the top. If the number of fixed rows exceeds the number of displayed rows, the number of
+				 * fixed rows is reduced.
+				 * The table may limit the possible number of fixed rows.
+				 */
 				fixedTopRowCount: {type: "int", defaultValue: 0, group: "Appearance"},
+				/**
+				 * The number of rows in the fixed area at the bottom. If the number of fixed rows exceeds the number of displayed rows, the number of
+				 * fixed rows is reduced.
+				 * The table may limit the possible number of fixed rows.
+				 */
 				fixedBottomRowCount: {type: "int", defaultValue: 0, group: "Appearance"},
+				/**
+				 * The row content height in pixel. The actual row height is also influenced by other factors, such as the border width. If no value
+				 * is set (includes 0), a default height is applied based on the content density configuration.
+				 */
 				rowContentHeight: {type: "int", defaultValue: 0, group: "Appearance"},
+				/**
+				 * Whether to hide empty rows.
+				 * TODO: make hidden before making the class public
+				 */
 				hideEmptyRows: {type: "boolean", defaultValue: false, group: "Appearance"}
 			}
 		},
@@ -226,7 +243,7 @@ sap.ui.define([
 	};
 
 	/**
-	 * @this sap.ui.table.rowmodes.FixedRowMode
+	 * @this sap.ui.table.rowmodes.Fixed
 	 */
 	TableDelegate.onAfterRendering = function(oEvent) {
 		var oTable = this.getTable();

package/src/sap/ui/table/rowmodes/{InteractiveRowMode.js → Interactive.js}

@@ -4,47 +4,61 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([
-	"../library",
 	"./RowMode",
 	"../utils/TableUtils",
-	"sap/base/Log",
 	"sap/ui/thirdparty/jquery"
 ], function(
-	library,
 	RowMode,
 	TableUtils,
-	Log,
 	jQuery
 ) {
 	"use strict";
 
 	/**
-	 * Constructor for a new interactive row mode.
+	 * Constructor for a new <code>Interactive</code> row mode.
 	 *
 	 * @param {string} [sId] id for the new control, generated automatically if no id is given
 	 * @param {object} [mSettings] initial settings for the new control
 	 *
 	 * @class
-	 * TODO: Class description
-	 * @extends sap.ui.table.rowmodes.RowMode
+	 * The user can change the number of displayed rows by dragging a resizer.
+	 * @extends module:sap/ui/table/rowmodes/RowMode
 	 * @constructor
-	 * @alias sap.ui.table.rowmodes.InteractiveRowMode
+	 * @alias module:sap/ui/table/rowmodes/Interactive
 	 * @private
-	 * @ui5-restricted sap.ui.mdc
 	 *
 	 * @author SAP SE
-	 * @version 1.117.0
-	 *
+	 * @version 1.118.0
 	 */
-	var InteractiveRowMode = RowMode.extend("sap.ui.table.rowmodes.InteractiveRowMode", /** @lends sap.ui.table.rowmodes.InteractiveRowMode.prototype */ {
+	var InteractiveRowMode = RowMode.extend("sap.ui.table.rowmodes.Interactive", /** @lends sap.ui.table.rowmodes.Interactive.prototype */ {
 		metadata: {
 			library: "sap.ui.table",
 			"final": true,
 			properties: {
+				/**
+				 * The number of rows displayed in the table. The number of rows in the scrollable area is reduced by the number of fixed rows.
+				 */
 				rowCount: {type: "int", defaultValue: 10, group: "Appearance"},
+				/**
+				 * The minimum number of displayed rows.
+				 */
 				minRowCount: {type: "int", defaultValue: 5, group: "Appearance"},
+				/**
+				 * The number of rows in the fixed area at the top. If the number of fixed rows exceeds the number of displayed rows, the number of
+				 * fixed rows is reduced.
+				 * The table may limit the possible number of fixed rows.
+				 */
 				fixedTopRowCount: {type: "int", defaultValue: 0, group: "Appearance"},
+				/**
+				 * The number of rows in the fixed area at the bottom. If the number of fixed rows exceeds the number of displayed rows, the number of
+				 * fixed rows is reduced.
+				 * The table may limit the possible number of fixed rows.
+				 */
 				fixedBottomRowCount: {type: "int", defaultValue: 0, group: "Appearance"},
+				/**
+				 * The row content height in pixel. The actual row height is also influenced by other factors, such as the border width. If no value
+				 * is set (includes 0), a default height is applied based on the content density configuration.
+				 */
 				rowContentHeight: {type: "int", defaultValue: 0, group: "Appearance"}
 			}
 		},
@@ -183,13 +197,6 @@ sap.ui.define([
 		};
 	};
 
-	/**
-	 * @inheritDoc
-	 */
-	InteractiveRowMode.prototype.getTableBottomPlaceholderStyles = function() {
-		return undefined;
-	};
-
 	/**
 	 * @inheritDoc
 	 */
@@ -233,6 +240,18 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * @inheritDoc
+	 */
+	InteractiveRowMode.prototype.renderInTableBottomArea = function(oRm) {
+		oRm.openStart("div", this.getTable().getId() + "-sb");
+		oRm.attr("tabindex", "-1");
+		oRm.class("sapUiTableHeightResizer");
+		oRm.style("height", "5px");
+		oRm.openEnd();
+		oRm.close("div");
+	};
+
 	/**
 	 * @inheritDoc
 	 */
@@ -265,7 +284,7 @@ sap.ui.define([
 	};
 
 	/**
-	 * @this sap.ui.table.rowmodes.InteractiveRowMode
+	 * @this sap.ui.table.rowmodes.Interactive
 	 */
 	TableDelegate.onBeforeRendering = function(oEvent) {
 		if (this.bLegacy) {
@@ -274,7 +293,7 @@ sap.ui.define([
 	};
 
 	/**
-	 * @this sap.ui.table.rowmodes.InteractiveRowMode
+	 * @this sap.ui.table.rowmodes.Interactive
 	 */
 	TableDelegate.onAfterRendering = function(oEvent) {
 		var oTable = this.getTable();
@@ -286,7 +305,7 @@ sap.ui.define([
 	};
 
 	/**
-	 * @this sap.ui.table.rowmodes.InteractiveRowMode
+	 * @this sap.ui.table.rowmodes.Interactive
 	 */
 	TableDelegate.onmousedown = function(oEvent) {
 		var oTable = this.getTable();
@@ -300,7 +319,7 @@ sap.ui.define([
 	 * Initializes the drag&drop for resizing.
 	 *
 	 * @param {sap.ui.table.Table} oTable Instance of the table.
-	 * @param {sap.ui.table.rowmodes.InteractiveRowMode} oMode The interactive row mode.
+	 * @param {sap.ui.table.rowmodes.Interactive} oMode The interactive row mode.
 	 * @param {jQuery.Event} oEvent The event object.
 	 */
 	ResizeHelper.initInteractiveResizing = function(oTable, oMode, oEvent) {
@@ -342,7 +361,7 @@ sap.ui.define([
 	/**
 	 * Drops the previous dragged horizontal splitter bar and recalculates the amount of rows to be displayed.
 	 *
-	 * @param {sap.ui.table.rowmodes.InteractiveRowMode} oMode The interactive row mode.
+	 * @param {sap.ui.table.rowmodes.Interactive} oMode The interactive row mode.
 	 * @param {jQuery.Event} oEvent The event object.
 	 */
 	ResizeHelper.exitInteractiveResizing = function(oMode, oEvent) {