feat(ui5-table): add "loadMore" capability

packages/main/src/Table.hbs

@@ -1,5 +1,4 @@
 <table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
-
 	<thead>
 		<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" tabindex="{{_columnHeader._tabIndex}}" style="height: 48px" @click="{{_onColumnHeaderClick}}">
 			{{#each visibleColumns}}
@@ -25,5 +24,40 @@
 				</tr>
 			{{/if}}
 		{{/unless}}
+
+		{{#if hasMore}}
+			{{> loadMoreRow}}
+		{{/if}}
 	</tbody>
 </table>
+
+{{#*inline "loadMoreRow"}}
+<tr>
+	<td colspan="{{visibleColumnsCount}}">
+		<div class="ui5-table-load-more-row">
+			<div 
+				tabindex="0"
+				role="button"
+				aria-labelledby="{{loadMoreAriaLabelledBy}}"
+				?active="{{_loadMoreActive}}"
+				@click="{{_onLoadMoreClick}}"
+				@keydown="{{_onLoadMoreKeydown}}"
+				@keyup="{{_onLoadMoreKeyup}}"
+				class="ui5-table-load-more-row-inner"
+			>
+				<span
+					id="{{_id}}-showMore-text"
+					class="ui5-table-load-more-row-text">{{_loadMoreText}}
+				</span>
+
+				{{#if loadMoreSubtext}}
+				<span
+					id="{{_id}}-showMore-desc"
+					class="ui5-table-load-more-row-desc">{{loadMoreSubtext}}
+				</span>
+				{{/if}}
+			</div>
+		</div>
+	</td>
+</tr>
+{{/inline}}

packages/main/src/Table.js

@@ -3,6 +3,13 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+
+// Texts
+import { TABLE_LOAD_MORE_TEXT } from "./generated/i18n/i18n-defaults.js";
+
+// Template
 import TableTemplate from "./generated/templates/TableTemplate.lit.js";
 
 // Styles
@@ -62,6 +69,39 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the text that will be displayed inside the additional row at the bottom of the table,
+		 * meant for loading more rows upon press.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> If not specified a built-in text will be displayed.
+		 * <br>
+		 * <b>Note:</b> This property takes effect if <code>hasMore</code> is set.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.11
+		 * @public
+		 */
+		loadMoreText: {
+			type: String,
+		},
+
+		/**
+		 * Defines the subtext that will be displayed under the <code>loadMoreText</code>.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> This property takes effect if <code>hasMore</code> is set.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.11
+		 * @public
+		 */
+		loadMoreSubtext: {
+			type: String,
+		},
+
 		/**
 		 * Defines if the value of <code>noDataText</code> will be diplayed when there is no rows present in the table.
 		 *
@@ -72,6 +112,20 @@ const metadata = {
 		showNoData: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines if additonal row will be displayed at the bottom of the table.
+		 * Pressing on the row will fire the <code>load-more</code> event.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.0.0-rc.11
+		 * @public
+		 */
+		hasMore: {
+			type: Boolean,
+		},
+
 		/**
 		 * Determines whether the column headers remain fixed at the top of the page during
 		 * vertical scrolling as long as the Web Component is in the viewport.
@@ -111,6 +165,14 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the active state of the "load more" row.
+		 * @private
+		 */
+		_loadMoreActive: {
+			type: Boolean,
+		},
+
 		/**
 		 * Used to represent the table column header for the purpose of the item navigation as it does not work with DOM objects directly
 		 * @private
@@ -146,6 +208,15 @@ const metadata = {
 				poppedColumns: {},
 			},
 		},
+
+		/**
+		 * Fired when the user presses the <code>showMore</code> row of the table.
+		 * <br><br>
+		 * @event sap.ui.webcomponents.main.Table#load-more
+		 * @public
+		 * @since 1.0.0-rc.11
+		 */
+		"load-more": {},
 	},
 };
 
@@ -199,6 +270,10 @@ class Table extends UI5Element {
 		return TableTemplate;
 	}
 
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
+
 	constructor() {
 		super();
 
@@ -217,6 +292,8 @@ class Table extends UI5Element {
 		this.fnOnRowFocused = this.onRowFocused.bind(this);
 
 		this._handleResize = this.popinContent.bind(this);
+
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -259,6 +336,29 @@ class Table extends UI5Element {
 		this._itemNavigation.update(this._columnHeader);
 	}
 
+	_onLoadMoreKeydown(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+			this._loadMoreActive = true;
+		}
+
+		if (isEnter(event)) {
+			this._onLoadMoreClick();
+			this._loadMoreActive = true;
+		}
+	}
+
+	_onLoadMoreKeyup(event) {
+		if (isSpace(event)) {
+			this._onLoadMoreClick();
+		}
+		this._loadMoreActive = false;
+	}
+
+	_onLoadMoreClick() {
+		this.fireEvent("load-more");
+	}
+
 	getColumnHeader() {
 		return this.getDomRef() && this.getDomRef().querySelector(`#${this._id}-columnHeader`);
 	}
@@ -316,6 +416,18 @@ class Table extends UI5Element {
 			};
 		}, this);
 	}
+
+	get _loadMoreText() {
+		return this.loadMoreText || this.i18nBundle.getText(TABLE_LOAD_MORE_TEXT);
+	}
+
+	get loadMoreAriaLabelledBy() {
+		if (this.moreDataText) {
+			return `${this._id}-showMore-text ${this._id}-showMore-desc`;
+		}
+
+		return `${this._id}-showMore-text`;
+	}
 }
 
 Table.define();

packages/main/src/i18n/messagebundle.properties

@@ -292,6 +292,9 @@ SWITCH_ON=On
 #XACT: ARIA announcement for the switch off
 SWITCH_OFF=Off
 
+#XTXT Table "load more" row's text.
+TABLE_LOAD_MORE_TEXT=More
+
 #XACT: ACC next icon name in tab container
 TABCONTAINER_NEXT_ICON_ACC_NAME=Next
 

packages/main/src/themes/Table.css

@@ -1,3 +1,5 @@
+@import "./TableLoadMoreRow.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;

packages/main/src/themes/TableLoadMoreRow.css

@@ -0,0 +1,68 @@
+/* Show more row */
+.ui5-table-load-more-row {
+	display: flex;
+	align-items: center;
+	padding: var(--ui5_table_load_more_padding);
+	border-top: 1px solid var(--sapList_BorderColor);
+	box-sizing: border-box;
+	cursor: pointer;
+	outline: none;
+}
+
+.ui5-table-load-more-row-inner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	min-height: var(--ui5_table_load_more_text_height);
+	width: 100%;
+	color: var(--sapButton_TextColor);
+	background-color: var(--sapList_Background);
+	border: var(--ui5_table_load_more_border);
+	border-radius: var(--ui5_table_load_more_border_radius);
+	box-sizing: border-box;
+}
+
+.ui5-table-load-more-row-inner:focus {
+	outline: var(--ui5_table_row_outline_width) dotted var(--sapContent_FocusColor);
+	outline-offset: -0.125rem;
+	border-color: transparent;
+}
+
+.ui5-table-load-more-row-inner:hover {
+	background-color: var(--sapList_Hover_Background);
+}
+
+.ui5-table-load-more-row-inner:active,
+.ui5-table-load-more-row-inner[active] {
+	background-color: var(--sapList_Active_Background);
+	border-color: var(--sapList_Active_Background);
+}
+
+.ui5-table-load-more-row-inner[active] > *,
+.ui5-table-load-more-row-inner:active> * {
+	color: var(--sapList_Active_TextColor);
+}
+
+.ui5-table-load-more-row-text,
+.ui5-table-load-more-row-desc {
+	width: 100%;
+	text-align: center;
+	font-family: "72override", var(--sapFontFamily);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	box-sizing: border-box;
+}
+
+.ui5-table-load-more-row-text {
+	height: var(--ui5_table_load_more_text_height);
+	padding: 0.875rem 1rem 0 1rem;
+	font-size: var(--_ui5_table_load_more_text_font_size);
+	font-weight: bold;
+}
+
+.ui5-table-load-more-row-desc {
+	font-size: var(--sapFontSize);
+	padding: var(--_ui5_table_load_more_desc_padding);
+}

packages/main/src/themes/base/TableLoadMoreRow-parameters.css

@@ -0,0 +1,5 @@
+:root {
+	--ui5_table_load_more_padding: 0;
+	--ui5_table_load_more_border: 1px top solid transparent;
+	--ui5_table_load_more_border_radius: none;
+}

packages/main/src/themes/base/sizes-parameters.css

@@ -70,6 +70,12 @@
 	/* Side Navigation */
 	--ui5_side_navigation_item_height: 2.75rem;
 
+	/* Table */
+
+	--ui5_table_load_more_text_height: 2.75rem;
+	--_ui5_table_load_more_text_font_size: var(--sapFontMediumSize);
+	--_ui5_table_load_more_desc_padding:  0.375rem 2rem 0.875rem 2rem;
+
 	/* Tree */
 	--_ui5-tree-indent-step: 1.5rem;
 	--_ui5-tree-toggle-box-width: 2.75rem;
@@ -208,6 +214,11 @@
 	--_ui5_slider_tooltip_padding: 0.25rem;
 	--_ui5_slider_tooltip_bottom: 1.825rem;
 
+	/* Table */
+	--ui5_table_load_more_text_height: 2.625rem;
+	--_ui5_table_load_more_text_font_size: var(--sapFontSize);
+	--_ui5_table_load_more_desc_padding: 0 2rem 0.875rem 2rem;
+
 	/* Tree */
 	--_ui5-tree-indent-step: 0.5rem;
 	--_ui5-tree-toggle-box-width: 2rem;

packages/main/src/themes/sap_belize/parameters-bundle.css

@@ -26,6 +26,7 @@
 @import "./TabContainer-parameters.css";
 @import "../base/Table-parameters.css";
 @import "../base/TableRow-parameters.css";
+@import "../base/TableLoadMoreRow-parameters.css";
 @import "../base/TextArea-parameters.css";
 @import "./TimePicker-parameters.css";
 @import "../base/Title-parameters.css";

packages/main/src/themes/sap_belize_hcb/TableLoadMoreRow-parameters.css

@@ -0,0 +1,7 @@
+@import "../base/TableLoadMoreRow-parameters.css";
+
+:root {
+	--ui5_table_load_more_padding: 0.25rem;
+	--ui5_table_load_more_border: 1px solid var(--sapButton_BorderColor);
+	--ui5_table_load_more_border_radius: 0.375rem;
+}

packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -26,6 +26,7 @@
 @import "./TabContainer-parameters.css";
 @import "./Table-parameters.css";
 @import "./TableRow-parameters.css";
+@import "./TableLoadMoreRow-parameters.css";
 @import "./TextArea-parameters.css";
 @import "../base/Title-parameters.css";
 @import "../base/Toast-parameters.css";

packages/main/src/themes/sap_belize_hcw/TableLoadMoreRow-parameters.css

@@ -0,0 +1,7 @@
+@import "../base/TableLoadMoreRow-parameters.css";
+
+:root {
+	--ui5_table_load_more_padding: 0.25rem;
+	--ui5_table_load_more_border: 1px solid var(--sapButton_BorderColor);
+	--ui5_table_load_more_border_radius: 0.375rem;
+}

packages/main/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -26,6 +26,7 @@
 @import "./TabContainer-parameters.css";
 @import "./Table-parameters.css";
 @import "./TableRow-parameters.css";
+@import "./TableLoadMoreRow-parameters.css";
 @import "./TextArea-parameters.css";
 @import "../base/Title-parameters.css";
 @import "../base/Toast-parameters.css";

packages/main/src/themes/sap_fiori_3/parameters-bundle.css

@@ -32,6 +32,7 @@
 @import "./CalendarHeader-parameters.css";
 @import "../base/Table-parameters.css";
 @import "../base/TableRow-parameters.css";
+@import "../base/TableLoadMoreRow-parameters.css";
 @import "../base/Title-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/ValueStateMessage-parameters.css";

packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -31,6 +31,7 @@
 @import "./CalendarHeader-parameters.css";
 @import "../base/Table-parameters.css";
 @import "../base/TableRow-parameters.css";
+@import "../base/TableLoadMoreRow-parameters.css";
 @import "../base/Title-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/ValueStateMessage-parameters.css";