feat(platform): table tree nodes are operable using left and right ar…

…row keys (#10482)
SAP · Sep 7, 2023 · db5e86e · db5e86e
1 parent f77ac1c
commit db5e86e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/libs/platform/src/lib/table/components/table-row/table-row.component.html b/libs/platform/src/lib/table/components/table-row/table-row.component.html
@@ -119,7 +119,6 @@
     [focusable]="true"
     [attr.role]="column.role"
     [headers]="rowId + '__' + column.name"
-    [ngClass]="'fdp-table__col--' + column.name"
     [ngClass]="[
         'fdp-table__col--' + column.name,
         column._freezed ? 'fd-table__cell--fixed' : '',

diff --git a/libs/platform/src/lib/table/components/table-row/table-row.component.ts b/libs/platform/src/lib/table/components/table-row/table-row.component.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/member-ordering */
-import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
@@ -8,6 +8,7 @@ import {
     ElementRef,
     EventEmitter,
     HostBinding,
+    HostListener,
     Input,
     NgZone,
     OnChanges,
@@ -107,6 +108,10 @@ export class TableRowComponent<T> extends TableRowDirective implements OnInit, A
     @Input()
     freezeEndColumnsTo: string;
 
+    /** Whether the row is tree row. */
+    @Input()
+    isTreeRow: boolean;
+
     /**
      * Event emitted when keyboard drag performed.
      */
@@ -206,6 +211,18 @@ export class TableRowComponent<T> extends TableRowDirective implements OnInit, A
         });
     }
 
+    /** @hidden */
+    @HostListener('keydown.arrowLeft', ['$event'])
+    @HostListener('keydown.arrowRight', ['$event'])
+    private _onArrowKeydown($event: KeyboardEvent): void {
+        if ($event.target === this._elmRef.nativeElement && this.isTreeRow) {
+            const shouldBeOpen = KeyUtil.isKeyCode($event, this._rtl ? LEFT_ARROW : RIGHT_ARROW);
+            if (shouldBeOpen !== this.row.expanded) {
+                this._toggleGroupRow();
+            }
+        }
+    }
+
     /** @hidden */
     ngOnInit(): void {
         super.ngOnInit();

diff --git a/libs/platform/src/lib/table/table.component.html b/libs/platform/src/lib/table/table.component.html
@@ -96,8 +96,8 @@
                             [fdkDndItem]="row"
                             [applyDragItemClass]="isDraggable"
                             [class]="row | rowClasses : rowsClass"
-                            [tabindex]="rowsActivable || !!row.navigatable ? 0 : -1"
-                            [focusable]="rowsActivable || !!row.navigatable"
+                            [tabindex]="row.isTree || rowsActivable || !!row.navigatable ? 0 : -1"
+                            [focusable]="row.isTree || rowsActivable || !!row.navigatable"
                             [hoverable]="rowsActivable || _isShownSelectionColumn || !!row.navigatable"
                             [activable]="rowsActivable || !!row.navigatable"
                             [active]="rowIndex === _navigatedRowIndex"
@@ -109,6 +109,7 @@
                             [main]="true"
                             [class.fd-table__row--draggable]="isDraggable"
                             fdp-table-row
+                            [isTreeRow]="row.isTree"
                             [rowId]="id"
                             [index]="rowIndex"
                             [row]="row"