Skip to content

Commit 907d513

Browse files
gustavokathilhan007
gustavokath
authored and
ilhan007
committed
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
1 parent 8d8c343 commit 907d513

File tree

6 files changed

+145
-30
lines changed

6 files changed

+145
-30
lines changed

‎packages/main/src/Table.hbs

+9-2
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,16 @@
1212

1313
<!-- rows -->
1414
{{#each rows}}
15-
<div style="width: 100%"
16-
>
15+
<div style="width: 100%">
1716
<slot name="{{this._individualSlot}}"></slot>
1817
</div>
1918
{{/each}}
19+
20+
{{#unless rows.length}}
21+
{{#if showNoData}}
22+
<div id="noData" class="sapWCTableNoDataRow">
23+
<span>{{noDataText}}</span>
24+
</div>
25+
{{/if}}
26+
{{/unless}}
2027
</div>

‎packages/main/src/Table.js

+22
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,28 @@ const metadata = {
5050
},
5151
},
5252
properties: /** @lends sap.ui.webcomponents.main.Table.prototype */ {
53+
54+
/**
55+
* Defines the text that will be displayed when there is no data and <code>showNoData</code> is present.
56+
*
57+
* @type {string}
58+
* @defaultvalue: ""
59+
* @public
60+
*/
61+
noDataText: {
62+
type: String,
63+
},
64+
65+
/**
66+
* Defines if the value of <code>noDataText</code> will be diplayed when there is no rows present in the table.
67+
*
68+
* @type {boolean}
69+
* @defaultvalue false
70+
* @public
71+
*/
72+
showNoData: {
73+
type: Boolean,
74+
},
5375
/**
5476
* Determines whether the column headers remain fixed at the top of the page during
5577
* vertical scrolling as long as the Web Component is in the viewport.

‎packages/main/src/themes/Table.css

+17-1
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,20 @@ ui5-table:not([hidden]) {
2727

2828
.sapUiSizeCompact .sapWCTableHeader {
2929
height: 2rem;
30-
}
30+
}
31+
32+
.sapWCTableNoDataRow {
33+
display: flex;
34+
align-items: center;
35+
width: 100%;
36+
height: auto;
37+
justify-content: center;
38+
text-align: center;
39+
padding: 0.5rem 1rem;
40+
font-family: var(--sapUiFontFamily);
41+
font-size: 0.875rem;
42+
box-sizing: border-box;
43+
color: var(--sapUiListTextColor);
44+
min-height: 3rem;
45+
border-bottom: 1px solid var(--sapUiListTableGroupHeaderBorderColor);
46+
}

‎packages/main/test/sap/ui/webcomponents/main/pages/Table.html

+16-4
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@
1313
</script>
1414

1515
<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
16-
<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
17-
type="module"
18-
>
16+
<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module">
1917
</script>
2018

2119
<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
@@ -118,6 +116,20 @@
118116
</ui5-table>
119117

120118

119+
<ui5-table class="no-data-table" id="tableNoData" no-data-text="No Data" show-no-data>
120+
<ui5-table-column id="column-1" data-ui5-slot="columns">
121+
<div class="column-content" data-ui5-slot="header">
122+
<ui5-label>Product</ui5-label>
123+
</div>
124+
</ui5-table-column>
125+
<ui5-table-column id="column-2" data-ui5-slot="columns">
126+
<div class="column-content" data-ui5-slot="header">
127+
<ui5-label>Supplier</ui5-label>
128+
</div>
129+
</ui5-table-column>
130+
</ui5-table>
131+
132+
121133
<script>
122134
const products = {
123135
"ProductCollection": [
@@ -2918,7 +2930,7 @@
29182930
29192931
</ui5-table-row>`;
29202932
if (index > 4) {
2921-
return;
2933+
return;
29222934
}
29232935

29242936
html += test;

‎packages/main/test/sap/ui/webcomponents/main/samples/Table.sample.html

+74-22
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
<link rel="stylesheet" href="../../../../../../www/home/core.css">
1111

1212
<script src="../../../../../../test-resources/playground/libs/google-code-prettify/prettify.js"></script>
13-
<link href="../../../../../../test-resources/playground/libs/google-code-prettify/sunburst.css" type="text/css" rel="stylesheet">
13+
<link href="../../../../../../test-resources/playground/libs/google-code-prettify/sunburst.css" type="text/css"
14+
rel="stylesheet">
1415

1516
<link href="../../../../../../test-resources/playground/css/api.css" type="text/css" rel="stylesheet">
1617

@@ -22,35 +23,34 @@
2223
</script>
2324

2425
<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
25-
<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
26-
type="module"
27-
>
26+
<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module">
2827
</script>
2928

3029
<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
3130
</script>
3231

3332
<style>
34-
.header {
35-
display: flex;
36-
justify-content: space-between;
37-
align-items: center;
38-
flex-wrap: wrap;
39-
height: fit-content;
40-
padding: 0.5rem;
41-
}
42-
43-
html[data-sap-ui-browser=ie11] .table-example,
44-
html[data-sap-ui-browser=ed15] .table-example,
45-
html:not([data-sap-ui-browser^=ie]):not([data-sap-ui-browser^=ed]) .table-unsupported {
46-
display: none;
47-
}
48-
49-
.hcb-background .header {
50-
color: #fff;
51-
}
33+
.header {
34+
display: flex;
35+
justify-content: space-between;
36+
align-items: center;
37+
flex-wrap: wrap;
38+
height: fit-content;
39+
padding: 0.5rem;
40+
}
41+
42+
html[data-sap-ui-browser=ie11] .table-example,
43+
html[data-sap-ui-browser=ed15] .table-example,
44+
html:not([data-sap-ui-browser^=ie]):not([data-sap-ui-browser^=ed]) .table-unsupported {
45+
display: none;
46+
}
47+
48+
.hcb-background .header {
49+
color: #fff;
50+
}
5251
</style>
5352
</head>
53+
5454
<body class="sapUiBody example-wrapper" role="application">
5555
<header>
5656
<h2 class="control-header">Table</h2>
@@ -130,6 +130,58 @@ <h3>Basic Table</h3>
130130
</xmp></pre>
131131
</section>
132132

133+
<section>
134+
<h3>Table with No Data</h3>
135+
<div class="snippet flex-column">
136+
<ui5-table class="demo-table" no-data-text="No Data" show-no-data>
137+
<!-- Columns -->
138+
<ui5-table-column data-ui5-slot="columns" width="12em">
139+
<span style="line-height: 1.4rem" data-ui5-slot="header">Product</span>
140+
</ui5-table-column>
141+
142+
<ui5-table-column data-ui5-slot="columns" min-width="800" popin-text="Supplier">
143+
<span style="line-height: 1.4rem" data-ui5-slot="header">Supplier</span>
144+
</ui5-table-column>
145+
146+
<ui5-table-column data-ui5-slot="columns" min-width="600" popin-text="Dimensions" demand-popin>
147+
<span style="line-height: 1.4rem" data-ui5-slot="header">Dimensions</span>
148+
</ui5-table-column>
149+
150+
<ui5-table-column data-ui5-slot="columns" min-width="600" popin-text="Weight" demand-popin>
151+
<span style="line-height: 1.4rem" data-ui5-slot="header">Weight</span>
152+
</ui5-table-column>
153+
154+
<ui5-table-column data-ui5-slot="columns">
155+
<span style="line-height: 1.4rem" data-ui5-slot="header">Price</span>
156+
</ui5-table-column>
157+
</ui5-table>
158+
</div>
159+
160+
<pre class="prettyprint lang-html"><xmp>
161+
<ui5-table class="demo-table" no-data-text="No Data" show-no-data>
162+
<ui5-table-column data-ui5-slot="columns" width="12em">
163+
<span style="line-height: 1.4rem" data-ui5-slot="header">Product</span>
164+
</ui5-table-column>
165+
166+
<ui5-table-column data-ui5-slot="columns" min-width="800" popin-text="Supplier">
167+
<span style="line-height: 1.4rem" data-ui5-slot="header">Supplier</span>
168+
</ui5-table-column>
169+
170+
<ui5-table-column data-ui5-slot="columns" min-width="600" popin-text="Dimensions" demand-popin>
171+
<span style="line-height: 1.4rem" data-ui5-slot="header">Dimensions</span>
172+
</ui5-table-column>
173+
174+
<ui5-table-column data-ui5-slot="columns" min-width="600" popin-text="Weight" demand-popin>
175+
<span style="line-height: 1.4rem" data-ui5-slot="header">Weight</span>
176+
</ui5-table-column>
177+
178+
<ui5-table-column data-ui5-slot="columns">
179+
<span style="line-height: 1.4rem" data-ui5-slot="header">Price</span>
180+
</ui5-table-column>
181+
</ui5-table>
182+
</xmp></pre>
183+
</section>
184+
133185
<script>
134186
const products = {
135187
"ProductCollection": [

‎packages/main/test/specs/Table.spec.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,10 @@ describe("Table general interaction", () => {
3232
assert.strictEqual((rowHTML.split("sapMWCTableRowCellContainer").length - 1), 2, "columns should be 2");
3333
assert.strictEqual((rowHTML.split("sapWCTablePopinRow").length - 1), 2, "popin rows should be 2");
3434
});
35-
});
35+
36+
it("tests if noData div is displayed for empty table", () => {
37+
const noDataRow = browser.findElementDeep("#tableNoData >>> div div.sapWCTableNoDataRow");
38+
39+
assert.strictEqual(noDataRow.isExisting(), true, 'noData div is present');
40+
});
41+
});

0 commit comments

Comments
 (0)