diff --git a/projects/addon-table/components/table/table.options.ts b/projects/addon-table/components/table/table.options.ts index 5efbcd2fcd78..614c5436aab6 100644 --- a/projects/addon-table/components/table/table.options.ts +++ b/projects/addon-table/components/table/table.options.ts @@ -4,6 +4,7 @@ import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; export interface TuiTableOptions { readonly direction: -1 | 1; + readonly requiredSort: boolean; readonly open: boolean; readonly resizable: boolean; readonly size: TuiSizeL | TuiSizeS; @@ -21,6 +22,7 @@ export const TUI_TABLE_DEFAULT_OPTIONS: TuiTableOptions = { open: true, size: 'm', direction: 1, + requiredSort: false, sortIcons: { asc: 'tuiIconSortAscending', desc: 'tuiIconSortDescending', diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts index 8fc3bd3af6ed..82f2c3c3fc68 100644 --- a/projects/addon-table/components/table/th/th.component.ts +++ b/projects/addon-table/components/table/th/th.component.ts @@ -41,6 +41,10 @@ export class TuiThComponent>> { @HostBinding('class._sticky') sticky = this.options.sticky; + @Input() + @HostBinding('attr.requiredSort') + requiredSort = this.options.requiredSort; + @HostBinding('style.width.px') width: number | null = null; @@ -77,8 +81,10 @@ export class TuiThComponent>> { } updateSorterAndDirection(): void { + const sorter = this.requiredSort ? this.sorter : null; + this.table?.updateSorterAndDirection( - this.isCurrentAndAscDirection ? null : this.sorter, + this.isCurrentAndAscDirection ? sorter : this.sorter, ); } diff --git a/projects/demo/src/modules/tables/table/examples/4/index.html b/projects/demo/src/modules/tables/table/examples/4/index.html index 15f78b2797c1..8123cc6b5d6f 100644 --- a/projects/demo/src/modules/tables/table/examples/4/index.html +++ b/projects/demo/src/modules/tables/table/examples/4/index.html @@ -68,6 +68,7 @@ *tuiHead="'age'" tuiSortable tuiTh + [requiredSort]="true" > Age