diff --git a/components/table/src/simple-columns/favorite-column.ts b/components/table/src/simple-columns/favorite-column.ts index 3372d6f789..24585820a6 100644 --- a/components/table/src/simple-columns/favorite-column.ts +++ b/components/table/src/simple-columns/favorite-column.ts @@ -61,7 +61,6 @@ export class DtFavoriteColumn extends DtSimpleColumnBase { * datasource using the predefined name. */ _toggleFavorite(data: T): void { - data[this.name] = !data[this.name]; this.favoriteToggled.emit(data); } } diff --git a/components/table/src/simple-columns/simple-column.spec.ts b/components/table/src/simple-columns/simple-column.spec.ts index 4431cd8f00..167363b4fa 100644 --- a/components/table/src/simple-columns/simple-column.spec.ts +++ b/components/table/src/simple-columns/simple-column.spec.ts @@ -740,6 +740,7 @@ describe('DtTable SimpleColumns', () => { @@ -877,6 +878,18 @@ class TestSimpleColumnsApp implements AfterViewInit { return 'warning'; } } + + toggleFavorite(toggledRow: any): void { + // Modify a data clone and assign the changed state at the end + // to notify change detection about the dataChange in an array. + const modifiedData = [...this.data]; + for (const row of modifiedData) { + if (row === toggledRow) { + row.favorite = !row.favorite; + } + } + this.data = modifiedData; + } } @Component({ diff --git a/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.html b/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.html index a74d280986..c3a61fcd6c 100644 --- a/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.html +++ b/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.html @@ -2,7 +2,7 @@ diff --git a/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.ts b/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.ts index 7a1f9004c4..8dd72d30d7 100644 --- a/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.ts +++ b/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.ts @@ -18,17 +18,19 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { DtSort, DtTableDataSource } from '@dynatrace/barista-components/table'; +interface HostRow { + favorite: boolean; + host: string; + memoryPerc: number; + memoryTotal: number; +} + @Component({ selector: 'dt-example-table-favorite-column', templateUrl: './table-favorite-column-example.html', }) export class DtExampleTableFavoriteColumn implements OnInit { - data: Array<{ - favorite: boolean; - host: string; - memoryPerc: number; - memoryTotal: number; - }> = [ + data: Array = [ { favorite: true, host: 'et-demo-2-win4', @@ -81,7 +83,15 @@ export class DtExampleTableFavoriteColumn implements OnInit { this.dataSource.sort = this.sortable; } - doSomething(): void { - // noop + toggleFavorite(toggledRow: HostRow): void { + // Modify a data clone and assign the changed state at the end + // to notify change detection about the dataChange in an array. + const modifiedData = [...this.data]; + for (const row of modifiedData) { + if (row === toggledRow) { + row.favorite = !row.favorite; + } + } + this.data = modifiedData; } } diff --git a/libs/examples/src/table/table-favorite-column-no-header-example/table-favorite-column-no-header-example.html b/libs/examples/src/table/table-favorite-column-no-header-example/table-favorite-column-no-header-example.html index e3cf2ac396..235267824c 100644 --- a/libs/examples/src/table/table-favorite-column-no-header-example/table-favorite-column-no-header-example.html +++ b/libs/examples/src/table/table-favorite-column-no-header-example/table-favorite-column-no-header-example.html @@ -2,7 +2,7 @@ = [ + data: Array = [ { favorite: true, host: 'et-demo-2-win4', @@ -73,7 +75,15 @@ export class DtExampleTableFavoriteColumnNoHeader { ); } - doSomething(_event: Event): void { - // noop + toggleFavorite(toggledRow: HostRow): void { + // Modify a data clone and assign the changed state at the end + // to notify change detection about the dataChange in an array. + const modifiedData = [...this.data]; + for (const row of modifiedData) { + if (row === toggledRow) { + row.favorite = !row.favorite; + } + } + this.data = modifiedData; } }