feat(addon-table): add new output event with sort and direction changes

Author: splincode

projects/addon-table/components/table/directives/sort-by.directive.ts

@@ -2,7 +2,7 @@ import type {QueryList} from '@angular/core';
 import {ContentChildren, Directive, inject, Input, Output} from '@angular/core';
 import type {TuiComparator} from '@taiga-ui/addon-table/types';
 import {EMPTY_QUERY} from '@taiga-ui/cdk/constants';
-import {delay, filter, map} from 'rxjs';
+import {combineLatest, debounceTime, delay, filter, map} from 'rxjs';
 
 import {TuiTableSortable} from './sortable.directive';
 import {TuiTableDirective} from './table.directive';
@@ -17,6 +17,9 @@ export class TuiTableSortBy<T extends Partial<Record<keyof T, any>>> {
 
     private readonly table = inject(TuiTableDirective<T>);
 
+    /**
+     * @deprecated: use tuiSortChange
+     */
     @Output()
     public readonly tuiSortByChange = this.table.sorterChange.pipe(
         // delay is for getting actual ContentChildren (sortables) https://github.com/angular/angular/issues/38976
@@ -25,6 +28,15 @@ export class TuiTableSortBy<T extends Partial<Record<keyof T, any>>> {
         map((sorter) => this.getKey(sorter)),
     );
 
+    @Output()
+    public readonly tuiSortChange = combineLatest([
+        this.tuiSortByChange,
+        this.table.directionChange,
+    ]).pipe(
+        debounceTime(0),
+        map(([sortBy, orderBy]) => ({sortBy, orderBy})),
+    );
+
     public tuiSortBy: string | keyof T | null = null;
 
     @Input('tuiSortBy')

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

@@ -15,8 +15,8 @@ import {TuiTableDirective} from './table.directive';
 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 table: TuiTableDirective<T> = inject(TuiTableDirective<T>);
+    private readonly th: TuiTableTh<T> = inject(TuiTableTh<T>);
     private readonly sortBy = inject<TuiTableSortBy<T>>(forwardRef(() => TuiTableSortBy));
 
     @Input({

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

@@ -21,7 +21,7 @@ import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 import {tuiBadgeOptionsProvider} from '@taiga-ui/kit/components/badge';
 import {tuiChipOptionsProvider} from '@taiga-ui/kit/components/chip';
 import {tuiProgressOptionsProvider} from '@taiga-ui/kit/components/progress';
-import {Subject} from 'rxjs';
+import {combineLatest, debounceTime, map, Subject} from 'rxjs';
 
 import {TUI_TABLE_OPTIONS, TuiSortDirection} from '../table.options';
 import {TuiStuck} from './stuck.directive';
@@ -71,12 +71,27 @@ export class TuiTableDirective<T extends Partial<Record<keyof T, any>>>
     @Input()
     public direction = this.options.direction;
 
+    /**
+     * @deprecated: use sortChange
+     */
     @Output()
     public readonly directionChange = new EventEmitter<TuiSortDirection>();
 
+    /**
+     * @deprecated: use sortChange
+     */
     @Output()
     public readonly sorterChange = new EventEmitter<TuiComparator<T> | null>();
 
+    @Output()
+    public readonly sortChange = combineLatest([
+        this.sorterChange,
+        this.directionChange,
+    ]).pipe(
+        debounceTime(0),
+        map(([sortBy, orderBy]) => ({sortBy, orderBy})),
+    );
+
     public readonly appearance = signal('table');
     public readonly size = signal(this.options.size);
     public readonly cleaner = signal(false);

projects/addon-table/components/table/table.options.ts

@@ -8,6 +8,11 @@ export const TuiSortDirection = {
 } as const;
 export type TuiSortDirection = (typeof TuiSortDirection)[keyof typeof TuiSortDirection];
 
+export interface TuiSortAndOrder<T> {
+    sortBy: keyof T | null;
+    orderBy: -1 | 1;
+}
+
 export interface TuiTableOptions {
     readonly direction: TuiSortDirection;
     readonly requiredSort: boolean;

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

@@ -58,8 +58,7 @@
         [columns]="columns"
         [direction]="(direction$ | async) || 1"
         [tuiSortBy]="sorter$ | async"
-        (directionChange)="direction$.next($event)"
-        (tuiSortByChange)="sorter$.next($event!)"
+        (tuiSortChange)="change($event)"
     >
         <thead>
             <tr tuiThGroup>

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

@@ -3,7 +3,11 @@ import {Component} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import type {TuiComparator, TuiTablePaginationEvent} from '@taiga-ui/addon-table';
+import type {
+    TuiComparator,
+    TuiSortAndOrder,
+    TuiTablePaginationEvent,
+} from '@taiga-ui/addon-table';
 import {TuiReorder, TuiTable, TuiTablePagination} from '@taiga-ui/addon-table';
 import {
     TUI_DEFAULT_MATCHER,
@@ -188,10 +192,6 @@ export default class Example {
             .map((column) => KEYS[column] ?? '');
     }
 
-    protected onDirection(direction: -1 | 1): void {
-        this.direction$.next(direction);
-    }
-
     protected onPagination({page, size}: TuiTablePaginationEvent): void {
         this.page$.next(page);
         this.size$.next(size);
@@ -201,6 +201,11 @@ export default class Example {
         return !!this.search && TUI_DEFAULT_MATCHER(value, this.search);
     }
 
+    protected change<T>({sortBy, orderBy}: TuiSortAndOrder<T>): void {
+        this.sorter$.next(sortBy as Key);
+        this.direction$.next(orderBy);
+    }
+
     private getData(
         key: 'age' | 'dob' | 'name',
         direction: -1 | 1,