feat(ui5-table): add noDataText for ui5-table without rows (#402)

- Added property `no-data-text` for storing the text that will be displayed - Added property `show-no-data` to check if no data text should be displayed - Fixes #389
SAP · Jun 4, 2019 · 907d513 · 907d513
1 parent 8d8c343
commit 907d513
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 30 deletions.
diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs
@@ -12,9 +12,16 @@
 
 	<!-- rows -->
 	{{#each rows}}
-		<div style="width: 100%"
-		>
+		<div style="width: 100%">
 			<slot name="{{this._individualSlot}}"></slot>
 		</div>
 	{{/each}}
+
+	{{#unless rows.length}}
+		{{#if showNoData}}
+			<div id="noData" class="sapWCTableNoDataRow">
+				<span>{{noDataText}}</span>
+		</div>
+		{{/if}}
+	{{/unless}}
 </div>
diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js
@@ -50,6 +50,28 @@ const metadata = {
 		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Table.prototype */ {
+
+		/**
+		 * Defines the text that will be displayed when there is no data and <code>showNoData</code> is present.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 */
+		noDataText: {
+			type: String,
+		},
+
+		/**
+		 * Defines if the value of <code>noDataText</code> will be diplayed when there is no rows present in the table.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		showNoData: {
+			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.

diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css
@@ -27,4 +27,20 @@ ui5-table:not([hidden]) {
 
 .sapUiSizeCompact .sapWCTableHeader {
 	height: 2rem;
-}
+}
+
+.sapWCTableNoDataRow {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: auto;
+	justify-content: center;
+	text-align: center;
+	padding: 0.5rem 1rem;
+	font-family: var(--sapUiFontFamily);
+	font-size: 0.875rem;
+	box-sizing: border-box;
+	color: var(--sapUiListTextColor);
+	min-height: 3rem;
+	border-bottom: 1px solid var(--sapUiListTableGroupHeaderBorderColor);
+}
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Table.html b/packages/main/test/sap/ui/webcomponents/main/pages/Table.html
@@ -13,9 +13,7 @@
 	</script>
 
 	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
-	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
-		type="module"
-	>
+	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module">
 	</script>
 
 	<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
@@ -118,6 +116,20 @@
 	</ui5-table>
 
 
+	<ui5-table class="no-data-table" id="tableNoData" no-data-text="No Data" show-no-data>
+		<ui5-table-column id="column-1" data-ui5-slot="columns">
+			<div class="column-content" data-ui5-slot="header">
+				<ui5-label>Product</ui5-label>
+			</div>
+		</ui5-table-column>
+		<ui5-table-column id="column-2" data-ui5-slot="columns">
+			<div class="column-content" data-ui5-slot="header">
+				<ui5-label>Supplier</ui5-label>
+			</div>
+		</ui5-table-column>
+	</ui5-table>
+
+
 	<script>
 		const products = {
 			"ProductCollection": [
@@ -2918,7 +2930,7 @@
 
 						</ui5-table-row>`;
 			if (index > 4) {
-			    return;
+				return;
 			}
 
 			html += test;

diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/Table.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/Table.sample.html
@@ -10,7 +10,8 @@
 	<link rel="stylesheet" href="../../../../../../www/home/core.css">
 
 	<script src="../../../../../../test-resources/playground/libs/google-code-prettify/prettify.js"></script>
-	<link href="../../../../../../test-resources/playground/libs/google-code-prettify/sunburst.css" type="text/css" rel="stylesheet">
+	<link href="../../../../../../test-resources/playground/libs/google-code-prettify/sunburst.css" type="text/css"
+		rel="stylesheet">
 
 	<link href="../../../../../../test-resources/playground/css/api.css" type="text/css" rel="stylesheet">
 
@@ -22,35 +23,34 @@
 	</script>
 
 	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
-	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
-	        type="module"
-	>
+	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module">
 	</script>
 
 	<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
 	</script>
 
 	<style>
-	.header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		flex-wrap: wrap;
-		height: fit-content;
-		padding: 0.5rem;
-	}
-
-	html[data-sap-ui-browser=ie11] .table-example,
-	html[data-sap-ui-browser=ed15] .table-example,
-	html:not([data-sap-ui-browser^=ie]):not([data-sap-ui-browser^=ed]) .table-unsupported {
-		display: none;
-	}
-
-	.hcb-background .header {
-		color: #fff;
-	}
+		.header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			flex-wrap: wrap;
+			height: fit-content;
+			padding: 0.5rem;
+		}
+
+		html[data-sap-ui-browser=ie11] .table-example,
+		html[data-sap-ui-browser=ed15] .table-example,
+		html:not([data-sap-ui-browser^=ie]):not([data-sap-ui-browser^=ed]) .table-unsupported {
+			display: none;
+		}
+
+		.hcb-background .header {
+			color: #fff;
+		}
 	</style>
 </head>
+
 <body class="sapUiBody example-wrapper" role="application">
 	<header>
 		<h2 class="control-header">Table</h2>
@@ -130,6 +130,58 @@ <h3>Basic Table</h3>
 		</xmp></pre>
 	</section>
 
+	<section>
+		<h3>Table with No Data</h3>
+		<div class="snippet flex-column">
+			<ui5-table class="demo-table" no-data-text="No Data" show-no-data>
+				<!-- Columns -->
+				<ui5-table-column data-ui5-slot="columns" width="12em">
+					<span style="line-height: 1.4rem" data-ui5-slot="header">Product</span>
+				</ui5-table-column>
+
+				<ui5-table-column data-ui5-slot="columns" min-width="800" popin-text="Supplier">
+					<span style="line-height: 1.4rem" data-ui5-slot="header">Supplier</span>
+				</ui5-table-column>
+
+				<ui5-table-column data-ui5-slot="columns" min-width="600" popin-text="Dimensions" demand-popin>
+					<span style="line-height: 1.4rem" data-ui5-slot="header">Dimensions</span>
+				</ui5-table-column>
+
+				<ui5-table-column data-ui5-slot="columns" min-width="600" popin-text="Weight" demand-popin>
+					<span style="line-height: 1.4rem" data-ui5-slot="header">Weight</span>
+				</ui5-table-column>
+
+				<ui5-table-column data-ui5-slot="columns">
+					<span style="line-height: 1.4rem" data-ui5-slot="header">Price</span>
+				</ui5-table-column>
+			</ui5-table>
+		</div>
+
+		<pre class="prettyprint lang-html"><xmp>
+<ui5-table class="demo-table" no-data-text="No Data" show-no-data>
+	<ui5-table-column data-ui5-slot="columns" width="12em">
+		<span style="line-height: 1.4rem" data-ui5-slot="header">Product</span>
+	</ui5-table-column>
+
+	<ui5-table-column data-ui5-slot="columns" min-width="800" popin-text="Supplier">
+		<span style="line-height: 1.4rem" data-ui5-slot="header">Supplier</span>
+	</ui5-table-column>
+
+	<ui5-table-column data-ui5-slot="columns" min-width="600" popin-text="Dimensions" demand-popin>
+		<span style="line-height: 1.4rem" data-ui5-slot="header">Dimensions</span>
+	</ui5-table-column>
+
+	<ui5-table-column data-ui5-slot="columns" min-width="600" popin-text="Weight" demand-popin>
+		<span style="line-height: 1.4rem" data-ui5-slot="header">Weight</span>
+	</ui5-table-column>
+
+	<ui5-table-column data-ui5-slot="columns">
+		<span style="line-height: 1.4rem" data-ui5-slot="header">Price</span>
+	</ui5-table-column>
+</ui5-table>
+		</xmp></pre>
+	</section>
+
 	<script>
 		const products = {
 			"ProductCollection": [

diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js
@@ -32,4 +32,10 @@ describe("Table general interaction", () => {
 		assert.strictEqual((rowHTML.split("sapMWCTableRowCellContainer").length - 1), 2, "columns should be 2");
 		assert.strictEqual((rowHTML.split("sapWCTablePopinRow").length - 1), 2, "popin rows should be 2");
 	});
-});
+
+	it("tests if noData div is displayed for empty table", () => {
+		const noDataRow = browser.findElementDeep("#tableNoData >>> div div.sapWCTableNoDataRow");
+
+		assert.strictEqual(noDataRow.isExisting(), true, 'noData div is present');
+	});
+});