diff --git a/projects/components/src/table/table.component.test.ts b/projects/components/src/table/table.component.test.ts index a99b7a62c..919ea6c7a 100644 --- a/projects/components/src/table/table.component.test.ts +++ b/projects/components/src/table/table.component.test.ts @@ -445,6 +445,34 @@ describe('Table component', () => { flush(); })); + test('should emit correctly on column changes', fakeAsync(() => { + const mockColumnConfigsChange = jest.fn(); + const columns = buildColumns(); + const spectator = createHost( + ``, + { + hostProps: { + columnConfigs: columns, + data: buildData(), + selectionMode: TableSelectionMode.Multiple, + mode: TableMode.Flat, + mockColumnConfigsChange: mockColumnConfigsChange + } + } + ); + + // Hiding a column + spectator.component.onHideColumn(columns[0]); + expect(mockColumnConfigsChange).toHaveBeenLastCalledWith( + expect.arrayContaining([ + expect.objectContaining({ ...columns[0], visible: false }), + expect.objectContaining({ ...columns[1] }) + ]) + ); + flush(); + })); + test('should select only selected rows', fakeAsync(() => { const columns = buildColumns(); const rows = buildData(); diff --git a/projects/components/src/table/table.component.ts b/projects/components/src/table/table.component.ts index b20c3314e..356c60aa3 100644 --- a/projects/components/src/table/table.component.ts +++ b/projects/components/src/table/table.component.ts @@ -2,8 +2,8 @@ /* eslint-disable @angular-eslint/component-max-inline-declarations */ import { ModalService } from '../modal/modal.service'; import { - TableEditColumnsModalConfig, - TableEditColumnsModalComponent + TableEditColumnsModalComponent, + TableEditColumnsModalConfig } from './columns/table-edit-columns-modal.component'; import { CdkHeaderRow } from '@angular/cdk/table'; import { @@ -35,7 +35,7 @@ import { } from '@hypertrace/common'; import { isNil, without } from 'lodash-es'; import { BehaviorSubject, combineLatest, merge, Observable, Subject } from 'rxjs'; -import { switchMap, take, filter, map } from 'rxjs/operators'; +import { filter, map, switchMap, take } from 'rxjs/operators'; import { FilterAttribute } from '../filtering/filter/filter-attribute'; import { LoadAsyncConfig } from '../load-async/load-async.service'; import { PageEvent } from '../paginator/page.event'; @@ -719,7 +719,7 @@ export class TableComponent this.initialColumnConfigIdWidthMap = new Map(visibleColumns.map(column => [column.id, column.width ?? -1])); this.updateVisibleColumns(visibleColumns); - this.columnConfigsSubject.next(columnConfigurations); + this.propagateUpdatedColumns(columnConfigurations); } private checkColumnWidthCompatibilityOrThrow(width?: TableColumnWidth): void { @@ -823,7 +823,7 @@ export class TableComponent const updatedColumns = this.columnConfigsSubject.value; this.updateVisibleColumns(updatedColumns.filter(c => c.visible)); this.distributeWidthToColumns(TableColumnWidthUtil.getColWidthInPx(column.width)); - this.columnConfigsSubject.next(updatedColumns); + this.propagateUpdatedColumns(updatedColumns); } public showEditColumnsModal(): void { @@ -909,6 +909,11 @@ export class TableComponent return this.hasExpandableRows() ? index - 1 : index; } + private propagateUpdatedColumns(updatedColumns: TableColumnConfigExtended[]): void { + this.columnConfigsSubject.next(updatedColumns); + this.columnConfigsChange.next(updatedColumns); + } + private buildColumnConfigExtendeds(columnConfigs: TableColumnConfig[]): TableColumnConfigExtended[] { const stateColumns = [];