feat(platform): table growing button

closes [#12793](#12793) Add conditional rendering to growing button component Implemented logic to display the growing button only if there are more items to load, using a conditional check. This ensures that the button is hidden once all items have been loaded.
SAP · Dec 6, 2024 · 215b193 · 215b193
1 parent 5622921
commit 215b193
Showing 1 changed file with 30 additions and 27 deletions.
diff --git a/libs/platform/table/components/growing-button/table-growing-button.component.html b/libs/platform/table/components/growing-button/table-growing-button.component.html
@@ -1,30 +1,33 @@
-<div fd-list role="none">
-    <div
-        fd-list-item
-        ariaRole="none"
-        class="fdp-table__growing-button"
-        [growing]="true"
-        [style.height]="'auto'"
-        [action]="true"
-    >
-        <a fd-list-link (click)="_loadMore()">
-            <div fd-list-title>
-                <div
-                    class="fdp-table__growing-button-content"
-                    [class.fdp-table__growing-button-content--byline]="showItemsCount"
-                >
-                    @if (!showItemsCount) {
-                        {{ 'platformTable.loadMore' | fdTranslate }}
-                    } @else {
-                        <div class="fdp-table__growing-button__title">
+@if(_table.loadedRows$() < _dataSourceDirective.totalItems$()) {
+    <div fd-list role="none">
+        <div
+            fd-list-item
+            ariaRole="none"
+            class="fdp-table__growing-button"
+            [growing]="true"
+            [style.height]="'auto'"
+            [action]="true"
+        >
+            <a fd-list-link (click)="_loadMore()">
+                <div fd-list-title>
+                    <div
+                        class="fdp-table__growing-button-content"
+                        [class.fdp-table__growing-button-content--byline]="showItemsCount"
+                    >
+                        @if (!showItemsCount) {
                             {{ 'platformTable.loadMore' | fdTranslate }}
-                        </div>
-                        <div class="fdp-table__growing-button__subtitle">
-                            [ {{ _table.loadedRows$() }} / {{ _dataSourceDirective.totalItems$() }} ]
-                        </div>
-                    }
+                        } @else {
+                            <div class="fdp-table__growing-button__title">
+                                {{ 'platformTable.loadMore' | fdTranslate }}
+                            </div>
+                            <div class="fdp-table__growing-button__subtitle">
+                                [ {{ _table.loadedRows$() }} / {{ _dataSourceDirective.totalItems$() }} ]
+                            </div>
+                        }
+                    </div>
                 </div>
-            </div>
-        </a>
+            </a>
+        </div>
     </div>
-</div>
+
+}