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..b088b49ff96 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 92d7c27034b..ade4c506a70 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 @@ -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): void { console.log(event); } + + onCellActivate(event: TableCellActivateEvent): void { + console.log(event); + } } export interface ExampleItem { diff --git a/libs/platform/src/lib/table-helpers/models/index.ts b/libs/platform/src/lib/table-helpers/models/index.ts index 347945d87b7..e84766a7b5e 100644 --- a/libs/platform/src/lib/table-helpers/models/index.ts +++ b/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'; diff --git a/libs/platform/src/lib/table-helpers/models/table-cell-activate-event.model.ts b/libs/platform/src/lib/table-helpers/models/table-cell-activate-event.model.ts new file mode 100644 index 00000000000..a2fa85dc552 --- /dev/null +++ b/libs/platform/src/lib/table-helpers/models/table-cell-activate-event.model.ts @@ -0,0 +1,8 @@ +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/src/lib/table-helpers/services/table-row.service.ts b/libs/platform/src/lib/table-helpers/services/table-row.service.ts index 0a23105e82d..bc8e56aaab7 100644 --- a/libs/platform/src/lib/table-helpers/services/table-row.service.ts +++ b/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 { /** @hidden */ private readonly _cellFocusedSubject = new Subject(); + /** @hidden */ + private readonly _cellActivateSubject = new Subject>(); + + /** Stream that emits when the table cell being focused. */ + readonly cellActivate$ = this._cellActivateSubject.asObservable(); + /** @hidden */ private readonly _toggleAllSelectableRowsSubject = new Subject(); @@ -82,6 +89,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/src/lib/table/components/table-row/table-row.component.html b/libs/platform/src/lib/table/components/table-row/table-row.component.html index 41fa1b91091..58bb2b86861 100644 --- 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 @@ -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()" diff --git a/libs/platform/src/lib/table/table.component.ts b/libs/platform/src/lib/table/table.component.ts index 4d42a5e356a..0a028d158a3 100644 --- a/libs/platform/src/lib/table/table.component.ts +++ b/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 /** 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. */ @@ -773,6 +777,11 @@ export class TableComponent this.cellFocused.emit(event); }) ); + this._subscriptions.add( + this._tableRowService.cellActivate$.subscribe((event) => { + this.cellActivate.emit(event); + }) + ); } /** @@ -1497,6 +1506,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) {