fix(addon-table): fix sorting on table with dynamic columns (#6103)

taiga-family · Nov 30, 2023 · e0fc02b · e0fc02b
1 parent 9152227
commit e0fc02b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/projects/addon-table/components/table/directives/sort-by.directive.ts b/projects/addon-table/components/table/directives/sort-by.directive.ts
@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 import {TuiComparator} from '@taiga-ui/addon-table/types';
 import {EMPTY_QUERY} from '@taiga-ui/cdk';
-import {filter, map} from 'rxjs/operators';
+import {delay, filter, map} from 'rxjs/operators';
 
 import {TuiSortableDirective} from './sortable.directive';
 import {TuiTableDirective} from './table.directive';
@@ -20,19 +20,30 @@ export class TuiSortByDirective<T extends Partial<Record<keyof T, any>>> {
     @ContentChildren(TuiSortableDirective, {descendants: true})
     private readonly sortables: QueryList<TuiSortableDirective<T>> = EMPTY_QUERY;
 
-    @Input()
-    tuiSortBy: string | keyof T | null = null;
+    @Input('tuiSortBy')
+    set sortBy(sortBy: string | keyof T | null) {
+        this.tuiSortBy = sortBy;
+        this.checkSortables();
+    }
 
     @Output()
     readonly tuiSortByChange = this.table.sorterChange.pipe(
+        // delay is for getting actual ContentChildren (sortables) https://github.com/angular/angular/issues/38976
+        delay(0),
         filter(() => !!this.sortables.length),
         map(sorter => this.getKey(sorter)),
     );
 
+    tuiSortBy: string | keyof T | null = null;
+
     constructor(
         @Inject(TuiTableDirective) private readonly table: TuiTableDirective<T>,
     ) {}
 
+    checkSortables(): void {
+        this.sortables.forEach(s => s.check());
+    }
+
     private getKey(sorter: TuiComparator<T> | null): keyof T | null {
         return this.sortables.find(s => s.sorter === sorter)?.key || null;
     }

diff --git a/projects/addon-table/components/table/directives/sortable.directive.ts b/projects/addon-table/components/table/directives/sortable.directive.ts
@@ -1,4 +1,4 @@
-import {Directive, DoCheck, forwardRef, Inject, OnInit} from '@angular/core';
+import {Directive, forwardRef, Inject, OnInit} from '@angular/core';
 import {TuiComparator} from '@taiga-ui/addon-table/types';
 
 import {TuiThComponent} from '../th/th.component';
@@ -9,7 +9,7 @@ import {TuiTableDirective} from './table.directive';
     selector: 'th[tuiTh][tuiSortable]',
 })
 export class TuiSortableDirective<T extends Partial<Record<keyof T, any>>>
-    implements DoCheck, OnInit
+    implements OnInit
 {
     constructor(
         @Inject(forwardRef(() => TuiSortByDirective))
@@ -29,7 +29,7 @@ export class TuiSortableDirective<T extends Partial<Record<keyof T, any>>>
         this.th.sorter = this.sorter;
     }
 
-    ngDoCheck(): void {
+    check(): void {
         if (this.match && this.table.sorter !== this.sorter) {
             this.table.updateSorter(this.sorter);
         }