feat(platform): fdp table - make responsive pop-in areas navigable

libs/docs/platform/table/examples/platform-table-responsive-columns-example.component.html

@@ -6,10 +6,12 @@
     <button fd-button label="Full width" value="100%"></button>
 </fd-segmented-button>
 <fdp-table
+    (rowNavigate)="handleNavigate()"
     #table
     [style.width]="tableWidth"
     [dataSource]="source"
     [trackBy]="trackBy"
+    [rowNavigatable]="true"
     selectionMode="multiple"
     [rowsActivable]="true"
     emptyTableMessage="No data found"

libs/docs/platform/table/examples/platform-table-responsive-columns-example.component.ts

@@ -91,6 +91,10 @@ export class PlatformTableResponsiveColumnsExampleComponent implements AfterView
         this.tableWidth = value;
         this._cdr.detectChanges();
     }
+
+    handleNavigate(): void {
+        alert('Navigation event');
+    }
 }
 
 export interface ExampleItem {

libs/platform/table/table.component.html

@@ -117,6 +117,7 @@
                                         [class.fd-table__row--draggable]="isDraggable"
                                         fdp-table-row
                                         [rowId]="id"
+                                        [class.fd-tr-hovered]="!row.checked && hoveredRowIndex$() === rowIndex"
                                         [index]="rowIndex"
                                         [row]="row"
                                         [selectionMode]="_selectionMode"
@@ -131,15 +132,21 @@
                             }
                             @if (row.type === 'item' && _tableService.poppingColumns$().length > 0) {
                                 <tr
+                                    (keydown.enter)="_onRowClick(row, $event)"
+                                    (keydown.space)="_onRowClick(row, $event)"
+                                    (click)="_onRowClick(row, $event)"
                                     fdp-table-popping-row
                                     [secondary]="true"
+                                    [style.cursor]="rowsActivable || !!row.navigatable ? 'pointer' : 'auto'"
                                     [style.height.px]="secondaryRowHeight"
                                     [selectionMode]="selectionMode"
                                     [row]="row"
                                     [checked]="row.checked"
                                     [class]="row | rowClasses: rowsClass"
                                     (toggleGroupRow)="_toggleGroupRow($event)"
                                     (cellClicked)="_onCellClick($event.index, $event.row)"
+                                    (mouseenter)="handleMouseEnter(rowIndex)"
+                                    (mouseleave)="handleMouseLeave()"
                                 ></tr>
                             }
                             @if (row.children.length === 0 && (row.childItemsLoading$ | async)) {

libs/platform/table/table.component.scss

@@ -499,6 +499,10 @@ fdk-dynamic-portal {
                         white-space: nowrap !important;
                     }
                 }
+
+                &:hover {
+                    background-color: var(--sapList_Hover_Background);
+                }
             }
 
             .#{$block} {
@@ -648,3 +652,7 @@ fdk-dynamic-portal {
 th.fd-table__cell .fd-table__inner {
     font-weight: 700;
 }
+
+.fd-tr-hovered {
+    background-color: var(--sapList_Hover_Background) !important;
+}

libs/platform/table/table.component.ts

@@ -611,6 +611,9 @@ export class TableComponent<T = any>
     /** Total loaded items. */
     loadedRows$ = signal(0);
 
+    /** @hidden */
+    hoveredRowIndex$ = signal<Nullable<number>>(null);
+
     /** @hidden */
     get initialSortBy(): CollectionSort[] {
         return this.initialState?.initialSortBy ?? [];
@@ -1710,6 +1713,16 @@ export class TableComponent<T = any>
         });
     }
 
+    /** @hidden */
+    handleMouseEnter(rowIndex: number): void {
+        this.hoveredRowIndex$.set(rowIndex);
+    }
+
+    /** @hidden */
+    handleMouseLeave(): void {
+        this.hoveredRowIndex$.set(null);
+    }
+
     /** Manually update index after we add new items to the main array */
     private _reIndexTableRows(): void {
         this._tableRows.map((row, index) => (row.index = index));