diff --git a/libs/docs/platform/table/child-docs/clickable-rows/clickable-rows-docs.component.html b/libs/docs/platform/table/child-docs/clickable-rows/clickable-rows-docs.component.html index 111388cf138..f82e1073f0b 100644 --- a/libs/docs/platform/table/child-docs/clickable-rows/clickable-rows-docs.component.html +++ b/libs/docs/platform/table/child-docs/clickable-rows/clickable-rows-docs.component.html @@ -1,10 +1,14 @@ - Activable Rows +Activable Cells and Rows -

This example shows activable rows

+

This example shows activable cells and rows

diff --git a/libs/docs/platform/table/examples/platform-table-activable-example.component.html b/libs/docs/platform/table/examples/platform-table-activable-example.component.html index 41a61bea735..f6dbc639891 100644 --- a/libs/docs/platform/table/examples/platform-table-activable-example.component.html +++ b/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)" > diff --git a/libs/docs/platform/table/examples/platform-table-activable-example.component.ts b/libs/docs/platform/table/examples/platform-table-activable-example.component.ts index 8960d28bf50..e1a7d00fa4d 100644 --- a/libs/docs/platform/table/examples/platform-table-activable-example.component.ts +++ b/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): void { console.log(event); } + + onCellActivate(event: TableCellActivateEvent): void { + console.log(event); + } } export interface ExampleItem { diff --git a/libs/platform/table-helpers/models/index.ts b/libs/platform/table-helpers/models/index.ts index b3a236a09ce..a77088a913b 100644 --- a/libs/platform/table-helpers/models/index.ts +++ b/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'; diff --git a/libs/platform/table-helpers/models/table-cell-activate-event.model.ts b/libs/platform/table-helpers/models/table-cell-activate-event.model.ts new file mode 100644 index 00000000000..7cc16226ccc --- /dev/null +++ b/libs/platform/table-helpers/models/table-cell-activate-event.model.ts @@ -0,0 +1,11 @@ +export class TableCellActivateEvent { + /** + * Table cell activate event + * @param columnIndex Index of the clicked column + * @param row Row that was activated + */ + constructor( + public columnIndex: number, + public row: T + ) {} +} diff --git a/libs/platform/table-helpers/models/table-row-activate-event.model.ts b/libs/platform/table-helpers/models/table-row-activate-event.model.ts index 24d90c06433..e4472e7c7ed 100644 --- a/libs/platform/table-helpers/models/table-row-activate-event.model.ts +++ b/libs/platform/table-helpers/models/table-row-activate-event.model.ts @@ -1,7 +1,7 @@ export class TableRowActivateEvent { /** * Table row activate event - * @param index Index of the row + * @param index Index of the activated row * @param row Row that was activated */ constructor( diff --git a/libs/platform/table-helpers/services/table-row.service.ts b/libs/platform/table-helpers/services/table-row.service.ts index 44cf632f84e..8776365cb65 100644 --- a/libs/platform/table-helpers/services/table-row.service.ts +++ b/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 { /** Stream that emits when the table cell being focused. */ readonly cellFocused$: Observable; + /** Stream that emits when the table cell being focused. */ + readonly cellActivate$: Observable>; + /** Toggle row stream. */ readonly toggleRow$: Observable; @@ -61,6 +65,9 @@ export class TableRowService { /** @hidden */ private readonly _cellClickedSubject = new Subject(); + /** @hidden */ + private readonly _cellActivateSubject = new Subject>(); + /** @hidden */ private readonly _cellFocusedSubject = new Subject(); @@ -73,6 +80,7 @@ export class TableRowService { 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 { 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); diff --git a/libs/platform/table/components/table-row/table-row.component.html b/libs/platform/table/components/table-row/table-row.component.html index a83168bd5f4..7710639d162 100644 --- a/libs/platform/table/components/table-row/table-row.component.html +++ b/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()" diff --git a/libs/platform/table/table.component.ts b/libs/platform/table/table.component.ts index 0b80102de08..7d8b44a1e38 100644 --- a/libs/platform/table/table.component.ts +++ b/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 /** Event fired when group/tree row collapsed/expanded. */ @Output() readonly rowToggleOpenState = new EventEmitter>(); - /** Event fired when row clicked. */ + /** Event fired when a cell is clicked or focused. */ + @Output() + readonly cellActivate = new EventEmitter>(); + /** Event fired when row navigated. */ @Output() readonly rowActivate = new EventEmitter>(); /** Event fired when row navigated. */ @@ -842,6 +846,11 @@ export class TableComponent 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 } } + /** @hidden */ + _emitCellActivate(columnIndex: number, row: TableRow): void { + this.cellActivate.emit(new TableCellActivateEvent(columnIndex, row.value)); + } + /** @hidden */ _emitRowActivate(row: TableRow): void { if (!this.rowsActivable) {