fix(platform): add cellActivate event to platform table

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

@@ -15,6 +15,7 @@ import {
     TableHeaderResizerDirective,
     TableInitialStateDirective
 } from '@fundamental-ngx/platform/table-helpers';
+import { TableCellActivateEvent } from '../../../../platform/table-helpers/models/table-cell-activate-event.model';
 
 @Component({
     selector: 'fdp-platform-table-activable-example',
@@ -45,6 +46,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/table-helpers/models/index.ts

@@ -11,6 +11,7 @@ export * from './save-rows-event.interface';
 export * from './search-change-event.model';
 export * from './selection-change-event.model';
 export * from './sort-change-event.model';
+export * from './table-cell-activate-event.model';
 export * from './table-dialog-common-data.model';
 export * from './table-item.model';
 export * from './table-managed-preset';

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

@@ -0,0 +1,11 @@
+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/table-helpers/models/table-row-activate-event.model.ts

@@ -1,7 +1,7 @@
 export class TableRowActivateEvent<T> {
     /**
      * Table row activate event
-     * @param index Index of the row
+     * @param index Index of the activated row
      * @param row Row that was activated
      */
     constructor(

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

@@ -4,6 +4,7 @@ import { Observable, Subject } from 'rxjs';
 import { convertTreeLikeToFlatList, createGroupedTableRowsTree, sortTreeLikeGroupedRows } from '../helpers';
 import { CollectionGroup } from '../interfaces';
 import { TableRow } from '../models';
+import { TableCellActivateEvent } from '../models/table-cell-activate-event.model';
 import { EditableTableCell } from '../table-cell.class';
 
 export type ToggleRowModel =
@@ -40,6 +41,9 @@ export class TableRowService<T = any> {
     /** Stream that emits when the table cell being focused. */
     readonly cellFocused$: Observable<FocusableItemPosition>;
 
+    /** Stream that emits when the table cell being focused. */
+    readonly cellActivate$: Observable<TableCellActivateEvent<any>>;
+
     /** Toggle row stream. */
     readonly toggleRow$: Observable<ToggleRowModel>;
 
@@ -61,6 +65,9 @@ export class TableRowService<T = any> {
     /** @hidden */
     private readonly _cellClickedSubject = new Subject<CellClickedModel>();
 
+    /** @hidden */
+    private readonly _cellActivateSubject = new Subject<TableCellActivateEvent<any>>();
+
     /** @hidden */
     private readonly _cellFocusedSubject = new Subject<FocusableItemPosition>();
 
@@ -73,6 +80,7 @@ export class TableRowService<T = any> {
         this.cellClicked$ = this._cellClickedSubject.asObservable();
         this.scrollToOverlappedCell$ = this._scrollToOverlappedCellSubject.asObservable();
         this.cellFocused$ = this._cellFocusedSubject.asObservable();
+        this.cellActivate$ = this._cellActivateSubject.asObservable();
         this.toggleRow$ = this._toggleRowSubject.asObservable();
     }
 
@@ -91,6 +99,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/table/components/table-row/table-row.component.html

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

libs/platform/table/table.component.ts

@@ -99,6 +99,7 @@ import {
     SelectionModeValue,
     SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH,
     Table,
+    TableCellActivateEvent,
     TableColumn,
     TableColumnFreezeEvent,
     TableColumnResizeService,
@@ -515,7 +516,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. */
@@ -842,6 +846,11 @@ export class TableComponent<T = any>
                 this.cellFocused.emit(event);
             })
         );
+        this._subscriptions.add(
+            this._tableRowService.cellActivate$.subscribe((event) => {
+                this.cellActivate.emit(event);
+            })
+        );
     }
 
     /** Returns array of rows that are currently in viewport. */
@@ -1557,6 +1566,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) {