docs: improve ui5-table sample (#3300)

SAP · May 21, 2021 · 13221f5 · 13221f5
1 parent 62a0cc3
commit 13221f5
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 97 deletions.
diff --git a/packages/main/test/pages/Table.html b/packages/main/test/pages/Table.html
@@ -106,17 +106,6 @@
 		<ui5-table-column id="column-5" slot="columns">
 			<ui5-label>Price</ui5-label>
 		</ui5-table-column>
-
-
-		<!-- <ui5-table-row>
-
-			<ui5-table-cell>1</ui5-table-cell>
-			<ui5-table-cell>2</ui5-table-cell>
-			<ui5-table-cell>3</ui5-table-cell>
-			<ui5-table-cell>4</ui5-table-cell>
-			<ui5-table-cell>5</ui5-table-cell>
-		</ui5-table-row> -->
-
 	</ui5-table>
 	<label id="tableLabel">Number of poppedColumns: </label>
 

diff --git a/packages/main/test/samples/Table.sample.html b/packages/main/test/samples/Table.sample.html
@@ -93,102 +93,127 @@ <h3>Basic Table</h3>
 		<span style="line-height: 1.4rem">Price</span>
 	</ui5-table-column>
 
+	<ui5-table-row>
+		<ui5-table-cell>Notebook Basic 15HT-1000</ui5-table-cell>
+		<ui5-table-cell>Very Best Screens</ui5-table-cell>
+		<ui5-table-cell>30 x 18 x 3cm</ui5-table-cell>
+		<ui5-table-cell>4.2KG</ui5-table-cell>
+		<ui5-table-cell>956EUR</ui5-table-cell>
+	</ui5-table-row>
+
+	<ui5-table-row>
+		<ui5-table-cell>Notebook Basic 17HT-1001</ui5-table-cell>
+		<ui5-table-cell>Very Best Screens</ui5-table-cell>
+		<ui5-table-cell>29 x 17 x 3.1cm</ui5-table-cell>
+		<ui5-table-cell>4.5KG</ui5-table-cell>
+		<ui5-table-cell>1249EUR</ui5-table-cell>
+	</ui5-table-row>
+
+	<ui5-table-row>
+		<ui5-table-cell>Notebook Basic 18HT-1002</ui5-table-cell>
+		<ui5-table-cell>Very Best Screens</ui5-table-cell>
+		<ui5-table-cell>28 x 19 x 2.5cm</ui5-table-cell>
+		<ui5-table-cell>4.2KG</ui5-table-cell>
+		<ui5-table-cell>1570EUR</ui5-table-cell>
+	</ui5-table-row>
+
+	...
 </ui5-table>
-		</xmp></pre>
-	</section>
-
-	<section class="table-example">
-		<h3>Table in SingleSelect mode</h3>
-		<div class="snippet flex-column">
-			<ui5-table class="demo-table" id="singleSelectTbl" mode="SingleSelect">
-				<!-- Columns -->
-				<ui5-table-column slot="columns">
-					<span>Product</span>
-				</ui5-table-column>
-	
-				<ui5-table-column slot="columns">
-					<span>Supplier</span>
-				</ui5-table-column>
-	
-				<ui5-table-column slot="columns">
-					<span>Dimensions</span>
-				</ui5-table-column>
-	
-				<ui5-table-column slot="columns">
-					<span>Weight</span>
-				</ui5-table-column>
-	
-				<ui5-table-column slot="columns" >
-					<span>Price</span>
-				</ui5-table-column>
-			</ui5-table>
-		</div>
-	
-		<pre class="prettyprint lang-html"><xmp>
+	</xmp></pre>
+</section>
+
+<section class="table-example">
+	<h3>Table in SingleSelect mode</h3>
+	<div class="snippet flex-column">
+		<ui5-table class="demo-table" id="singleSelectTbl" mode="SingleSelect">
+			<!-- Columns -->
+			<ui5-table-column slot="columns">
+				<span>Product</span>
+			</ui5-table-column>
+
+			<ui5-table-column slot="columns">
+				<span>Supplier</span>
+			</ui5-table-column>
+
+			<ui5-table-column slot="columns">
+				<span>Dimensions</span>
+			</ui5-table-column>
+
+			<ui5-table-column slot="columns">
+				<span>Weight</span>
+			</ui5-table-column>
+
+			<ui5-table-column slot="columns" >
+				<span>Price</span>
+			</ui5-table-column>
+		</ui5-table>
+	</div>
+
+	<pre class="prettyprint lang-html"><xmp>
 <ui5-table mode="SingleSelect"></ui5-table>
 	</xmp></pre>
 </section>
 
-	<section class="table-example">
-		<h3>Table in MultiSelect mode</h3>
-		<div class="snippet flex-column">
-			<ui5-table class="demo-table" id="multiSelectTbl" mode="MultiSelect">
-				<!-- Columns -->
-				<ui5-table-column slot="columns">
-					<span>Product</span>
-				</ui5-table-column>
-	
-				<ui5-table-column slot="columns">
-					<span>Supplier</span>
-				</ui5-table-column>
-	
-				<ui5-table-column slot="columns">
-					<span>Dimensions</span>
-				</ui5-table-column>
-	
-				<ui5-table-column slot="columns">
-					<span>Weight</span>
-				</ui5-table-column>
-	
-				<ui5-table-column slot="columns" >
-					<span>Price</span>
-				</ui5-table-column>
-			</ui5-table>
-		</div>
-	
-		<pre class="prettyprint lang-html"><xmp>
+<section class="table-example">
+	<h3>Table in MultiSelect mode</h3>
+	<div class="snippet flex-column">
+		<ui5-table class="demo-table" id="multiSelectTbl" mode="MultiSelect">
+			<!-- Columns -->
+			<ui5-table-column slot="columns">
+				<span>Product</span>
+			</ui5-table-column>
+
+			<ui5-table-column slot="columns">
+				<span>Supplier</span>
+			</ui5-table-column>
+
+			<ui5-table-column slot="columns">
+				<span>Dimensions</span>
+			</ui5-table-column>
+
+			<ui5-table-column slot="columns">
+				<span>Weight</span>
+			</ui5-table-column>
+
+			<ui5-table-column slot="columns" >
+				<span>Price</span>
+			</ui5-table-column>
+		</ui5-table>
+	</div>
+
+	<pre class="prettyprint lang-html"><xmp>
 <ui5-table mode="MultiSelect"></ui5-table>
 	</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" 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>
 
-		<pre class="prettyprint lang-html"><xmp>
+			<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>
 	<ui5-table-column slot="columns" style="width: 12rem">
 		<span style="line-height: 1.4rem">Product</span>