feat(addon-table): add requireSort option to table (taiga-family#9036)

Co-authored-by: 40oleg <[email protected]>

(cherry picked from commit 38c5b20)

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',

projects/addon-table/components/table/th/th.component.ts

@@ -41,6 +41,10 @@ export class TuiThComponent<T extends Partial<Record<keyof T, any>>> {
     @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<T extends Partial<Record<keyof T, any>>> {
     }
 
     updateSorterAndDirection(): void {
+        const sorter = this.requiredSort ? this.sorter : null;
+
         this.table?.updateSorterAndDirection(
-            this.isCurrentAndAscDirection ? null : this.sorter,
+            this.isCurrentAndAscDirection ? sorter : this.sorter,
         );
     }
 

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

@@ -68,6 +68,7 @@
                     *tuiHead="'age'"
                     tuiSortable
                     tuiTh
+                    [requiredSort]="true"
                 >
                     Age
                 </th>