feat(addon-table): Sortable make dynamic

projects/addon-table/components/table/directives/sortable.directive.ts

@@ -1,5 +1,5 @@
-import type {OnInit} from '@angular/core';
-import {Directive, forwardRef, inject} from '@angular/core';
+import {type BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {Directive, forwardRef, inject, Input, type OnChanges} from '@angular/core';
 import type {TuiComparator} from '@taiga-ui/addon-table/types';
 
 import {TuiTableTh} from '../th/th.component';
@@ -10,20 +10,32 @@ import {TuiTableDirective} from './table.directive';
     standalone: true,
     selector: 'th[tuiTh][tuiSortable]',
 })
-export class TuiTableSortable<T extends Partial<Record<keyof T, any>>> implements OnInit {
+export class TuiTableSortable<T extends Partial<Record<keyof T, any>>>
+    implements OnChanges
+{
     private readonly table = inject(TuiTableDirective<T>);
     private readonly th = inject(TuiTableTh<T>);
     private readonly sortBy = inject<TuiTableSortBy<T>>(forwardRef(() => TuiTableSortBy));
 
+    @Input({
+        alias: 'tuiSortable',
+        transform: coerceBooleanProperty,
+    })
+    public sortable: BooleanInput;
+
     public get key(): keyof T {
         return this.th.key;
     }
 
     public sorter: TuiComparator<T> = (): number => 0;
 
-    public ngOnInit(): void {
-        this.sorter = this.match ? this.table.sorter : this.sorter;
-        this.th.sorter = this.sorter;
+    public ngOnChanges(): void {
+        if (this.sortable) {
+            this.sorter = this.match ? this.table.sorter : this.sorter;
+            this.th.sorter = this.sorter;
+        } else {
+            this.th.sorter = null;
+        }
     }
 
     public check(): void {

projects/demo/src/modules/components/table/examples/4/index.html

@@ -10,12 +10,21 @@
         Find on page
     </tui-input>
     <tui-input-number
-        decimal="never"
-        class="tui-space_horizontal-3"
         [formControl]="minAge"
+        [tuiNumberFormat]="{precision: 0}"
     >
         Minimum age
     </tui-input-number>
+</p>
+<p class="filters">
+    <label tuiLabel>
+        <input
+            tuiCheckbox
+            type="checkbox"
+            [(ngModel)]="dob"
+        />
+        Enable sorting by DOB
+    </label>
     <button
         size="m"
         tuiButton
@@ -60,8 +69,8 @@
                 </th>
                 <th
                     *tuiHead="'dob'"
-                    tuiSortable
                     tuiTh
+                    [tuiSortable]="dob"
                 >
                     Date of Birth
                 </th>

projects/demo/src/modules/components/table/examples/4/index.less

@@ -4,6 +4,9 @@
 
 .filters {
     display: flex;
+    gap: 1rem;
+    white-space: nowrap;
+    align-items: center;
 }
 
 .input {

projects/demo/src/modules/components/table/examples/4/index.ts

@@ -15,8 +15,14 @@ import {
     TuiLet,
     tuiToInt,
 } from '@taiga-ui/cdk';
-import {TuiButton, TuiDropdown, TuiLoader} from '@taiga-ui/core';
-import {TuiChevron} from '@taiga-ui/kit';
+import {
+    TuiButton,
+    TuiDropdown,
+    TuiLabel,
+    TuiLoader,
+    TuiNumberFormat,
+} from '@taiga-ui/core';
+import {TuiCheckbox, TuiChevron} from '@taiga-ui/kit';
 import {
     TuiInputModule,
     TuiInputNumberModule,
@@ -118,6 +124,9 @@ function getAge({dob}: User): number {
         TuiTable,
         TuiTablePagination,
         TuiTextfieldControllerModule,
+        TuiNumberFormat,
+        TuiLabel,
+        TuiCheckbox,
     ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
@@ -152,6 +161,8 @@ export default class Example {
 
     protected columns = ['name', 'dob', 'age'];
 
+    protected dob = false;
+
     protected search = '';
 
     protected readonly loading$ = this.request$.pipe(map(tuiIsFalsy));