fix(ui5-table): introduce hide-no-data property (#3302)

SAP · May 25, 2021 · d2d4397 · d2d4397
1 parent 1683134
commit d2d4397
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 34 deletions.
diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs
@@ -29,7 +29,7 @@
 			{{/each}}
 
 			{{#unless rows.length}}
-				{{#if showNoData}}
+				{{#unless hideNoData}}
 					<tr class="ui5-table-no-data-row-root" role="row">
 						<td colspan="{{visibleColumnsCount}}" role="cell">
 
@@ -38,7 +38,7 @@
 							</div>
 						</td>
 					</tr>
-				{{/if}}
+				{{/unless}}
 			{{/unless}}
 
 			{{#if growsWithButton}}

diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js
@@ -71,7 +71,7 @@ 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.
+		 * Defines the text that will be displayed when there is no data and <code>hideNoData</code> is not present.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -120,8 +120,9 @@ const metadata = {
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		showNoData: {
+		hideNoData: {
 			type: Boolean,
 		},
 
@@ -437,7 +438,7 @@ class Table extends UI5Element {
 			return !this._hiddenColumns[index];
 		});
 
-		this._noDataDisplayed = !this.rows.length && this.showNoData;
+		this._noDataDisplayed = !this.rows.length && !this.hideNoData;
 		this.visibleColumnsCount = this.visibleColumns.length;
 	}
 

diff --git a/packages/main/test/pages/Table.html b/packages/main/test/pages/Table.html
@@ -135,8 +135,11 @@
 		</thead>
 	</table>
 
+	<br>
+	<br>
+	<br>
 
-	<ui5-table class="no-data-table" id="tableNoData" no-data-text="No Data" show-no-data busy>
+	<ui5-table class="no-data-table" id="tableNoData" no-data-text="No Data" busy>
 		<ui5-table-column id="column-1" slot="columns">
 			<div class="column-content">
 				<ui5-label>Product</ui5-label>

diff --git a/packages/main/test/samples/Table.sample.html b/packages/main/test/samples/Table.sample.html
@@ -186,35 +186,35 @@ <h3>Table in MultiSelect mode</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 slot="columns" style="width: 12rem">
-				<span style="line-height: 1.4rem">Product</span>
-			</ui5-table-column>
-
-			<ui5-table-column slot="columns" min-width="800" popin-text="Supplier">
-				<span style="line-height: 1.4rem">Supplier</span>
-			</ui5-table-column>
-
-			<ui5-table-column slot="columns" min-width="600" popin-text="Dimensions" demand-popin>
-				<span style="line-height: 1.4rem">Dimensions</span>
-			</ui5-table-column>
-
-			<ui5-table-column slot="columns" min-width="600" popin-text="Weight" demand-popin>
-				<span style="line-height: 1.4rem">Weight</span>
-			</ui5-table-column>
-
-			<ui5-table-column slot="columns">
-				<span style="line-height: 1.4rem">Price</span>
-			</ui5-table-column>
-		</ui5-table>
-	</div>
+	<section>
+		<h3>Table with No Data</h3>
+		<div class="snippet flex-column">
+			<ui5-table class="demo-table" no-data-text="No Data">
+				<!-- Columns -->
+				<ui5-table-column slot="columns" style="width: 12rem">
+					<span style="line-height: 1.4rem">Product</span>
+				</ui5-table-column>
+
+				<ui5-table-column slot="columns" min-width="800" popin-text="Supplier">
+					<span style="line-height: 1.4rem">Supplier</span>
+				</ui5-table-column>
+
+				<ui5-table-column slot="columns" min-width="600" popin-text="Dimensions" demand-popin>
+					<span style="line-height: 1.4rem">Dimensions</span>
+				</ui5-table-column>
+
+				<ui5-table-column slot="columns" min-width="600" popin-text="Weight" demand-popin>
+					<span style="line-height: 1.4rem">Weight</span>
+				</ui5-table-column>
+
+				<ui5-table-column slot="columns">
+					<span style="line-height: 1.4rem">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>
+		<pre class="prettyprint lang-html"><xmp>
+<ui5-table class="demo-table" no-data-text="No Data">
 	<ui5-table-column slot="columns" style="width: 12rem">
 		<span style="line-height: 1.4rem">Product</span>
 	</ui5-table-column>