fix(platform): add cellActivate event to platform table (#11876)

libs/docs/platform/table/child-docs/clickable-rows/clickable-rows-docs.component.html

@@ -1,10 +1,14 @@
-<fd-docs-section-title id="actiable-rows" componentName="table"> Activable Rows</fd-docs-section-title>
+<fd-docs-section-title id="actiable-rows" componentName="table"> Activable Cells and Rows</fd-docs-section-title>
 <description>
-    <p>This example shows activable rows</p>
+    <p>This example shows activable cells and rows</p>
 
     <ul>
         <li>Use <code>[rowsActivable]="true"</code> input property on the table to make rows activable.</li>
         <li>Event <code>(rowActivate)</code> is emitted when row gets activated.</li>
+        <li>
+            The <code>(cellActivate)</code> event passes row as well as the clicked column index instead of the row
+            index. The <code>[rowsActivable]</code> input is not required for the <code>(cellActivate)</code> event.
+        </li>
     </ul>
 </description>
 <component-example>

libs/docs/platform/table/examples/platform-table-activable-example.component.html

@@ -3,6 +3,7 @@
     [rowsActivable]="true"
     emptyTableMessage="No data found"
     (rowActivate)="onRowActivate($event)"
+    (cellActivate)="onCellActivate($event)"
 >
     <fdp-table-toolbar title="Order Line Items" [hideItemCount]="false">
         <fdp-table-toolbar-actions>

libs/docs/platform/table/examples/platform-table-activable-example.component.ts

@@ -2,7 +2,13 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 import { Observable, of } from 'rxjs';
 
 import { FdDate } from '@fundamental-ngx/core/datetime';
-import { TableDataProvider, TableDataSource, TableRowActivateEvent, TableState } from '@fundamental-ngx/platform/table';
+import {
+    TableDataProvider,
+    TableDataSource,
+    TableRowActivateEvent,
+    TableState,
+    TableCellActivateEvent
+} from '@fundamental-ngx/platform/table';
 
 @Component({
     selector: 'fdp-platform-table-activable-example',
@@ -24,6 +30,10 @@ export class PlatformTableActivableExampleComponent {
     onRowActivate(event: TableRowActivateEvent<ExampleItem>): void {
         console.log(event);
     }
+
+    onCellActivate(event: TableCellActivateEvent<any>): void {
+        console.log(event);
+    }
 }
 
 export interface ExampleItem {

libs/platform/src/lib/table-helpers/models/index.ts

@@ -19,3 +19,4 @@ export * from './dnd';
 export * from './table-dialog-common-data.model';
 export * from './directives';
 export * from './table-item.model';
+export * from './table-cell-activate-event.model';

libs/platform/src/lib/table-helpers/models/table-cell-activate-event.model.ts

@@ -0,0 +1,8 @@
+export class TableCellActivateEvent<T> {
+    /**
+     * Table cell activate event
+     * @param columnIndex Index of the clicked column
+     * @param row Row that was activated
+     */
+    constructor(public columnIndex: number, public row: T) {}
+}

libs/platform/src/lib/table-helpers/services/table-row.service.ts

@@ -5,6 +5,7 @@ import { convertTreeLikeToFlatList, createGroupedTableRowsTree, sortTreeLikeGrou
 import { CollectionGroup } from '../interfaces';
 import { TableRow } from '../models';
 import { EditableTableCell } from '../table-cell.class';
+import { TableCellActivateEvent } from '../models/table-cell-activate-event.model';
 
 export type ToggleRowModel =
     | {
@@ -40,6 +41,12 @@ export class TableRowService<T = any> {
     /** @hidden */
     private readonly _cellFocusedSubject = new Subject<FocusableItemPosition>();
 
+    /** @hidden */
+    private readonly _cellActivateSubject = new Subject<TableCellActivateEvent<any>>();
+
+    /** Stream that emits when the table cell being focused. */
+    readonly cellActivate$ = this._cellActivateSubject.asObservable();
+
     /** @hidden */
     private readonly _toggleAllSelectableRowsSubject = new Subject<boolean>();
 
@@ -82,6 +89,11 @@ export class TableRowService<T = any> {
         this._cellClickedSubject.next(evt);
     }
 
+    /** @hidden */
+    cellActivate(columnIndex: number, row: TableRow): void {
+        this._cellActivateSubject.next({ columnIndex, row: row.value });
+    }
+
     /** `cellFocused$` stream trigger. */
     cellFocused(evt: FocusableItemPosition): void {
         this._cellFocusedSubject.next(evt);

libs/platform/src/lib/table/components/table-row/table-row.component.html

@@ -139,7 +139,7 @@
     "
     [attr.aria-expanded]="_isTreeRowFirstCell(colIdx, row) ? row.expanded : null"
     [attr.data-nesting-level]="colIdx === 0 ? row.level + 1 : null"
-    (cellFocused)="_tableRowService.cellFocused($event)"
+    (cellFocused)="_tableRowService.cellFocused($event); _tableRowService.cellActivate(colIdx, row)"
     (click)="_tableRowService.cellClicked({ index: colIdx, row })"
     (keydown.enter)="_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()"
     (keydown.arrowLeft)="_tableRowService.scrollToOverlappedCell()"

libs/platform/src/lib/table/table.component.ts

@@ -80,6 +80,7 @@ import {
     SelectionModeValue,
     SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH,
     Table,
+    TableCellActivateEvent,
     TableColumn,
     TableColumnFreezeEvent,
     TableColumnResizeService,
@@ -458,7 +459,10 @@ export class TableComponent<T = any>
     /** Event fired when group/tree row collapsed/expanded. */
     @Output()
     readonly rowToggleOpenState = new EventEmitter<TableRowToggleOpenStateEvent<T>>();
-    /** Event fired when row clicked. */
+    /** Event fired when a cell is clicked or focused. */
+    @Output()
+    readonly cellActivate = new EventEmitter<TableCellActivateEvent<T>>();
+    /** Event fired when row navigated. */
     @Output()
     readonly rowActivate = new EventEmitter<TableRowActivateEvent<T>>();
     /** Event fired when row navigated. */
@@ -773,6 +777,11 @@ export class TableComponent<T = any>
                 this.cellFocused.emit(event);
             })
         );
+        this._subscriptions.add(
+            this._tableRowService.cellActivate$.subscribe((event) => {
+                this.cellActivate.emit(event);
+            })
+        );
     }
 
     /**
@@ -1497,6 +1506,11 @@ export class TableComponent<T = any>
         }
     }
 
+    /** @hidden */
+    _emitCellActivate(columnIndex: number, row: TableRow<T>): void {
+        this.cellActivate.emit(new TableCellActivateEvent<T>(columnIndex, row.value));
+    }
+
     /** @hidden */
     _emitRowActivate(row: TableRow<T>): void {
         if (!this.rowsActivable) {