@taiga-ui/addon-table 4.52.0-canary.6043e8f → 4.52.0-canary.61fea47

package/fesm2022/taiga-ui-addon-table-components-table.mjs

@@ -1,17 +1,18 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, ViewEncapsulation, Component, inject, TemplateRef, Input, Directive, InjectionToken, ChangeDetectorRef, EventEmitter, signal, Output, forwardRef, ContentChildren, Pipe, SkipSelf, PLATFORM_ID, computed, ViewChild, ContentChild } from '@angular/core';
-import { map, distinctUntilChanged, catchError, EMPTY, combineLatest, debounceTime, Subject, switchMap, takeUntil, delay, filter, timer, of, ReplaySubject, startWith } from 'rxjs';
-import { tuiProvideOptions, tuiWithStyles, tuiProvide, tuiDefaultSort, tuiPure } from '@taiga-ui/cdk/utils/miscellaneous';
+import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, TemplateRef, Directive, ChangeDetectorRef, output, signal, Input, effect, forwardRef, untracked, computed, contentChildren, Pipe, SkipSelf, viewChild, PLATFORM_ID, model, contentChild } from '@angular/core';
+import { toSignal, outputToObservable, outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { tuiWithStyles, tuiSetSignal, tuiDefaultSort, tuiPure } from '@taiga-ui/cdk/utils/miscellaneous';
+import { map, distinctUntilChanged, catchError, EMPTY, combineLatest, debounceTime, Subject, switchMap, takeUntil, delay, filter, timer, of, ReplaySubject } from 'rxjs';
+import { tuiCreateOptions, tuiProvide } from '@taiga-ui/cdk/utils/di';
 import { IntersectionObserverService, WA_INTERSECTION_THRESHOLD, WA_INTERSECTION_ROOT_MARGIN } from '@ng-web-apis/intersection-observer';
 import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
 import { TUI_TEXTFIELD_OPTIONS, TuiTextfieldComponent } from '@taiga-ui/core/components/textfield';
 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 { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { tuiWatch, tuiTypedFromEvent, tuiPreventDefault, tuiZoneOptimized, tuiQueryListChanges } from '@taiga-ui/cdk/observables';
-import { DOCUMENT, AsyncPipe, NgIf, NgTemplateOutlet, isPlatformServer } from '@angular/common';
-import { EMPTY_CLIENT_RECT, EMPTY_QUERY } from '@taiga-ui/cdk/constants';
+import { tuiWatch, tuiTypedFromEvent, tuiPreventDefault, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
+import { DOCUMENT, AsyncPipe, NgTemplateOutlet, isPlatformServer } from '@angular/common';
+import { EMPTY_CLIENT_RECT } from '@taiga-ui/cdk/constants';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { TuiIcon } from '@taiga-ui/core/components/icon';
@@ -29,26 +30,23 @@ class TuiTableCaption {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableCaption, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'caption[tuiCaption]', template: '<ng-content/>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["caption[tuiCaption]{caption-side:bottom;text-align:start;padding:.75rem 0;color:var(--tui-text-secondary)}caption[tuiCaption]>*:not(:first-child){margin-inline-start:.5rem}caption[tuiCaption] tui-pagination:not(:first-child),caption[tuiCaption] tui-pager:not(:first-child){display:inline-flex;vertical-align:middle}\n"] }]
+            args: [{ selector: 'caption[tuiCaption]', template: '<ng-content/>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["caption[tuiCaption]{caption-side:bottom;text-align:start;padding:.75rem 0;color:var(--tui-text-secondary)}caption[tuiCaption]>*:not(:first-child){margin-inline-start:.5rem}caption[tuiCaption] tui-pagination:not(:first-child),caption[tuiCaption] tui-pager:not(:first-child){display:inline-flex;vertical-align:middle}\n"] }]
         }] });
 
 class TuiTableCell {
     constructor() {
-        this.tuiCell = '';
+        this.tuiCell = input('');
         this.template = inject((TemplateRef));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTableCell, isStandalone: true, selector: "ng-template[tuiCell]", inputs: { tuiCell: "tuiCell" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiTableCell, isStandalone: true, selector: "ng-template[tuiCell]", inputs: { tuiCell: { classPropertyName: "tuiCell", publicName: "tuiCell", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableCell, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'ng-template[tuiCell]',
                 }]
-        }], propDecorators: { tuiCell: [{
-                type: Input
-            }] } });
+        }] });
 
 const TuiSortDirection = {
     Asc: 1,
@@ -67,12 +65,7 @@ const TUI_TABLE_DEFAULT_OPTIONS = {
         off: '@tui.chevrons-up-down',
     },
 };
-const TUI_TABLE_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_TABLE_OPTIONS' : '', {
-    factory: () => TUI_TABLE_DEFAULT_OPTIONS,
-});
-function tuiTableOptionsProvider(options) {
-    return tuiProvideOptions(TUI_TABLE_OPTIONS, options, TUI_TABLE_DEFAULT_OPTIONS);
-}
+const [TUI_TABLE_OPTIONS, tuiTableOptionsProvider] = tuiCreateOptions(TUI_TABLE_DEFAULT_OPTIONS);
 
 // TODO: Consider making universal and moving to CDK
 class TuiStuck {
@@ -91,7 +84,6 @@ class TuiStuck {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiStuck, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'tui-stuck:never',
                     providers: [
                         IntersectionObserverService,
@@ -105,53 +97,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }] });
 
 const EMPTY_COMPARATOR = () => 0;
-class TuiTableStyles {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiTableStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-table" }, ngImport: i0, template: '', isInline: true, styles: ["table[tuiTable]{border-collapse:separate;border-spacing:0}table[tuiTable] [tuiCell]{padding:0}table[tuiTable] [tuiTitle]{white-space:nowrap}table[tuiTable] [tuiTitle] tui-icon{font-size:1rem}table[tuiTable] [tuiSubtitle]{color:var(--tui-text-secondary)}table[tuiTable] [tuiTh] [tuiCell],table[tuiTable] [tuiTh] [tuiTitle]{font:inherit;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+class Styles {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: Styles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-table" }, ngImport: i0, template: '', isInline: true, styles: ["table[tuiTable]{border-collapse:separate;border-spacing:0}table[tuiTable] [tuiCell]{padding:0}table[tuiTable] [tuiTitle]{white-space:nowrap}table[tuiTable] [tuiTitle] tui-icon{font-size:1rem}table[tuiTable] [tuiSubtitle]{color:var(--tui-text-secondary)}table[tuiTable] [tuiTh] [tuiCell],table[tuiTable] [tuiTh] [tuiTitle]{font:inherit;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableStyles, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: Styles, decorators: [{
             type: Component,
-            args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'tui-table',
-                    }, styles: ["table[tuiTable]{border-collapse:separate;border-spacing:0}table[tuiTable] [tuiCell]{padding:0}table[tuiTable] [tuiTitle]{white-space:nowrap}table[tuiTable] [tuiTitle] tui-icon{font-size:1rem}table[tuiTable] [tuiSubtitle]{color:var(--tui-text-secondary)}table[tuiTable] [tuiTh] [tuiCell],table[tuiTable] [tuiTh] [tuiTitle]{font:inherit;color:inherit}\n"] }]
+            args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'tui-table' }, styles: ["table[tuiTable]{border-collapse:separate;border-spacing:0}table[tuiTable] [tuiCell]{padding:0}table[tuiTable] [tuiTitle]{white-space:nowrap}table[tuiTable] [tuiTitle] tui-icon{font-size:1rem}table[tuiTable] [tuiSubtitle]{color:var(--tui-text-secondary)}table[tuiTable] [tuiTh] [tuiCell],table[tuiTable] [tuiTh] [tuiTitle]{font:inherit;color:inherit}\n"] }]
         }] });
 class TuiTableDirective {
     constructor() {
         this.options = inject(TUI_TABLE_OPTIONS);
         this.cdr = inject(ChangeDetectorRef);
-        this.nothing = tuiWithStyles(TuiTableStyles);
-        this.columns = [];
-        this.direction = this.options.direction;
+        this.nothing = tuiWithStyles(Styles);
+        this.columns = input([]);
+        this.direction = input(this.options.direction);
         this.sorter = EMPTY_COMPARATOR;
         /**
          * @deprecated: use sortChange
          */
-        this.directionChange = new EventEmitter();
+        this.directionChange = output();
         /**
          * @deprecated: use sortChange
          */
-        this.sorterChange = new EventEmitter();
-        this.sortChange = combineLatest([
-            this.sorterChange,
-            this.directionChange,
+        this.directionChange$ = outputToObservable(this.directionChange);
+        /**
+         * @deprecated: use sortChange
+         */
+        this.sorterChange = output();
+        this.sorterChange$ = outputToObservable(this.sorterChange);
+        this.sortChange$ = combineLatest([
+            this.sorterChange$,
+            this.directionChange$,
         ]).pipe(debounceTime(0), map(([sortComparator, sortDirection]) => ({
             sortBy: sortComparator,
             orderBy: sortDirection,
             sortComparator,
             sortDirection,
         })));
+        this.sortChange = outputFromObservable(this.sortChange$);
         this.appearance = signal('table');
-        this.size = signal(this.options.size);
+        this.size = input(this.options.size);
         this.cleaner = signal(false);
         // TODO: refactor to signal inputs after Angular update
         this.change$ = new Subject();
     }
-    set sizeSetter(size) {
-        this.size.set(size);
-    }
     updateSorterAndDirection(sorter) {
         if (this.sorter === sorter) {
-            this.updateSorter(this.sorter, this.direction === TuiSortDirection.Asc
+            this.updateSorter(this.sorter, this.direction() === TuiSortDirection.Asc
                 ? TuiSortDirection.Desc
                 : TuiSortDirection.Asc);
         }
@@ -166,14 +159,14 @@ class TuiTableDirective {
         this.cdr.detectChanges();
     }
     updateSorter(sorter, direction = TuiSortDirection.Asc) {
-        this.sorter = sorter || EMPTY_COMPARATOR;
-        this.direction = direction;
+        this.sorter = sorter || EMPTY_COMPARATOR.bind({});
+        tuiSetSignal(this.direction, direction);
         this.sorterChange.emit(sorter);
-        this.directionChange.emit(this.direction);
+        this.directionChange.emit(this.direction());
         this.change$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTableDirective, isStandalone: true, selector: "table[tuiTable]", inputs: { columns: "columns", direction: "direction", sorter: "sorter", sizeSetter: ["size", "sizeSetter"] }, outputs: { directionChange: "directionChange", sorterChange: "sorterChange", sortChange: "sortChange" }, host: { properties: { "attr.data-size": "size()" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiTableDirective, isStandalone: true, selector: "table[tuiTable]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, sorter: { classPropertyName: "sorter", publicName: "sorter", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { directionChange: "directionChange", sorterChange: "sorterChange", sortChange: "sortChange" }, host: { attributes: { "tuiTable": "" }, properties: { "attr.data-size": "size()" } }, providers: [
             {
                 provide: WA_INTERSECTION_ROOT_MARGIN,
                 useValue: '10000px 10000px 10000px 0px',
@@ -188,7 +181,6 @@ class TuiTableDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'table[tuiTable]',
                     providers: [
                         {
@@ -203,80 +195,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ],
                     hostDirectives: [TuiStuck],
                     host: {
+                        tuiTable: '',
                         '[attr.data-size]': 'size()',
                     },
                 }]
-        }], propDecorators: { columns: [{
+        }], propDecorators: { sorter: [{
                 type: Input
-            }], direction: [{
-                type: Input
-            }], sorter: [{
-                type: Input
-            }], directionChange: [{
-                type: Output
-            }], sorterChange: [{
-                type: Output
-            }], sortChange: [{
-                type: Output
-            }], sizeSetter: [{
-                type: Input,
-                args: ['size']
             }] } });
 
 class TuiTableDirectionOrder {
     constructor() {
         this.table = inject((TuiTableDirective));
+        this.directionOrderChange$ = this.table.directionChange$.pipe(map((dir) => (dir === 1 ? 'asc' : 'desc')));
         /**
          * @deprecated: use tuiSortChange
          */
-        this.directionOrderChange = this.table.directionChange.pipe(map((dir) => (dir === 1 ? 'asc' : 'desc')));
-    }
-    set directionOrder(order) {
-        this.table.direction =
-            order === 'asc' ? TuiSortDirection.Asc : TuiSortDirection.Desc;
+        this.directionOrderChange = outputFromObservable(this.directionOrderChange$);
+        this.directionOrder = input();
+        this.setTableDirection = effect((_, order = this.directionOrder()) => {
+            tuiSetSignal(this.table.direction, order === 'asc' ? TuiSortDirection.Asc : TuiSortDirection.Desc);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableDirectionOrder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTableDirectionOrder, isStandalone: true, selector: "table[tuiTable][tuiDirectionOrder]", inputs: { directionOrder: "directionOrder" }, outputs: { directionOrderChange: "directionOrderChange" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiTableDirectionOrder, isStandalone: true, selector: "table[tuiTable][tuiDirectionOrder]", inputs: { directionOrder: { classPropertyName: "directionOrder", publicName: "directionOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { directionOrderChange: "directionOrderChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableDirectionOrder, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'table[tuiTable][tuiDirectionOrder]',
                 }]
-        }], propDecorators: { directionOrderChange: [{
-                type: Output
-            }], directionOrder: [{
-                type: Input
-            }] } });
+        }] });
 
 class TuiTableHead {
     constructor() {
-        this.tuiHead = '';
+        this.tuiHead = input.required();
         this.template = inject((TemplateRef));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableHead, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTableHead, isStandalone: true, selector: "[tuiHead]", inputs: { tuiHead: "tuiHead" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiTableHead, isStandalone: true, selector: "[tuiHead]", inputs: { tuiHead: { classPropertyName: "tuiHead", publicName: "tuiHead", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableHead, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[tuiHead]',
                 }]
-        }], propDecorators: { tuiHead: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+        }] });
 
 class TuiTableResized {
     constructor() {
         this.doc = inject(DOCUMENT);
         this.el = tuiInjectElement();
-        this.tuiResized = tuiTypedFromEvent(this.el, 'mousedown').pipe(tuiPreventDefault(), switchMap(() => {
+        this.tuiResized$ = tuiTypedFromEvent(this.el, 'mousedown').pipe(tuiPreventDefault(), switchMap(() => {
             const { width, right } = this.el.closest('th')?.getBoundingClientRect() || EMPTY_CLIENT_RECT;
             return tuiTypedFromEvent(this.doc, 'mousemove').pipe(distinctUntilChanged(), map(({ clientX }) => width + clientX - right), takeUntil(tuiTypedFromEvent(this.doc, 'mouseup')));
         }));
+        this.tuiResized = outputFromObservable(this.tuiResized$);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableResized, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTableResized, isStandalone: true, selector: "[tuiResized]", outputs: { tuiResized: "tuiResized" }, ngImport: i0 }); }
@@ -284,12 +257,9 @@ class TuiTableResized {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableResized, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[tuiResized]',
                 }]
-        }], propDecorators: { tuiResized: [{
-                type: Output
-            }] } });
+        }] });
 
 /// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
 class TuiTableTh {
@@ -298,67 +268,57 @@ class TuiTableTh {
         this.head = inject(TuiTableHead, {
             optional: true,
         });
-        this.width = null;
+        this.width = signal(null);
         this.table = inject(forwardRef(() => TuiTableDirective), { optional: true });
-        this.minWidth = -Infinity;
-        this.maxWidth = Infinity;
+        this.minWidth = input(-Infinity);
+        this.maxWidth = input(Infinity);
         this.sorter = this.head
             ? (a, b) => tuiDefaultSort(a[this.key], b[this.key])
             : null;
-        this.resizable = this.options.resizable;
-        this.sticky = this.options.sticky;
-        this.requiredSort = this.options.requiredSort;
+        this.resizable = input(this.options.resizable);
+        this.sticky = input(this.options.sticky);
+        this.requiredSort = input(this.options.requiredSort);
     }
     get key() {
         if (!this.head) {
             throw new TuiTableSortKeyException();
         }
-        return this.head.tuiHead;
+        return this.head.tuiHead();
     }
     get isCurrent() {
         return !!this.sorter && !!this.table && this.sorter === this.table.sorter;
     }
     get icon() {
         if (this.isCurrent) {
-            return this.table?.direction === TuiSortDirection.Asc
+            return this.table?.direction() === TuiSortDirection.Asc
                 ? this.options.sortIcons.asc
                 : this.options.sortIcons.desc;
         }
         return this.options.sortIcons.off;
     }
     updateSorterAndDirection() {
-        const sorter = this.requiredSort ? this.sorter : null;
+        const sorter = this.requiredSort() ? this.sorter : null;
         this.table?.updateSorterAndDirection(this.isCurrentAndDescDirection ? sorter : this.sorter);
     }
     onResized(width) {
-        this.width = Math.min(Math.max(width, this.minWidth), this.maxWidth);
+        this.width.set(Math.min(Math.max(width, this.minWidth()), this.maxWidth()));
     }
     get isCurrentAndDescDirection() {
         return (this.sorter === this.table?.sorter &&
-            this.table?.direction === TuiSortDirection.Desc);
+            this.table?.direction() === TuiSortDirection.Desc);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableTh, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiTableTh, isStandalone: true, selector: "th[tuiTh]", inputs: { minWidth: "minWidth", maxWidth: "maxWidth", sorter: "sorter", resizable: "resizable", sticky: "sticky", requiredSort: "requiredSort" }, host: { properties: { "style.min-width.px": "width || minWidth", "style.width.px": "width || minWidth", "style.max-width.px": "width || maxWidth", "class._sticky": "sticky" } }, ngImport: i0, template: "<button\n    *ngIf=\"sorter && table; else content\"\n    type=\"button\"\n    class=\"t-sort\"\n    [class.t-sort_sorted]=\"isCurrent\"\n    (click)=\"updateSorterAndDirection()\"\n>\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    {{ table && table.change$ | async }}\n    <tui-icon\n        class=\"t-icon\"\n        [icon]=\"icon\"\n    />\n</button>\n<ng-template #content>\n    <ng-content />\n</ng-template>\n<div\n    *ngIf=\"resizable\"\n    class=\"t-bar\"\n    (tuiResized)=\"onResized($event)\"\n></div>\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;block-size:var(--tui-height-m);font:var(--tui-font-text-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;left:100%;bottom:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;display:inline-flex;vertical-align:top;flex-direction:inherit;align-items:center;outline:none;font:inherit;text-transform:inherit;color:inherit;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;inline-size:.1875rem;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon:before{font-size:1rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiTableResized, selector: "[tuiResized]", outputs: ["tuiResized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTableTh, isStandalone: true, selector: "th[tuiTh]", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, sorter: { classPropertyName: "sorter", publicName: "sorter", isSignal: false, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, requiredSort: { classPropertyName: "requiredSort", publicName: "requiredSort", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.min-width.px": "width() || minWidth()", "style.width.px": "width() || minWidth()", "style.max-width.px": "width() || maxWidth()", "class._sticky": "sticky()" } }, ngImport: i0, template: "@if (sorter && table) {\n    <button\n        type=\"button\"\n        class=\"t-sort\"\n        [class.t-sort_sorted]=\"isCurrent\"\n        (click)=\"updateSorterAndDirection()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"content\" />\n        {{ table.change$ | async }}\n        <tui-icon\n            class=\"t-icon\"\n            [icon]=\"icon\"\n        />\n    </button>\n} @else {\n    <ng-container [ngTemplateOutlet]=\"content\" />\n}\n<ng-template #content>\n    <ng-content />\n</ng-template>\n@if (resizable()) {\n    <div\n        class=\"t-bar\"\n        (tuiResized)=\"onResized($event)\"\n    ></div>\n}\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;block-size:var(--tui-height-m);font:var(--tui-font-text-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;left:100%;bottom:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;display:inline-flex;vertical-align:top;flex-direction:inherit;align-items:center;outline:none;font:inherit;text-transform:inherit;color:inherit;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;inline-size:.1875rem;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon:before{font-size:1rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiTableResized, selector: "[tuiResized]", outputs: ["tuiResized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableTh, decorators: [{
             type: Component,
-            args: [{ selector: 'th[tuiTh]', imports: [AsyncPipe, NgIf, NgTemplateOutlet, TuiIcon, TuiTableResized], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[style.min-width.px]': 'width || minWidth',
-                        '[style.width.px]': 'width || minWidth',
-                        '[style.max-width.px]': 'width || maxWidth',
-                        '[class._sticky]': 'sticky',
-                    }, template: "<button\n    *ngIf=\"sorter && table; else content\"\n    type=\"button\"\n    class=\"t-sort\"\n    [class.t-sort_sorted]=\"isCurrent\"\n    (click)=\"updateSorterAndDirection()\"\n>\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    {{ table && table.change$ | async }}\n    <tui-icon\n        class=\"t-icon\"\n        [icon]=\"icon\"\n    />\n</button>\n<ng-template #content>\n    <ng-content />\n</ng-template>\n<div\n    *ngIf=\"resizable\"\n    class=\"t-bar\"\n    (tuiResized)=\"onResized($event)\"\n></div>\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;block-size:var(--tui-height-m);font:var(--tui-font-text-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;left:100%;bottom:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;display:inline-flex;vertical-align:top;flex-direction:inherit;align-items:center;outline:none;font:inherit;text-transform:inherit;color:inherit;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;inline-size:.1875rem;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon:before{font-size:1rem}\n"] }]
-        }], propDecorators: { minWidth: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], sorter: [{
-                type: Input
-            }], resizable: [{
-                type: Input
-            }], sticky: [{
-                type: Input
-            }], requiredSort: [{
+            args: [{ selector: 'th[tuiTh]', imports: [AsyncPipe, NgTemplateOutlet, TuiIcon, TuiTableResized], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.min-width.px]': 'width() || minWidth()',
+                        '[style.width.px]': 'width() || minWidth()',
+                        '[style.max-width.px]': 'width() || maxWidth()',
+                        '[class._sticky]': 'sticky()',
+                    }, template: "@if (sorter && table) {\n    <button\n        type=\"button\"\n        class=\"t-sort\"\n        [class.t-sort_sorted]=\"isCurrent\"\n        (click)=\"updateSorterAndDirection()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"content\" />\n        {{ table.change$ | async }}\n        <tui-icon\n            class=\"t-icon\"\n            [icon]=\"icon\"\n        />\n    </button>\n} @else {\n    <ng-container [ngTemplateOutlet]=\"content\" />\n}\n<ng-template #content>\n    <ng-content />\n</ng-template>\n@if (resizable()) {\n    <div\n        class=\"t-bar\"\n        (tuiResized)=\"onResized($event)\"\n    ></div>\n}\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;block-size:var(--tui-height-m);font:var(--tui-font-text-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;left:100%;bottom:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;display:inline-flex;vertical-align:top;flex-direction:inherit;align-items:center;outline:none;font:inherit;text-transform:inherit;color:inherit;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;inline-size:.1875rem;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon:before{font-size:1rem}\n"] }]
+        }], propDecorators: { sorter: [{
                 type: Input
             }] } });
 class TuiTableSortKeyException extends Error {
@@ -372,96 +332,79 @@ class TuiTableSortable {
         this.table = inject((TuiTableDirective));
         this.th = inject((TuiTableTh));
         this.sortBy = inject(forwardRef(() => TuiTableSortBy));
-        this.sorter = () => 0;
+        this.sortable = input(undefined, {
+            alias: 'tuiSortable',
+            transform: coerceBooleanProperty,
+        });
+        this.setSorter = effect(() => {
+            this.th.sorter = this.sortable() ? untracked(this.sorter) : null;
+        });
+        this.sorter = computed(() => {
+            return this.sortable() && this.match ? this.table.sorter : () => 0;
+        });
     }
     get key() {
         return this.th.key;
     }
-    ngOnChanges() {
-        if (this.sortable) {
-            this.sorter = this.match ? this.table.sorter : this.sorter;
-            this.th.sorter = this.sorter;
-        }
-        else {
-            this.th.sorter = null;
-        }
-    }
     check() {
-        if (this.match && this.table.sorter !== this.sorter) {
-            this.table.updateSorter(this.sorter);
+        if (this.match && this.table.sorter !== this.sorter()) {
+            this.table.updateSorter(this.sorter());
         }
     }
     get match() {
-        return this.sortBy.tuiSortBy === this.key;
+        return untracked(this.sortBy.tuiSortBy) === this.key;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableSortable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.15", type: TuiTableSortable, isStandalone: true, selector: "th[tuiTh][tuiSortable]", inputs: { sortable: ["tuiSortable", "sortable", coerceBooleanProperty] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiTableSortable, isStandalone: true, selector: "th[tuiTh][tuiSortable]", inputs: { sortable: { classPropertyName: "sortable", publicName: "tuiSortable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableSortable, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'th[tuiTh][tuiSortable]',
                 }]
-        }], propDecorators: { sortable: [{
-                type: Input,
-                args: [{
-                        alias: 'tuiSortable',
-                        transform: coerceBooleanProperty,
-                    }]
-            }] } });
+        }] });
 
 class TuiTableSortBy {
     constructor() {
-        this.sortables = EMPTY_QUERY;
+        this.sortables = contentChildren(TuiTableSortable, {
+            descendants: true,
+        });
         this.table = inject((TuiTableDirective));
         /**
-         * @deprecated: use tuiSortChange
+         * @deprecated
          */
-        this.tuiSortByChange = this.table.sorterChange.pipe(
+        this.tuiSortByChange$ = this.table.sorterChange$.pipe(
         // delay is for getting actual ContentChildren (sortables) https://github.com/angular/angular/issues/38976
-        delay(0), filter(() => !!this.sortables.length), map((sorter) => this.getKey(sorter)));
-        this.tuiSortChange = combineLatest([
-            this.tuiSortByChange,
-            this.table.directionChange,
+        delay(0), filter(() => !!this.sortables().length), map((sorter) => this.getKey(sorter)));
+        /**
+         * @deprecated: use tuiSortChange
+         */
+        this.tuiSortByChange = outputFromObservable(this.tuiSortByChange$);
+        this.tuiSortChange$ = combineLatest([
+            this.tuiSortByChange$,
+            this.table.directionChange$,
         ]).pipe(debounceTime(0), map(([sortKey, sortDirection]) => ({
             sortBy: sortKey,
             orderBy: sortDirection,
             sortKey,
             sortDirection,
         })));
-        this.tuiSortBy = null;
-    }
-    set sortBy(sortBy) {
-        this.tuiSortBy = sortBy;
-        this.checkSortables();
-    }
-    checkSortables() {
-        this.sortables.forEach((s) => s.check());
+        this.tuiSortChange = outputFromObservable(this.tuiSortChange$);
+        this.tuiSortBy = input(null);
+        this.checkSortables = effect((_, __ = this.tuiSortBy()) => untracked(this.sortables).forEach((s) => s.check()));
     }
     getKey(sorter) {
-        return this.sortables.find((s) => s.sorter === sorter)?.key || null;
+        return this.sortables().find((s) => s.sorter() === sorter)?.key || null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableSortBy, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTableSortBy, isStandalone: true, selector: "table[tuiTable][tuiSortBy]", inputs: { sortBy: ["tuiSortBy", "sortBy"] }, outputs: { tuiSortByChange: "tuiSortByChange", tuiSortChange: "tuiSortChange" }, queries: [{ propertyName: "sortables", predicate: TuiTableSortable, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: TuiTableSortBy, isStandalone: true, selector: "table[tuiTable][tuiSortBy]", inputs: { tuiSortBy: { classPropertyName: "tuiSortBy", publicName: "tuiSortBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tuiSortByChange: "tuiSortByChange", tuiSortChange: "tuiSortChange" }, queries: [{ propertyName: "sortables", predicate: TuiTableSortable, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableSortBy, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'table[tuiTable][tuiSortBy]',
                 }]
-        }], propDecorators: { sortables: [{
-                type: ContentChildren,
-                args: [TuiTableSortable, { descendants: true }]
-            }], tuiSortByChange: [{
-                type: Output
-            }], tuiSortChange: [{
-                type: Output
-            }], sortBy: [{
-                type: Input,
-                args: ['tuiSortBy']
-            }] } });
+        }] });
 
 class TuiTableThead {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableThead, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -475,7 +418,6 @@ class TuiTableThead {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableThead, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'thead[tuiThead]',
                     providers: [
                         {
@@ -492,7 +434,7 @@ class TuiTableSortPipe {
         this.table = inject((TuiTableDirective));
     }
     transform(data) {
-        return this.sort(data ?? [], this.table.sorter, this.table.direction);
+        return this.sort(data ?? [], this.table.sorter, this.table.direction());
     }
     sort(data, sorter, direction) {
         return [...data].sort((a, b) => direction * sorter(a, b));
@@ -506,7 +448,6 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableSortPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: true,
                     name: 'tuiTableSort',
                     pure: false,
                 }]
@@ -528,42 +469,37 @@ const TUI_TABLE_PROVIDER = [
 
 class TuiTableExpand {
     constructor() {
+        this.content = viewChild('content');
         this.el = tuiInjectElement();
         this.server = isPlatformServer(inject(PLATFORM_ID));
         this.transitioning = signal(false);
-        this.contentHeight = computed((_ = this.expanded()) => this.update());
+        this.contentHeight = computed((_ = this.expanded()) => this.update(this.content()));
         this.visible$ = new Subject();
         this.sub = this.visible$
             .pipe(switchMap((v) => (v ? timer(500).pipe(map(() => v)) : of(v))), takeUntilDestroyed())
             .subscribe((visible) => this.el.classList.toggle('_visible', visible));
-        this.expandedChange = new EventEmitter();
-        this.expanded = signal(inject(TUI_TABLE_OPTIONS).open);
-    }
-    set expandedSetter(open) {
-        this.expanded.set(open);
-        this.transitioning.set(true);
+        this.expanded = model(inject(TUI_TABLE_OPTIONS).open);
+        this.transitioningEffect = effect((_, __ = this.expanded()) => this.transitioning.set(true));
     }
     toggle() {
         this.expanded.set(!this.expanded());
-        this.transitioning.set(true);
-        this.expandedChange.emit(this.expanded());
     }
-    update() {
-        if (!this.content || this.server) {
+    update(content) {
+        if (!content || this.server) {
             return 0;
         }
-        const el = this.content.nativeElement;
+        const el = content.nativeElement;
         el.style.setProperty('display', 'block');
         const height = el.getBoundingClientRect().height;
         el.style.removeProperty('display');
         return height;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableExpand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiTableExpand, isStandalone: true, selector: "tui-table-expand", inputs: { expandedSetter: ["expanded", "expandedSetter"] }, outputs: { expandedChange: "expandedChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "tuiPresentChange": "visible$.next($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], hostDirectives: [{ directive: i1.TuiPresent, outputs: ["tuiPresentChange", "tuiPresentChange"] }], ngImport: i0, template: "<div\n    #content\n    class=\"t-content\"\n    [class.t-content_open]=\"expanded() && !transitioning()\"\n>\n    <ng-content />\n</div>\n\n<div\n    class=\"t-filler\"\n    [class.t-filler_open]=\"expanded()\"\n    [style.--t-height.px]=\"contentHeight()\"\n    (animationcancel)=\"transitioning.set(false)\"\n    (animationend)=\"transitioning.set(false)\"\n    (animationstart)=\"transitioning.set(true)\"\n></div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes open{0%{block-size:0}to{block-size:var(--t-height)}}@keyframes close{0%{block-size:var(--t-height)}to{block-size:0}}:host{display:contents}:host:not(._visible){--tui-duration: 0ms}.t-content{display:none}.t-content_open{display:contents}.t-content_open ::ng-deep tr{animation:fade-in var(--tui-duration)}.t-filler{animation:close calc(var(--tui-duration) + 1ms)}.t-filler_open{animation:open calc(var(--tui-duration) + 1ms)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: TuiTableExpand, isStandalone: true, selector: "tui-table-expand", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "tuiPresentChange": "visible$.next($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.TuiPresent, outputs: ["tuiPresentChange", "tuiPresentChange"] }], ngImport: i0, template: "<div\n    #content\n    class=\"t-content\"\n    [class.t-content_open]=\"expanded() && !transitioning()\"\n>\n    <ng-content />\n</div>\n\n<div\n    class=\"t-filler\"\n    [class.t-filler_open]=\"expanded()\"\n    [style.--t-height.px]=\"contentHeight()\"\n    (animationcancel)=\"transitioning.set(false)\"\n    (animationend)=\"transitioning.set(false)\"\n    (animationstart)=\"transitioning.set(true)\"\n></div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes open{0%{block-size:0}to{block-size:var(--t-height)}}@keyframes close{0%{block-size:var(--t-height)}to{block-size:0}}:host{display:contents}:host:not(._visible){--tui-duration: 0ms}.t-content{display:none}.t-content_open{display:contents}.t-content_open ::ng-deep tr{animation:fade-in var(--tui-duration)}.t-filler{animation:close calc(var(--tui-duration) + 1ms)}.t-filler_open{animation:open calc(var(--tui-duration) + 1ms)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableExpand, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-table-expand', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+            args: [{ selector: 'tui-table-expand', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: TuiPresent,
                             outputs: ['tuiPresentChange'],
@@ -572,116 +508,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ngSkipHydration: 'true',
                         '(tuiPresentChange)': 'visible$.next($event)',
                     }, template: "<div\n    #content\n    class=\"t-content\"\n    [class.t-content_open]=\"expanded() && !transitioning()\"\n>\n    <ng-content />\n</div>\n\n<div\n    class=\"t-filler\"\n    [class.t-filler_open]=\"expanded()\"\n    [style.--t-height.px]=\"contentHeight()\"\n    (animationcancel)=\"transitioning.set(false)\"\n    (animationend)=\"transitioning.set(false)\"\n    (animationstart)=\"transitioning.set(true)\"\n></div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes open{0%{block-size:0}to{block-size:var(--t-height)}}@keyframes close{0%{block-size:var(--t-height)}to{block-size:0}}:host{display:contents}:host:not(._visible){--tui-duration: 0ms}.t-content{display:none}.t-content_open{display:contents}.t-content_open ::ng-deep tr{animation:fade-in var(--tui-duration)}.t-filler{animation:close calc(var(--tui-duration) + 1ms)}.t-filler_open{animation:open calc(var(--tui-duration) + 1ms)}\n"] }]
-        }], propDecorators: { content: [{
-                type: ViewChild,
-                args: ['content', { static: true }]
-            }], expandedChange: [{
-                type: Output
-            }], expandedSetter: [{
-                type: Input,
-                args: ['expanded']
-            }] } });
+        }] });
 
 class TuiTableTd {
+    constructor() {
+        this.control = contentChild((TuiControl));
+        this.textfield = contentChild((TuiTextfieldComponent));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableTd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiTableTd, isStandalone: true, selector: "th[tuiTd], td[tuiTd]", host: { properties: { "class._editable": "control || textfield" } }, queries: [{ propertyName: "control", first: true, predicate: TuiControl, descendants: true }, { propertyName: "textfield", first: true, predicate: TuiTextfieldComponent, descendants: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{position:relative;text-align:start;background:var(--tui-background-base);border:1px solid var(--tui-border-normal);border-block-start:none;box-sizing:border-box;filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:first-child{left:0}:host:not(:first-child){border-inline-start:none}:host._editable:focus-within{z-index:1}:host._editable{padding:0!important;vertical-align:top}:host(th){position:sticky;z-index:1}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;bottom:0;left:100%;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host(th):focus-within:not(:disabled){z-index:11}:host-context([tuiTheme=\"dark\"]):after{background:#3c3c3ce6}:host-context(table._stuck){z-index:10}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);padding:1rem}:host-context(table[data-size=\"m\"]){block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:.75rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);padding:.25rem .5rem}:host(td):focus-within{z-index:1}:host(td):not(:focus-within){z-index:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: TuiTableTd, isStandalone: true, selector: "th[tuiTd], td[tuiTd]", host: { properties: { "class._editable": "control() || textfield()" } }, queries: [{ propertyName: "control", first: true, predicate: (TuiControl), descendants: true, isSignal: true }, { propertyName: "textfield", first: true, predicate: (TuiTextfieldComponent), descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{position:relative;text-align:start;background:var(--tui-background-base);border:1px solid var(--tui-border-normal);border-block-start:none;box-sizing:border-box;filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:first-child{left:0}:host:not(:first-child){border-inline-start:none}:host._editable:focus-within{z-index:1}:host._editable{padding:0!important;vertical-align:top}:host(th){position:sticky;z-index:1}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;bottom:0;left:100%;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host(th):focus-within:not(:disabled){z-index:11}:host-context([tuiTheme=\"dark\"]):after{background:#3c3c3ce6}:host-context(table._stuck){z-index:10}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);padding:1rem}:host-context(table[data-size=\"m\"]){block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:.75rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);padding:.25rem .5rem}:host(td):focus-within{z-index:1}:host(td):not(:focus-within){z-index:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableTd, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'th[tuiTd], td[tuiTd]', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class._editable]': 'control || textfield',
+            args: [{ selector: 'th[tuiTd], td[tuiTd]', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class._editable]': 'control() || textfield()',
                     }, styles: [":host{position:relative;text-align:start;background:var(--tui-background-base);border:1px solid var(--tui-border-normal);border-block-start:none;box-sizing:border-box;filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:first-child{left:0}:host:not(:first-child){border-inline-start:none}:host._editable:focus-within{z-index:1}:host._editable{padding:0!important;vertical-align:top}:host(th){position:sticky;z-index:1}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;bottom:0;left:100%;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host(th):focus-within:not(:disabled){z-index:11}:host-context([tuiTheme=\"dark\"]):after{background:#3c3c3ce6}:host-context(table._stuck){z-index:10}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);padding:1rem}:host-context(table[data-size=\"m\"]){block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:.75rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);padding:.25rem .5rem}:host(td):focus-within{z-index:1}:host(td):not(:focus-within){z-index:0}\n"] }]
-        }], propDecorators: { control: [{
-                type: ContentChild,
-                args: [TuiControl]
-            }], textfield: [{
-                type: ContentChild,
-                args: [TuiTextfieldComponent]
-            }] } });
+        }] });
 
 class TuiTableTr {
     constructor() {
-        this.cells = EMPTY_QUERY;
+        this.cells = contentChildren(forwardRef(() => TuiTableCell));
         this.body = inject(forwardRef(() => TuiTableTbody));
         this.contentReady$ = new ReplaySubject(1);
+        this.rows$ = toObservable(this.body.rows);
+        this.contentCells$ = toObservable(this.cells);
         this.table = inject(forwardRef(() => TuiTableDirective));
         this.height = toSignal(inject(ResizeObserverService, { self: true }).pipe(map(([entry]) => entry?.contentRect.height ?? 0), distinctUntilChanged(), tuiZoneOptimized()), { initialValue: 0 });
-        this.cells$ = this.contentReady$.pipe(switchMap(() => tuiQueryListChanges(this.cells)), map((cells) => cells.reduce((record, item) => ({ ...record, [item.tuiCell]: item }), {})));
-        this.item$ = this.contentReady$.pipe(switchMap(() => tuiQueryListChanges(this.body.rows)), map((rows) => this.body.data[rows.findIndex((row) => row === this)]));
+        this.cells$ = this.contentReady$.pipe(switchMap(() => this.contentCells$), map((cells) => cells.reduce((record, item) => ({ ...record, [item.tuiCell()]: item }), {})));
+        this.item$ = this.contentReady$.pipe(switchMap(() => this.rows$), map((rows) => this.body.data()[rows.findIndex((row) => row === this)]));
     }
     ngAfterContentInit() {
         Promise.resolve().then(() => this.contentReady$.next(true));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableTr, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTableTr, isStandalone: true, selector: "tr[tuiTr]", host: { properties: { "style.--t-row-height.px": "height()" } }, providers: [TUI_TABLE_PROVIDER, ResizeObserverService], queries: [{ propertyName: "cells", predicate: i0.forwardRef(() => TuiTableCell) }], ngImport: i0, template: "@if (cells$ | async; as items) {\n    @for (key of table.columns; track key) {\n        <ng-container [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\">\n            <ng-template #plain>\n                @if (item$ | async; as item) {\n                    <td tuiTd>\n                        {{ item[key] }}\n                    </td>\n                }\n            </ng-template>\n        </ng-container>\n    }\n} @else {\n    <td></td>\n}\n<ng-content />\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTableTr, isStandalone: true, selector: "tr[tuiTr]", host: { properties: { "style.--t-row-height.px": "height()" } }, providers: [TUI_TABLE_PROVIDER, ResizeObserverService], queries: [{ propertyName: "cells", predicate: i0.forwardRef(() => TuiTableCell), isSignal: true }], ngImport: i0, template: "@if (cells$ | async; as items) {\n    @for (key of table.columns(); track key) {\n        <ng-container [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\">\n            <ng-template #plain>\n                @if (item$ | async; as item) {\n                    <td tuiTd>\n                        {{ item[key] }}\n                    </td>\n                }\n            </ng-template>\n        </ng-container>\n    }\n} @else {\n    <td></td>\n}\n<ng-content />\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableTr, decorators: [{
             type: Component,
             args: [{ selector: 'tr[tuiTr]', imports: [AsyncPipe, NgTemplateOutlet, TuiTableTd], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER, ResizeObserverService], host: {
                         '[style.--t-row-height.px]': 'height()',
-                    }, template: "@if (cells$ | async; as items) {\n    @for (key of table.columns; track key) {\n        <ng-container [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\">\n            <ng-template #plain>\n                @if (item$ | async; as item) {\n                    <td tuiTd>\n                        {{ item[key] }}\n                    </td>\n                }\n            </ng-template>\n        </ng-container>\n    }\n} @else {\n    <td></td>\n}\n<ng-content />\n" }]
-        }], propDecorators: { cells: [{
-                type: ContentChildren,
-                args: [forwardRef(() => TuiTableCell)]
-            }] } });
+                    }, template: "@if (cells$ | async; as items) {\n    @for (key of table.columns(); track key) {\n        <ng-container [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\">\n            <ng-template #plain>\n                @if (item$ | async; as item) {\n                    <td tuiTd>\n                        {{ item[key] }}\n                    </td>\n                }\n            </ng-template>\n        </ng-container>\n    }\n} @else {\n    <td></td>\n}\n<ng-content />\n" }]
+        }] });
 
 class TuiTableTbody {
     constructor() {
         this.options = inject(TUI_TABLE_OPTIONS);
         this.table = inject(forwardRef(() => TuiTableDirective));
-        this.rows = EMPTY_QUERY;
-        this.data = [];
+        this.rows = contentChildren(forwardRef(() => TuiTableTr));
+        this.data = input([]);
         /** @deprecated: drop in v5.0, use TuiTableExpand */
-        this.open = this.options.open;
+        this.heading = input();
         /** @deprecated: drop in v5.0, use TuiTableExpand */
-        this.openChange = new EventEmitter();
+        this.open = model(this.options.open);
         /** @deprecated: drop in v5.0, use TuiTableExpand */
         this.onClick = () => {
-            this.open = !this.open;
-            this.openChange.emit(this.open);
+            this.open.set(!this.open());
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableTbody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTableTbody, isStandalone: true, selector: "tbody[tuiTbody]", inputs: { data: "data", heading: "heading", open: "open" }, outputs: { openChange: "openChange" }, providers: TUI_TABLE_PROVIDER, queries: [{ propertyName: "rows", predicate: i0.forwardRef(() => TuiTableTr) }], ngImport: i0, template: "@if (heading) {\n    <tr>\n        <th\n            class=\"t-heading\"\n            [colSpan]=\"table.columns.length\"\n        >\n            <button\n                type=\"button\"\n                class=\"t-expand\"\n                (click)=\"onClick()\"\n            >\n                <span class=\"t-name\">\n                    <ng-container *polymorpheusOutlet=\"heading as text\">\n                        {{ text }}\n                    </ng-container>\n                </span>\n                <tui-icon\n                    class=\"t-chevron\"\n                    [tuiChevron]=\"open\"\n                />\n            </button>\n        </th>\n    </tr>\n}\n@if (open) {\n    <ng-content />\n}\n", styles: [":host{border-color:var(--tui-border-normal)}:host tr{border-color:inherit}.t-expand{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;display:flex;inline-size:100%;block-size:100%;align-items:center;box-sizing:border-box;outline:none;font-weight:700;cursor:pointer;border-color:inherit}.t-expand:focus-visible .t-name{background:var(--tui-service-selection-background)}.t-expand:before,.t-expand:after{content:\"\";position:sticky;block-size:100%;border-inline-start:1px solid;border-color:inherit}.t-expand:before{left:0}.t-expand:after{right:0}.t-heading{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:0;background:var(--tui-background-neutral-1);border-block-end:1px solid var(--tui-border-normal);border-color:inherit}.t-heading:hover{background:var(--tui-background-neutral-1-hover)}:host-context(table[data-size=\"l\"]) .t-heading{font:var(--tui-font-text-m);block-size:var(--tui-height-l)}.t-name{position:sticky;left:.75rem;display:inline-block}:host-context(table[data-size=\"l\"]) .t-name{left:1rem}.t-chevron{position:sticky;right:.75rem;margin:0 .6875rem 0 auto}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTableTbody, isStandalone: true, selector: "tbody[tuiTbody]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, providers: TUI_TABLE_PROVIDER, queries: [{ propertyName: "rows", predicate: i0.forwardRef(() => TuiTableTr), isSignal: true }], ngImport: i0, template: "@if (heading()) {\n    <tr>\n        <th\n            class=\"t-heading\"\n            [colSpan]=\"table.columns().length\"\n        >\n            <button\n                type=\"button\"\n                class=\"t-expand\"\n                (click)=\"onClick()\"\n            >\n                <span class=\"t-name\">\n                    <ng-container *polymorpheusOutlet=\"heading() as text\">\n                        {{ text }}\n                    </ng-container>\n                </span>\n                <tui-icon\n                    class=\"t-chevron\"\n                    [tuiChevron]=\"open()\"\n                />\n            </button>\n        </th>\n    </tr>\n}\n@if (open()) {\n    <ng-content />\n}\n", styles: [":host{border-color:var(--tui-border-normal)}:host tr{border-color:inherit}.t-expand{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;display:flex;inline-size:100%;block-size:100%;align-items:center;box-sizing:border-box;outline:none;font-weight:700;cursor:pointer;border-color:inherit}.t-expand:focus-visible .t-name{background:var(--tui-service-selection-background)}.t-expand:before,.t-expand:after{content:\"\";position:sticky;block-size:100%;border-inline-start:1px solid;border-color:inherit}.t-expand:before{left:0}.t-expand:after{right:0}.t-heading{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:0;background:var(--tui-background-neutral-1);border-block-end:1px solid var(--tui-border-normal);border-color:inherit}.t-heading:hover{background:var(--tui-background-neutral-1-hover)}:host-context(table[data-size=\"l\"]) .t-heading{font:var(--tui-font-text-m);block-size:var(--tui-height-l)}.t-name{position:sticky;left:.75rem;display:inline-block}:host-context(table[data-size=\"l\"]) .t-name{left:1rem}.t-chevron{position:sticky;right:.75rem;margin:0 .6875rem 0 auto}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableTbody, decorators: [{
             type: Component,
-            args: [{ selector: 'tbody[tuiTbody]', imports: [PolymorpheusOutlet, TuiChevron, TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: TUI_TABLE_PROVIDER, template: "@if (heading) {\n    <tr>\n        <th\n            class=\"t-heading\"\n            [colSpan]=\"table.columns.length\"\n        >\n            <button\n                type=\"button\"\n                class=\"t-expand\"\n                (click)=\"onClick()\"\n            >\n                <span class=\"t-name\">\n                    <ng-container *polymorpheusOutlet=\"heading as text\">\n                        {{ text }}\n                    </ng-container>\n                </span>\n                <tui-icon\n                    class=\"t-chevron\"\n                    [tuiChevron]=\"open\"\n                />\n            </button>\n        </th>\n    </tr>\n}\n@if (open) {\n    <ng-content />\n}\n", styles: [":host{border-color:var(--tui-border-normal)}:host tr{border-color:inherit}.t-expand{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;display:flex;inline-size:100%;block-size:100%;align-items:center;box-sizing:border-box;outline:none;font-weight:700;cursor:pointer;border-color:inherit}.t-expand:focus-visible .t-name{background:var(--tui-service-selection-background)}.t-expand:before,.t-expand:after{content:\"\";position:sticky;block-size:100%;border-inline-start:1px solid;border-color:inherit}.t-expand:before{left:0}.t-expand:after{right:0}.t-heading{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:0;background:var(--tui-background-neutral-1);border-block-end:1px solid var(--tui-border-normal);border-color:inherit}.t-heading:hover{background:var(--tui-background-neutral-1-hover)}:host-context(table[data-size=\"l\"]) .t-heading{font:var(--tui-font-text-m);block-size:var(--tui-height-l)}.t-name{position:sticky;left:.75rem;display:inline-block}:host-context(table[data-size=\"l\"]) .t-name{left:1rem}.t-chevron{position:sticky;right:.75rem;margin:0 .6875rem 0 auto}\n"] }]
-        }], propDecorators: { rows: [{
-                type: ContentChildren,
-                args: [forwardRef(() => TuiTableTr)]
-            }], data: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'tbody[tuiTbody]', imports: [PolymorpheusOutlet, TuiChevron, TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: TUI_TABLE_PROVIDER, template: "@if (heading()) {\n    <tr>\n        <th\n            class=\"t-heading\"\n            [colSpan]=\"table.columns().length\"\n        >\n            <button\n                type=\"button\"\n                class=\"t-expand\"\n                (click)=\"onClick()\"\n            >\n                <span class=\"t-name\">\n                    <ng-container *polymorpheusOutlet=\"heading() as text\">\n                        {{ text }}\n                    </ng-container>\n                </span>\n                <tui-icon\n                    class=\"t-chevron\"\n                    [tuiChevron]=\"open()\"\n                />\n            </button>\n        </th>\n    </tr>\n}\n@if (open()) {\n    <ng-content />\n}\n", styles: [":host{border-color:var(--tui-border-normal)}:host tr{border-color:inherit}.t-expand{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;display:flex;inline-size:100%;block-size:100%;align-items:center;box-sizing:border-box;outline:none;font-weight:700;cursor:pointer;border-color:inherit}.t-expand:focus-visible .t-name{background:var(--tui-service-selection-background)}.t-expand:before,.t-expand:after{content:\"\";position:sticky;block-size:100%;border-inline-start:1px solid;border-color:inherit}.t-expand:before{left:0}.t-expand:after{right:0}.t-heading{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:0;background:var(--tui-background-neutral-1);border-block-end:1px solid var(--tui-border-normal);border-color:inherit}.t-heading:hover{background:var(--tui-background-neutral-1-hover)}:host-context(table[data-size=\"l\"]) .t-heading{font:var(--tui-font-text-m);block-size:var(--tui-height-l)}.t-name{position:sticky;left:.75rem;display:inline-block}:host-context(table[data-size=\"l\"]) .t-name{left:1rem}.t-chevron{position:sticky;right:.75rem;margin:0 .6875rem 0 auto}\n"] }]
+        }] });
 
 class TuiTableThGroup {
     constructor() {
-        this.heads = EMPTY_QUERY;
-        this.heads$ = null;
+        this.th = contentChild(forwardRef(() => TuiTableTh));
+        this.heads = contentChildren(forwardRef(() => TuiTableHead));
+        this.computedHeads = computed(() => {
+            return this.heads().reduce((record, item) => ({ ...record, [item.tuiHead()]: item }), {});
+        });
         this.table = inject(forwardRef(() => TuiTableDirective));
     }
-    ngAfterContentInit() {
-        this.heads$ = this.heads.changes.pipe(startWith(null), map(() => this.heads.reduce((record, item) => ({ ...record, [item.tuiHead]: item }), {})));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableThGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTableThGroup, isStandalone: true, selector: "tr[tuiThGroup]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "th", first: true, predicate: i0.forwardRef(() => TuiTableTh), descendants: true }, { propertyName: "heads", predicate: i0.forwardRef(() => TuiTableHead) }], ngImport: i0, template: "<ng-content />\n@if (heads$ | async; as headings) {\n    @for (key of table.columns; track key) {\n        <ng-container\n            [ngTemplateOutlet]=\"headings?.[key]?.template || plain\"\n            [ngTemplateOutletContext]=\"{$implicit: key}\"\n        />\n    }\n    <ng-template\n        #plain\n        let-key\n    >\n        @if (!th && !heads.length) {\n            <th tuiTh>\n                {{ key.toString() }}\n            </th>\n        }\n    </ng-template>\n}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTh, selector: "th[tuiTh]", inputs: ["minWidth", "maxWidth", "sorter", "resizable", "sticky", "requiredSort"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTableThGroup, isStandalone: true, selector: "tr[tuiThGroup]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "th", first: true, predicate: i0.forwardRef(() => TuiTableTh), descendants: true, isSignal: true }, { propertyName: "heads", predicate: i0.forwardRef(() => TuiTableHead), isSignal: true }], ngImport: i0, template: "<ng-content />\n@if (computedHeads(); as headings) {\n    @for (key of table.columns(); track key) {\n        <ng-container\n            [ngTemplateOutlet]=\"headings?.[key]?.template || plain\"\n            [ngTemplateOutletContext]=\"{$implicit: key}\"\n        />\n    }\n    <ng-template\n        #plain\n        let-key\n    >\n        @if (!th() && !heads().length) {\n            <th tuiTh>\n                {{ key.toString() }}\n            </th>\n        }\n    </ng-template>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTh, selector: "th[tuiTh]", inputs: ["minWidth", "maxWidth", "sorter", "resizable", "sticky", "requiredSort"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableThGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'tr[tuiThGroup]', imports: [AsyncPipe, NgTemplateOutlet, TuiTableTh], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER], template: "<ng-content />\n@if (heads$ | async; as headings) {\n    @for (key of table.columns; track key) {\n        <ng-container\n            [ngTemplateOutlet]=\"headings?.[key]?.template || plain\"\n            [ngTemplateOutletContext]=\"{$implicit: key}\"\n        />\n    }\n    <ng-template\n        #plain\n        let-key\n    >\n        @if (!th && !heads.length) {\n            <th tuiTh>\n                {{ key.toString() }}\n            </th>\n        }\n    </ng-template>\n}\n" }]
-        }], propDecorators: { th: [{
-                type: ContentChild,
-                args: [forwardRef(() => TuiTableTh)]
-            }], heads: [{
-                type: ContentChildren,
-                args: [forwardRef(() => TuiTableHead)]
-            }] } });
+            args: [{ selector: 'tr[tuiThGroup]', imports: [NgTemplateOutlet, TuiTableTh], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER], template: "<ng-content />\n@if (computedHeads(); as headings) {\n    @for (key of table.columns(); track key) {\n        <ng-container\n            [ngTemplateOutlet]=\"headings?.[key]?.template || plain\"\n            [ngTemplateOutletContext]=\"{$implicit: key}\"\n        />\n    }\n    <ng-template\n        #plain\n        let-key\n    >\n        @if (!th() && !heads().length) {\n            <th tuiTh>\n                {{ key.toString() }}\n            </th>\n        }\n    </ng-template>\n}\n" }]
+        }] });
 
 const TuiTable = [
     TuiTableDirective,