feat(addon-table): Sortable make dynamic (#9384)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Oct 8, 2024 · ea62a09 · ea62a09
1 parent cb31858
commit ea62a09
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 11 deletions.
diff --git a/projects/addon-table/components/table/directives/sortable.directive.ts b/projects/addon-table/components/table/directives/sortable.directive.ts
@@ -1,5 +1,7 @@
-import type {OnInit} from '@angular/core';
-import {Directive, forwardRef, inject} from '@angular/core';
+import type {BooleanInput} from '@angular/cdk/coercion';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import type {OnChanges} from '@angular/core';
+import {Directive, forwardRef, inject, Input} from '@angular/core';
 import type {TuiComparator} from '@taiga-ui/addon-table/types';
 
 import {TuiTableTh} from '../th/th.component';
@@ -10,20 +12,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 {

diff --git a/projects/demo/src/modules/components/table/examples/4/index.html b/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>

diff --git a/projects/demo/src/modules/components/table/examples/4/index.less b/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 {

diff --git a/projects/demo/src/modules/components/table/examples/4/index.ts b/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,
@@ -108,12 +114,15 @@ function getAge({dob}: User): number {
         NgIf,
         ReactiveFormsModule,
         TuiButton,
+        TuiCheckbox,
         TuiChevron,
         TuiDropdown,
         TuiInputModule,
         TuiInputNumberModule,
+        TuiLabel,
         TuiLet,
         TuiLoader,
+        TuiNumberFormat,
         TuiReorder,
         TuiTable,
         TuiTablePagination,
@@ -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));