From e0fc02b31593c2e90528d81fc8b25d49e387839a Mon Sep 17 00:00:00 2001
From: Vladimir Potekhin <46284632+vladimirpotekhin@users.noreply.github.com>
Date: Thu, 30 Nov 2023 11:50:37 +0300
Subject: [PATCH] fix(addon-table): fix sorting on table with dynamic columns
 (#6103)

---
 .../table/directives/sort-by.directive.ts       | 17 ++++++++++++++---
 .../table/directives/sortable.directive.ts      |  6 +++---
 2 files changed, 17 insertions(+), 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
index b808589ae005..88d66f7da919 100644
--- 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
index ecbe0940b1a8..2910999ac707 100644
--- 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);
         }