diff --git a/projects/addon-table/components/table/directives/sortable.directive.ts b/projects/addon-table/components/table/directives/sortable.directive.ts index b413e4164196..e6ef467febe2 100644 --- 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>> implements OnInit { +export class TuiTableSortable>> + implements OnChanges +{ private readonly table = inject(TuiTableDirective); private readonly th = inject(TuiTableTh); private readonly sortBy = inject>(forwardRef(() => TuiTableSortBy)); + @Input({ + alias: 'tuiSortable', + transform: coerceBooleanProperty, + }) + public sortable: BooleanInput; + public get key(): keyof T { return this.th.key; } public sorter: TuiComparator = (): 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 index c6254112a990..ba826abd9f01 100644 --- 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 Minimum age +

+

+