@ng-nest/ui 20.0.7 → 20.1.0

package/fesm2022/ng-nest-ui-table-view.mjs

@@ -1,149 +1,337 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, TemplateRef, Input, Directive, ElementRef, HostListener, HostBinding, ContentChild, input, Component, ViewChildren, ContentChildren, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { XPropertyFunction } from '@ng-nest/ui/core';
+import { Injectable, inject, Component, booleanAttribute, Directive, signal, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, viewChild, contentChild, contentChildren, Input, HostListener, NgModule } from '@angular/core';
+import { CdkTable, CdkHeaderRowDef, CdkFooterRowDef, CdkRowDef, CdkHeaderRow, CdkCellOutlet, CdkFooterRow, CdkRow, CdkNoDataRow, HeaderRowOutlet, DataRowOutlet, NoDataRowOutlet, FooterRowOutlet, CDK_TABLE, STICKY_POSITIONING_LISTENER, CdkCellDef, CdkHeaderCellDef, CdkFooterCellDef, CdkColumnDef, CdkHeaderCell, CdkFooterCell, CdkCell, CdkTextColumn, CdkTableModule } from '@angular/cdk/table';
+import { _DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY } from '@angular/cdk/collections';
+import { XConfigService } from '@ng-nest/ui/core';
 
 class XTableViewService {
     constructor() {
         this.selectedCells = [];
         this.activedRows = [];
         this.selectedHeaderCell = null;
-        this.activedHeaderCell = null;
+        this.activedHeaderCells = [];
+        this.stickyHeaderRows = [];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTableViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTableViewService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTableViewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewService, decorators: [{
             type: Injectable
         }] });
 
-class XCellDef {
+/**
+ * Table view
+ * @selector x-table-view
+ * @decorator component
+ */
+const XTableViewPrefix = 'x-table-view';
+const X_TABLE_VIEW_CONFIG_NAME = 'tableView';
+/**
+ * Table view Property
+ */
+class XTableViewProperty extends CdkTable {
     constructor() {
-        this.xCellDef = '';
-        this.template = inject(TemplateRef);
+        super(...arguments);
+        this.config = inject(XConfigService).getConfigForComponent(X_TABLE_VIEW_CONFIG_NAME);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XCellDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: XCellDef, isStandalone: true, selector: "[xCellDef]", inputs: { xCellDef: "xCellDef" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: XTableViewProperty, isStandalone: true, selector: "x-table-view-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTableViewPrefix}-property`, template: '' }]
+        }] });
+
+const ROW_TEMPLATE = `<ng-container cdkCellOutlet></ng-container>`;
+class XTableHeaderRowDef extends CdkHeaderRowDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderRowDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.2.4", type: XTableHeaderRowDef, isStandalone: true, selector: "[xTableHeaderRowDef]", inputs: { columns: ["xTableHeaderRowDef", "columns"], sticky: ["xTableHeaderRowDefSticky", "sticky", booleanAttribute] }, providers: [{ provide: CdkHeaderRowDef, useExisting: XTableHeaderRowDef }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XCellDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderRowDef, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[xCellDef]'
+                    selector: '[xTableHeaderRowDef]',
+                    providers: [{ provide: CdkHeaderRowDef, useExisting: XTableHeaderRowDef }],
+                    inputs: [
+                        { name: 'columns', alias: 'xTableHeaderRowDef' },
+                        { name: 'sticky', alias: 'xTableHeaderRowDefSticky', transform: booleanAttribute }
+                    ]
                 }]
-        }], propDecorators: { xCellDef: [{
-                type: Input
-            }] } });
-class XHeaderCellDef {
+        }] });
+class XTableFooterRowDef extends CdkFooterRowDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterRowDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.2.4", type: XTableFooterRowDef, isStandalone: true, selector: "[xTableFooterRowDef]", inputs: { columns: ["xTableFooterRowDef", "columns"], sticky: ["xTableFooterRowDefSticky", "sticky", booleanAttribute] }, providers: [{ provide: CdkFooterRowDef, useExisting: XTableFooterRowDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterRowDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableFooterRowDef]',
+                    providers: [{ provide: CdkFooterRowDef, useExisting: XTableFooterRowDef }],
+                    inputs: [
+                        { name: 'columns', alias: 'xTableFooterRowDef' },
+                        { name: 'sticky', alias: 'xTableFooterRowDefSticky', transform: booleanAttribute }
+                    ]
+                }]
+        }] });
+class XTableViewRowDef extends CdkRowDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewRowDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableViewRowDef, isStandalone: true, selector: "[xTableRowDef]", inputs: { columns: ["xTableRowDefColumns", "columns"], when: ["xTableRowDefWhen", "when"] }, providers: [{ provide: CdkRowDef, useExisting: XTableViewRowDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewRowDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableRowDef]',
+                    providers: [{ provide: CdkRowDef, useExisting: XTableViewRowDef }],
+                    inputs: [
+                        { name: 'columns', alias: 'xTableRowDefColumns' },
+                        { name: 'when', alias: 'xTableRowDefWhen' }
+                    ]
+                }]
+        }] });
+class XTableHeaderRow extends CdkHeaderRow {
     constructor() {
-        this.xHeaderCellDef = '';
-        this.template = inject(TemplateRef);
+        super(...arguments);
+        this.tableView = inject(XTableView, { optional: true });
+        this.tableViewService = inject(XTableViewService, { optional: true });
+        this.sticking = signal(false, ...(ngDevMode ? [{ debugName: "sticking" }] : []));
+    }
+    get isSticking() {
+        return this.sticking();
+    }
+    ngAfterViewInit() {
+        this.listenerSticky();
+    }
+    listenerSticky() {
+        const index = this.tableView?.headerRows().findIndex((x) => x === this);
+        if (index === undefined || index < 0)
+            return;
+        const rowLen = this.tableView?.headerRowRefs()?.length ?? 0;
+        if (rowLen === 0 || rowLen < index)
+            return;
+        const sticky = this.tableView?.headerRowRefs()[index].sticky;
+        if (!sticky)
+            return;
+        const sentinel = this.tableView?.sentinelTop().nativeElement;
+        const observer = new IntersectionObserver(([entry]) => {
+            const sticking = !entry.isIntersecting;
+            if (sticking) {
+                if (!this.tableViewService.stickyHeaderRows.includes(this)) {
+                    this.tableViewService.stickyHeaderRows.push(this);
+                }
+            }
+            else {
+                if (this.tableViewService.stickyHeaderRows.includes(this)) {
+                    this.tableViewService.stickyHeaderRows = this.tableViewService.stickyHeaderRows.filter((item) => item !== this);
+                }
+            }
+            this.sticking.set(sticking);
+        }, { threshold: 0 });
+        observer.observe(sentinel);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XHeaderCellDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: XHeaderCellDef, isStandalone: true, selector: "[xHeaderCellDef]", inputs: { xHeaderCellDef: "xHeaderCellDef" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderRow, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: XTableHeaderRow, isStandalone: true, selector: "x-table-header-row, tr[x-table-header-row]", host: { attributes: { "role": "row" }, properties: { "class.x-table-sticky-top": "this.isSticking" }, classAttribute: "x-table-header-row" }, providers: [{ provide: CdkHeaderRow, useExisting: XTableHeaderRow }], exportAs: ["xTableHeaderRow"], usesInheritance: true, ngImport: i0, template: "<ng-container cdkCellOutlet></ng-container>", isInline: true, dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XHeaderCellDef, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderRow, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[xHeaderCellDef]'
+                    selector: 'x-table-header-row, tr[x-table-header-row]',
+                    template: ROW_TEMPLATE,
+                    host: {
+                        class: 'x-table-header-row',
+                        role: 'row'
+                    },
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'xTableHeaderRow',
+                    providers: [{ provide: CdkHeaderRow, useExisting: XTableHeaderRow }],
+                    imports: [CdkCellOutlet]
                 }]
-        }], propDecorators: { xHeaderCellDef: [{
-                type: Input
+        }], propDecorators: { isSticking: [{
+                type: HostBinding,
+                args: ['class.x-table-sticky-top']
             }] } });
-class XCell {
+class XTableFooterRow extends CdkFooterRow {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterRow, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: XTableFooterRow, isStandalone: true, selector: "x-table-footer-row, tr[x-table-footer-row]", host: { attributes: { "role": "row" }, classAttribute: "x-table-footer-row" }, providers: [{ provide: CdkFooterRow, useExisting: XTableFooterRow }], exportAs: ["xTableFooterRow"], usesInheritance: true, ngImport: i0, template: "<ng-container cdkCellOutlet></ng-container>", isInline: true, dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'x-table-footer-row, tr[x-table-footer-row]',
+                    template: ROW_TEMPLATE,
+                    host: {
+                        class: 'x-table-footer-row',
+                        role: 'row'
+                    },
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'xTableFooterRow',
+                    providers: [{ provide: CdkFooterRow, useExisting: XTableFooterRow }],
+                    imports: [CdkCellOutlet]
+                }]
+        }] });
+class XTableViewRow extends CdkRow {
     constructor() {
+        super(...arguments);
         this.tableViewService = inject(XTableViewService, { optional: true });
-        this.tableView = inject(XTableViewComponent, { optional: true });
-        this.elementRef = inject(ElementRef);
-        this.cellClass = true;
     }
-    get isSelected() {
-        return this.tableViewService.selectedCells.includes(this);
+    get isActived() {
+        return this.tableViewService.activedRows.includes(this);
     }
-    onClick() {
-        this.tableViewService.selectedCells = [this];
-        this.tableViewService.activedRows = [];
-        this.setActivedRow(this);
-        this.setActivedHeaderCell(this);
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewRow, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: XTableViewRow, isStandalone: true, selector: "x-table-row, tr[x-table-row]", host: { attributes: { "role": "row" }, properties: { "class.x-table-row-actived": "this.isActived" }, classAttribute: "x-table-row" }, providers: [{ provide: CdkRow, useExisting: XTableViewRow }], exportAs: ["xTableRow"], usesInheritance: true, ngImport: i0, template: "<ng-container cdkCellOutlet></ng-container>", isInline: true, dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'x-table-row, tr[x-table-row]',
+                    template: ROW_TEMPLATE,
+                    host: {
+                        class: 'x-table-row',
+                        role: 'row'
+                    },
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'xTableRow',
+                    providers: [{ provide: CdkRow, useExisting: XTableViewRow }],
+                    imports: [CdkCellOutlet]
+                }]
+        }], propDecorators: { isActived: [{
+                type: HostBinding,
+                args: ['class.x-table-row-actived']
+            }] } });
+class XTableNoDataRow extends CdkNoDataRow {
+    constructor() {
+        super(...arguments);
+        this._contentClassName = 'x-table-no-data-row';
     }
-    setActivedRow(cell) {
-        const rows = this.tableView?.rows.toArray() ?? [];
-        if (rows.length > 0) {
-            const rowIndex = this.getRowIndex(cell);
-            if (rowIndex >= 0 && rowIndex < rows.length) {
-                const currentRow = rows[rowIndex];
-                this.tableViewService.activedRows.push(currentRow);
-            }
-        }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableNoDataRow, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableNoDataRow, isStandalone: true, selector: "ng-template[xTableNoDataRow]", providers: [{ provide: CdkNoDataRow, useExisting: XTableNoDataRow }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableNoDataRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[xTableNoDataRow]',
+                    providers: [{ provide: CdkNoDataRow, useExisting: XTableNoDataRow }]
+                }]
+        }] });
+
+class XTableView extends XTableViewProperty {
+    constructor() {
+        super(...arguments);
+        this.elementRef = inject(ElementRef);
+        this.sentinelTop = viewChild('sentinelTop', ...(ngDevMode ? [{ debugName: "sentinelTop" }] : []));
+        this.headerRowRef = contentChild(XTableHeaderRowDef, ...(ngDevMode ? [{ debugName: "headerRowRef" }] : []));
+        this.headerRowRefs = contentChildren(XTableHeaderRowDef, ...(ngDevMode ? [{ debugName: "headerRowRefs" }] : []));
+        this.headerRows = contentChildren(XTableHeaderRow, ...(ngDevMode ? [{ debugName: "headerRows" }] : []));
+        this.columnDefs = contentChildren(XTableColumnDef, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
+        this.headerCells = contentChildren(XTableHeaderCell, ...(ngDevMode ? [{ debugName: "headerCells" }] : []));
+        this.cells = contentChildren(XTableViewCell, ...(ngDevMode ? [{ debugName: "cells" }] : []));
+        this.rows = contentChildren(XTableViewRow, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+        /** Overrides the sticky CSS class set by the `CdkTable`. */
+        this.stickyCssClass = 'x-table-sticky';
+        /** Overrides the need to add position: sticky on every sticky cell element in `CdkTable`. */
+        this.needsPositionStickyOnElement = false;
     }
-    setActivedHeaderCell(cell) {
-        const headerCells = this.tableView?.headerCells.toArray() ?? [];
-        if (headerCells.length > 0) {
-            const columnIndex = this.getColumnIndex(cell);
-            if (columnIndex >= 0 && columnIndex < headerCells.length) {
-                this.tableViewService.activedHeaderCell = headerCells[columnIndex];
-            }
-        }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableView, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: XTableView, isStandalone: true, selector: "x-table-view, table[x-table-view]", host: { properties: { "class.x-table-fixed-layout": "fixedLayout" }, classAttribute: "x-table-view" }, providers: [
+            { provide: CdkTable, useExisting: XTableView },
+            { provide: CDK_TABLE, useExisting: XTableView },
+            // Prevent nested tables from seeing this table's StickyPositioningListener.
+            { provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy },
+            { provide: STICKY_POSITIONING_LISTENER, useValue: null },
+            XTableViewService
+        ], queries: [{ propertyName: "headerRowRef", first: true, predicate: XTableHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "headerRowRefs", predicate: XTableHeaderRowDef, isSignal: true }, { propertyName: "headerRows", predicate: XTableHeaderRow, isSignal: true }, { propertyName: "columnDefs", predicate: XTableColumnDef, isSignal: true }, { propertyName: "headerCells", predicate: XTableHeaderCell, isSignal: true }, { propertyName: "cells", predicate: XTableViewCell, isSignal: true }, { propertyName: "rows", predicate: XTableViewRow, isSignal: true }], viewQueries: [{ propertyName: "sentinelTop", first: true, predicate: ["sentinelTop"], descendants: true, isSignal: true }], exportAs: ["xTableView"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"caption\" />\r\n<ng-content select=\"colgroup, col\" />\r\n\r\n<!--\r\n      Unprojected content throws a hydration error so we need this to capture it.\r\n      It gets removed on the client so it doesn't affect the layout.\r\n    -->\r\n@if (_isServer) {\r\n  <ng-content />\r\n}\r\n<div class=\"x-table-sentinel-top\" #sentinelTop></div>\r\n@if (_isNativeHtmlTable) {\r\n  <thead>\r\n    <ng-container headerRowOutlet />\r\n  </thead>\r\n  <tbody>\r\n    <ng-container rowOutlet />\r\n    <ng-container noDataRowOutlet />\r\n  </tbody>\r\n  <tfoot>\r\n    <ng-container footerRowOutlet />\r\n  </tfoot>\r\n} @else {\r\n  <ng-container headerRowOutlet />\r\n  <ng-container rowOutlet />\r\n  <ng-container noDataRowOutlet />\r\n  <ng-container footerRowOutlet />\r\n}\r\n", styles: [".x-table-view{margin:0;padding:0}.x-table-view{position:relative;border-collapse:separate;border-spacing:0}.x-table-view .x-table-header-cell,.x-table-view .x-table-footer-cell{padding:0 .5rem;text-align:left;font-weight:500;color:var(--x-text);border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default;background-color:var(--x-background);white-space:nowrap}.x-table-view .x-table-header-cell:first-child,.x-table-view .x-table-footer-cell:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view .x-table-header-cell.x-table-header-cell-actived,.x-table-view .x-table-footer-cell.x-table-header-cell-actived{background-color:var(--x-background-a100)}.x-table-view .x-table-sticky{position:sticky;background-color:var(--x-background-a200)}.x-table-view .x-table-sentinel-top{visibility:hidden;position:absolute;top:0}.x-table-view .x-table-row-actived .x-table-cell:not(.x-table-cell-selected){background-color:var(--x-background-a100)}.x-table-view .x-table-cell{padding:0 .5rem;text-align:left;font-weight:500;color:var(--x-text);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default;white-space:nowrap;background-color:var(--x-background)}.x-table-view .x-table-cell:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view .x-table-cell.x-table-cell-selected{border-color:var(--x-border-a200);background-color:var(--x-primary-900)}.x-table-view .x-table-cell.x-table-sticky:not(.x-table-cell-selected){background-color:var(--x-background-a200)}.x-table-view .x-table-sticky-border-elem-top{border-bottom-style:solid;border-bottom-width:calc(2 * var(--x-border-width));border-bottom-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-bottom{border-top-style:solid;border-top-width:calc(2 * var(--x-border-width));border-top-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-left{border-right-style:solid;border-right-width:calc(2 * var(--x-border-width));border-right-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-right{border-left-style:solid;border-left-width:calc(2 * var(--x-border-width));border-left-color:var(--x-border-a900)}\n"], dependencies: [{ kind: "directive", type: HeaderRowOutlet, selector: "[headerRowOutlet]" }, { kind: "directive", type: DataRowOutlet, selector: "[rowOutlet]" }, { kind: "directive", type: NoDataRowOutlet, selector: "[noDataRowOutlet]" }, { kind: "directive", type: FooterRowOutlet, selector: "[footerRowOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableView, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-table-view, table[x-table-view]', exportAs: 'xTableView', host: {
+                        class: 'x-table-view',
+                        '[class.x-table-fixed-layout]': 'fixedLayout'
+                    }, providers: [
+                        { provide: CdkTable, useExisting: XTableView },
+                        { provide: CDK_TABLE, useExisting: XTableView },
+                        // Prevent nested tables from seeing this table's StickyPositioningListener.
+                        { provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy },
+                        { provide: STICKY_POSITIONING_LISTENER, useValue: null },
+                        XTableViewService
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, imports: [HeaderRowOutlet, DataRowOutlet, NoDataRowOutlet, FooterRowOutlet], template: "<ng-content select=\"caption\" />\r\n<ng-content select=\"colgroup, col\" />\r\n\r\n<!--\r\n      Unprojected content throws a hydration error so we need this to capture it.\r\n      It gets removed on the client so it doesn't affect the layout.\r\n    -->\r\n@if (_isServer) {\r\n  <ng-content />\r\n}\r\n<div class=\"x-table-sentinel-top\" #sentinelTop></div>\r\n@if (_isNativeHtmlTable) {\r\n  <thead>\r\n    <ng-container headerRowOutlet />\r\n  </thead>\r\n  <tbody>\r\n    <ng-container rowOutlet />\r\n    <ng-container noDataRowOutlet />\r\n  </tbody>\r\n  <tfoot>\r\n    <ng-container footerRowOutlet />\r\n  </tfoot>\r\n} @else {\r\n  <ng-container headerRowOutlet />\r\n  <ng-container rowOutlet />\r\n  <ng-container noDataRowOutlet />\r\n  <ng-container footerRowOutlet />\r\n}\r\n", styles: [".x-table-view{margin:0;padding:0}.x-table-view{position:relative;border-collapse:separate;border-spacing:0}.x-table-view .x-table-header-cell,.x-table-view .x-table-footer-cell{padding:0 .5rem;text-align:left;font-weight:500;color:var(--x-text);border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default;background-color:var(--x-background);white-space:nowrap}.x-table-view .x-table-header-cell:first-child,.x-table-view .x-table-footer-cell:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view .x-table-header-cell.x-table-header-cell-actived,.x-table-view .x-table-footer-cell.x-table-header-cell-actived{background-color:var(--x-background-a100)}.x-table-view .x-table-sticky{position:sticky;background-color:var(--x-background-a200)}.x-table-view .x-table-sentinel-top{visibility:hidden;position:absolute;top:0}.x-table-view .x-table-row-actived .x-table-cell:not(.x-table-cell-selected){background-color:var(--x-background-a100)}.x-table-view .x-table-cell{padding:0 .5rem;text-align:left;font-weight:500;color:var(--x-text);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default;white-space:nowrap;background-color:var(--x-background)}.x-table-view .x-table-cell:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view .x-table-cell.x-table-cell-selected{border-color:var(--x-border-a200);background-color:var(--x-primary-900)}.x-table-view .x-table-cell.x-table-sticky:not(.x-table-cell-selected){background-color:var(--x-background-a200)}.x-table-view .x-table-sticky-border-elem-top{border-bottom-style:solid;border-bottom-width:calc(2 * var(--x-border-width));border-bottom-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-bottom{border-top-style:solid;border-top-width:calc(2 * var(--x-border-width));border-top-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-left{border-right-style:solid;border-right-width:calc(2 * var(--x-border-width));border-right-color:var(--x-border-a900)}.x-table-view .x-table-sticky-border-elem-right{border-left-style:solid;border-left-width:calc(2 * var(--x-border-width));border-left-color:var(--x-border-a900)}\n"] }]
+        }] });
+
+class XTableViewCellDef extends CdkCellDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableViewCellDef, isStandalone: true, selector: "[xTableCellDef]", providers: [{ provide: CdkCellDef, useExisting: XTableViewCellDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableCellDef]',
+                    providers: [{ provide: CdkCellDef, useExisting: XTableViewCellDef }]
+                }]
+        }] });
+class XTableHeaderCellDef extends CdkHeaderCellDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableHeaderCellDef, isStandalone: true, selector: "[xTableHeaderCellDef]", providers: [{ provide: CdkHeaderCellDef, useExisting: XTableHeaderCellDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableHeaderCellDef]',
+                    providers: [{ provide: CdkHeaderCellDef, useExisting: XTableHeaderCellDef }]
+                }]
+        }] });
+class XTableFooterCellDef extends CdkFooterCellDef {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterCellDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableFooterCellDef, isStandalone: true, selector: "[xTableFooterCellDef]", providers: [{ provide: CdkFooterCellDef, useExisting: XTableFooterCellDef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xTableFooterCellDef]',
+                    providers: [{ provide: CdkFooterCellDef, useExisting: XTableFooterCellDef }]
+                }]
+        }] });
+class XTableColumnDef extends CdkColumnDef {
+    get name() {
+        return this._name;
     }
-    getColumnIndex(cell) {
-        if (!this.tableView || !this.tableView.cells)
-            return -1;
-        const cellsArray = this.tableView.cells.toArray();
-        const selectedIndex = cellsArray.indexOf(cell);
-        if (selectedIndex === -1)
-            return -1;
-        const columnsPerRow = this.tableView.columns().length;
-        const rowsCount = this.tableView.data().length;
-        if (columnsPerRow === 0 || rowsCount === 0)
-            return -1;
-        return Math.floor(selectedIndex / rowsCount);
+    set name(name) {
+        this._setNameInput(name);
     }
-    getRowIndex(cell) {
-        if (!this.tableView || !this.tableView.cells)
-            return -1;
-        const cellsArray = this.tableView.cells.toArray();
-        const selectedIndex = cellsArray.indexOf(cell);
-        if (selectedIndex === -1)
-            return -1;
-        const columnsPerRow = this.tableView.columns().length;
-        const rowsCount = this.tableView.data().length;
-        if (columnsPerRow === 0 || rowsCount === 0)
-            return -1;
-        return selectedIndex % rowsCount;
+    _updateColumnCssClassName() {
+        super._updateColumnCssClassName();
+        this._columnCssClassName.push(`x-table-column-${this.cssClassFriendlyName}`);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: XCell, isStandalone: true, selector: "x-cell, td[x-cell]", host: { listeners: { "click": "onClick()" }, properties: { "class.x-cell": "this.cellClass", "class.x-cell-selected": "this.isSelected" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableColumnDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableColumnDef, isStandalone: true, selector: "[xTableColumnDef]", inputs: { name: ["xTableColumnDef", "name"] }, providers: [{ provide: CdkColumnDef, useExisting: XTableColumnDef }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableColumnDef, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'x-cell, td[x-cell]'
+                    selector: '[xTableColumnDef]',
+                    providers: [{ provide: CdkColumnDef, useExisting: XTableColumnDef }]
                 }]
-        }], propDecorators: { cellClass: [{
-                type: HostBinding,
-                args: ['class.x-cell']
-            }], isSelected: [{
-                type: HostBinding,
-                args: ['class.x-cell-selected']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
+        }], propDecorators: { name: [{
+                type: Input,
+                args: ['xTableColumnDef']
             }] } });
-class XHeaderCell {
+class XTableHeaderCell extends CdkHeaderCell {
     constructor() {
+        super(...arguments);
         this.tableViewService = inject(XTableViewService, { optional: true });
-        this.tableView = inject(XTableViewComponent, { optional: true });
-        this.cellClass = true;
+        this.tableView = inject(XTableView, { optional: true });
+        this.elementRef = inject(ElementRef);
     }
     get isActived() {
-        return this.tableViewService.activedHeaderCell === this;
+        return this.tableViewService.activedHeaderCells.includes(this);
     }
     onClick() {
-        this.tableViewService.activedHeaderCell = this;
-        const headerCells = this.tableView?.headerCells.toArray() ?? [];
+        this.tableViewService.activedHeaderCells = [this];
+        const headerCells = this.tableView?.headerCells() ?? [];
         const index = headerCells.indexOf(this);
-        const cells = this.tableView?.cells.toArray() ?? [];
-        const columnsCount = this.tableView?.columns().length ?? 0;
-        const rowsCount = this.tableView?.data().length ?? 0;
+        const cells = this.tableView?.cells() ?? [];
+        const columnsCount = (this.tableView?.headerRowRef()?.columns).length ?? 0;
+        const rowsCount = this.tableView?.rows().length ?? 0;
         if (columnsCount === 0 || rowsCount === 0) {
             return;
         }
@@ -160,180 +348,240 @@ class XHeaderCell {
             cell.setActivedRow(cell);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XHeaderCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: XHeaderCell, isStandalone: true, selector: "x-header-cell, th[x-header-cell]", host: { listeners: { "click": "onClick()" }, properties: { "class.x-header-cell": "this.cellClass", "class.x-header-cell-actived": "this.isActived" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableHeaderCell, isStandalone: true, selector: "x-table-header-cell, th[x-table-header-cell]", host: { attributes: { "role": "columnheader" }, listeners: { "click": "onClick()" }, properties: { "class.x-table-header-cell-actived": "this.isActived" }, classAttribute: "x-table-header-cell" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XHeaderCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableHeaderCell, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'x-header-cell, th[x-header-cell]'
+                    selector: 'x-table-header-cell, th[x-table-header-cell]',
+                    host: {
+                        class: 'x-table-header-cell',
+                        role: 'columnheader'
+                    }
                 }]
-        }], propDecorators: { cellClass: [{
-                type: HostBinding,
-                args: ['class.x-header-cell']
-            }], isActived: [{
+        }], propDecorators: { isActived: [{
                 type: HostBinding,
-                args: ['class.x-header-cell-actived']
+                args: ['class.x-table-header-cell-actived']
             }], onClick: [{
                 type: HostListener,
                 args: ['click']
             }] } });
-
-class XColumnDef {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XColumnDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: XColumnDef, isStandalone: true, selector: "[xColumnDef]", inputs: { name: ["xColumnDef", "name"] }, queries: [{ propertyName: "cell", first: true, predicate: XCellDef, descendants: true, static: true }, { propertyName: "header", first: true, predicate: XHeaderCellDef, descendants: true, static: true }], ngImport: i0 }); }
+class XTableFooterCell extends CdkFooterCell {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableFooterCell, isStandalone: true, selector: "x-table-footer-cell, td[x-table-footer-cell]", host: { classAttribute: "x-table-footer-cell" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XColumnDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableFooterCell, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[xColumnDef]'
+                    selector: 'x-table-footer-cell, td[x-table-footer-cell]',
+                    host: {
+                        class: 'x-table-footer-cell'
+                    }
                 }]
-        }], propDecorators: { name: [{
-                type: Input,
-                args: ['xColumnDef']
-            }], cell: [{
-                type: ContentChild,
-                args: [XCellDef, { static: true }]
-            }], header: [{
-                type: ContentChild,
-                args: [XHeaderCellDef, { static: true }]
-            }] } });
-
-class XRowDef {
-    constructor(vcr, tpl) {
-        this.vcr = vcr;
-        this.tpl = tpl;
+        }] });
+class XTableViewCell extends CdkCell {
+    constructor() {
+        super(...arguments);
+        this.tableViewService = inject(XTableViewService, { optional: true });
+        this.tableView = inject(XTableView, { optional: true });
+        this.elementRef = inject(ElementRef);
     }
-    ngOnInit() {
-        this.vcr.createEmbeddedView(this.tpl, { $implicit: this.rowData });
+    get isSelected() {
+        return this.tableViewService.selectedCells.includes(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XRowDef, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: XRowDef, isStandalone: true, selector: "[xRowDef]", inputs: { rowData: ["xRowDef", "rowData"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XRowDef, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[xRowDef]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }], propDecorators: { rowData: [{
-                type: Input,
-                args: ['xRowDef']
-            }] } });
-class XHeaderRowDef {
-    constructor(vcr, tpl) {
-        this.vcr = vcr;
-        this.tpl = tpl;
+    onClick() {
+        this.tableViewService.selectedCells = [this];
+        this.tableViewService.activedRows = [];
+        this.setActivedRow(this);
+        this.setActivedColumn(this);
     }
-    ngOnInit() {
-        this.vcr.createEmbeddedView(this.tpl);
+    setActivedRow(cell) {
+        const rows = this.tableView?.rows() ?? [];
+        if (rows.length > 0) {
+            const rowIndex = this.getRowIndex(cell);
+            if (rowIndex >= 0 && rowIndex < rows.length) {
+                const currentRow = rows[rowIndex];
+                this.tableViewService.activedRows.push(currentRow);
+            }
+        }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XHeaderRowDef, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: XHeaderRowDef, isStandalone: true, selector: "[xHeaderRowDef]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XHeaderRowDef, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[xHeaderRowDef]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }] });
-class XRow {
-    constructor() {
-        this.tableViewService = inject(XTableViewService, { optional: true });
-        this.tableView = inject(XTableViewComponent, { optional: true });
+    setActivedColumn(cell) {
+        const headerCells = (this.tableView?.headerCells() ?? []);
+        const headerRowRefs = this.tableView?.headerRowRefs() ?? [];
+        const headerCellsArray = this.convertToColumnBasedArray(headerCells, headerRowRefs.length);
+        const activedHeaderCells = [];
+        for (let cells of headerCellsArray) {
+            if (cells.length > 0) {
+                const columnIndex = this.getColumnIndex(cell);
+                if (columnIndex >= 0 && columnIndex < cells.length) {
+                    activedHeaderCells.push(cells[columnIndex]);
+                }
+            }
+        }
+        this.tableViewService.activedHeaderCells = activedHeaderCells;
     }
-    get isActived() {
-        return this.tableViewService.activedRows.includes(this);
+    convertToColumnBasedArray(input, columnsPerRow) {
+        const result = [];
+        for (let i = 0; i < columnsPerRow; i++) {
+            result.push([]);
+        }
+        for (let i = 0; i < input.length; i++) {
+            const columnIndex = i % columnsPerRow;
+            result[columnIndex].push(input[i]);
+        }
+        return result;
+    }
+    getColumnIndex(cell) {
+        if (!this.tableView || !this.tableView.cells())
+            return -1;
+        const cellsArray = this.tableView.cells();
+        const selectedIndex = cellsArray.indexOf(cell);
+        if (selectedIndex === -1)
+            return -1;
+        const columnsPerRow = (this.tableView.headerRowRef()?.columns).length ?? 0;
+        const rowsCount = this.tableView.rows().length;
+        if (columnsPerRow === 0 || rowsCount === 0)
+            return -1;
+        return Math.floor(selectedIndex / rowsCount);
+    }
+    getRowIndex(cell) {
+        if (!this.tableView || !this.tableView.cells())
+            return -1;
+        const cellsArray = this.tableView.cells();
+        const selectedIndex = cellsArray.indexOf(cell);
+        if (selectedIndex === -1)
+            return -1;
+        const columnsPerRow = (this.tableView.headerRowRef()?.columns).length ?? 0;
+        const rowsCount = this.tableView.rows().length;
+        if (columnsPerRow === 0 || rowsCount === 0)
+            return -1;
+        return selectedIndex % rowsCount;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: XRow, isStandalone: true, selector: "x-row, tr[x-row]", host: { properties: { "class.x-row-actived": "this.isActived" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewCell, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: XTableViewCell, isStandalone: true, selector: "x-table-cell, td[x-table-cell]", host: { listeners: { "click": "onClick()" }, properties: { "class.x-table-cell-selected": "this.isSelected" }, classAttribute: "x-table-cell" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewCell, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'x-row, tr[x-row]'
+                    selector: 'x-table-cell, td[x-table-cell]',
+                    host: {
+                        class: 'x-table-cell'
+                    }
                 }]
-        }], propDecorators: { isActived: [{
+        }], propDecorators: { isSelected: [{
                 type: HostBinding,
-                args: ['class.x-row-actived']
+                args: ['class.x-table-cell-selected']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
-/**
- * Table view
- * @selector x-table-view
- * @decorator component
- */
-const XTableViewPrefix = 'x-table-view';
-const X_TABLE_VIEW_CONFIG_NAME = 'tableView';
-/**
- * Table view Property
- */
-class XTableViewProperty extends XPropertyFunction(X_TABLE_VIEW_CONFIG_NAME) {
-    constructor() {
-        super(...arguments);
-        /**
-         * @zh_CN 数据
-         * @en_US Row data
-         */
-        this.data = input([]);
-        /**
-         * @zh_CN 列数据
-         * @en_US Columns data
-         */
-        this.columns = input([]);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTableViewProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: XTableViewProperty, isStandalone: true, selector: "x-table-view-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+class XTableTextColumn extends CdkTextColumn {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableTextColumn, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: XTableTextColumn, isStandalone: true, selector: "x-table-text-column", usesInheritance: true, ngImport: i0, template: `
+    <ng-container xTableColumnDef>
+      <th x-table-header-cell *xTableHeaderCellDef [style.text-align]="justify">
+        {{ headerText }}
+      </th>
+      <td x-table-cell *xTableCellDef="let data" [style.text-align]="justify">
+        {{ dataAccessor(data, name) }}
+      </td>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: XTableColumnDef, selector: "[xTableColumnDef]", inputs: ["xTableColumnDef"] }, { kind: "directive", type: XTableHeaderCellDef, selector: "[xTableHeaderCellDef]" }, { kind: "directive", type: XTableHeaderCell, selector: "x-table-header-cell, th[x-table-header-cell]" }, { kind: "directive", type: XTableViewCellDef, selector: "[xTableCellDef]" }, { kind: "directive", type: XTableViewCell, selector: "x-table-cell, td[x-table-cell]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTableViewProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableTextColumn, decorators: [{
             type: Component,
-            args: [{ selector: `${XTableViewPrefix}-property`, template: '' }]
+            args: [{
+                    selector: 'x-table-text-column',
+                    template: `
+    <ng-container xTableColumnDef>
+      <th x-table-header-cell *xTableHeaderCellDef [style.text-align]="justify">
+        {{ headerText }}
+      </th>
+      <td x-table-cell *xTableCellDef="let data" [style.text-align]="justify">
+        {{ dataAccessor(data, name) }}
+      </td>
+    </ng-container>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    imports: [XTableColumnDef, XTableHeaderCellDef, XTableHeaderCell, XTableViewCellDef, XTableViewCell]
+                }]
         }] });
 
-class XTableViewComponent extends XTableViewProperty {
-    constructor() {
-        super(...arguments);
-        this.hostClass = true;
-        this.columnMap = {};
-        this.tableViewService = inject(XTableViewService);
-    }
-    ngAfterContentInit() {
-        for (const def of this.columnDefs.toArray()) {
-            this.columnMap[def.name] = def;
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTableViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: XTableViewComponent, isStandalone: true, selector: "table[x-table-view]", host: { properties: { "class.x-table-view": "this.hostClass" } }, providers: [XTableViewService], queries: [{ propertyName: "columnDefs", predicate: XColumnDef }, { propertyName: "headerCells", predicate: XHeaderCell }, { propertyName: "cells", predicate: XCell }], viewQueries: [{ propertyName: "rows", predicate: XRow, descendants: true }], usesInheritance: true, ngImport: i0, template: "<thead>\r\n  <tr *xHeaderRowDef>\r\n    @for (columnName of columns(); track columnName) {\r\n      <ng-container *ngTemplateOutlet=\"columnMap[columnName]?.header?.template\"></ng-container>\r\n    }\r\n  </tr>\r\n</thead>\r\n<tbody>\r\n  @for (row of data(); track row) {\r\n    <tr x-row *xRowDef=\"row\">\r\n      @for (columnName of columns(); track columnName) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"columnMap[columnName]?.cell?.template; context: { $implicit: row }\"\r\n        ></ng-container>\r\n      }\r\n    </tr>\r\n  }\r\n</tbody>\r\n", styles: [".x-table-view{margin:0;padding:0}.x-table-view{border-collapse:separate;border-spacing:0}.x-table-view thead{position:sticky;top:0}.x-table-view thead th{padding:0 .5rem;text-align:left;font-weight:600;color:var(--x-text);border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default;background-color:var(--x-background)}.x-table-view thead th:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view thead th.x-header-cell-actived,.x-table-view tbody tr.x-row-actived{background-color:var(--x-background-a100)}.x-table-view tbody td{padding:0 .5rem;text-align:left;font-weight:500;color:var(--x-text);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default}.x-table-view tbody td:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view tbody td.x-cell-selected{border-color:var(--x-border-a200);background-color:var(--x-primary-900)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: XRow, selector: "x-row, tr[x-row]" }, { kind: "directive", type: XRowDef, selector: "[xRowDef]", inputs: ["xRowDef"] }, { kind: "directive", type: XHeaderRowDef, selector: "[xHeaderRowDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTableViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'table[x-table-view]', imports: [NgTemplateOutlet, XRow, XRowDef, XHeaderRowDef], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XTableViewService], template: "<thead>\r\n  <tr *xHeaderRowDef>\r\n    @for (columnName of columns(); track columnName) {\r\n      <ng-container *ngTemplateOutlet=\"columnMap[columnName]?.header?.template\"></ng-container>\r\n    }\r\n  </tr>\r\n</thead>\r\n<tbody>\r\n  @for (row of data(); track row) {\r\n    <tr x-row *xRowDef=\"row\">\r\n      @for (columnName of columns(); track columnName) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"columnMap[columnName]?.cell?.template; context: { $implicit: row }\"\r\n        ></ng-container>\r\n      }\r\n    </tr>\r\n  }\r\n</tbody>\r\n", styles: [".x-table-view{margin:0;padding:0}.x-table-view{border-collapse:separate;border-spacing:0}.x-table-view thead{position:sticky;top:0}.x-table-view thead th{padding:0 .5rem;text-align:left;font-weight:600;color:var(--x-text);border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default;background-color:var(--x-background)}.x-table-view thead th:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view thead th.x-header-cell-actived,.x-table-view tbody tr.x-row-actived{background-color:var(--x-background-a100)}.x-table-view tbody td{padding:0 .5rem;text-align:left;font-weight:500;color:var(--x-text);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);cursor:default}.x-table-view tbody td:first-child{border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-view tbody td.x-cell-selected{border-color:var(--x-border-a200);background-color:var(--x-primary-900)}\n"] }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.x-table-view']
-            }], columnDefs: [{
-                type: ContentChildren,
-                args: [XColumnDef]
-            }], headerCells: [{
-                type: ContentChildren,
-                args: [XHeaderCell]
-            }], cells: [{
-                type: ContentChildren,
-                args: [XCell]
-            }], rows: [{
-                type: ViewChildren,
-                args: [XRow]
-            }] } });
-
+const EXPORTED_DECLARATIONS = [
+    // Table
+    XTableView,
+    // Template defs
+    XTableHeaderCellDef,
+    XTableHeaderRowDef,
+    XTableColumnDef,
+    XTableViewCellDef,
+    XTableViewRowDef,
+    XTableFooterCellDef,
+    XTableFooterRowDef,
+    // Cell directives
+    XTableHeaderCell,
+    XTableViewCell,
+    XTableFooterCell,
+    // Row directives
+    XTableHeaderRow,
+    XTableViewRow,
+    XTableFooterRow,
+    XTableNoDataRow,
+    XTableTextColumn
+];
 class XTableViewModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTableViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: XTableViewModule, imports: [XTableViewComponent, XCell, XHeaderCell, XCellDef, XHeaderCellDef, XColumnDef], exports: [XTableViewComponent, XCell, XHeaderCell, XCellDef, XHeaderCellDef, XColumnDef] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTableViewModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: XTableViewModule, imports: [CdkTableModule, 
+            // Table
+            XTableView,
+            // Template defs
+            XTableHeaderCellDef,
+            XTableHeaderRowDef,
+            XTableColumnDef,
+            XTableViewCellDef,
+            XTableViewRowDef,
+            XTableFooterCellDef,
+            XTableFooterRowDef,
+            // Cell directives
+            XTableHeaderCell,
+            XTableViewCell,
+            XTableFooterCell,
+            // Row directives
+            XTableHeaderRow,
+            XTableViewRow,
+            XTableFooterRow,
+            XTableNoDataRow,
+            XTableTextColumn], exports: [
+            // Table
+            XTableView,
+            // Template defs
+            XTableHeaderCellDef,
+            XTableHeaderRowDef,
+            XTableColumnDef,
+            XTableViewCellDef,
+            XTableViewRowDef,
+            XTableFooterCellDef,
+            XTableFooterRowDef,
+            // Cell directives
+            XTableHeaderCell,
+            XTableViewCell,
+            XTableFooterCell,
+            // Row directives
+            XTableHeaderRow,
+            XTableViewRow,
+            XTableFooterRow,
+            XTableNoDataRow,
+            XTableTextColumn] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewModule, imports: [CdkTableModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTableViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTableViewModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [XTableViewComponent, XCell, XHeaderCell, XCellDef, XHeaderCellDef, XColumnDef],
-                    imports: [XTableViewComponent, XCell, XHeaderCell, XCellDef, XHeaderCellDef, XColumnDef]
+                    exports: [...EXPORTED_DECLARATIONS],
+                    imports: [CdkTableModule, ...EXPORTED_DECLARATIONS]
                 }]
         }] });
 
@@ -341,5 +589,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { XCell, XCellDef, XColumnDef, XHeaderCell, XHeaderCellDef, XTableViewComponent, XTableViewModule };
+export { XTableColumnDef, XTableFooterCell, XTableFooterCellDef, XTableFooterRow, XTableFooterRowDef, XTableHeaderCell, XTableHeaderCellDef, XTableHeaderRow, XTableHeaderRowDef, XTableNoDataRow, XTableTextColumn, XTableView, XTableViewCell, XTableViewCellDef, XTableViewModule, XTableViewPrefix, XTableViewProperty, XTableViewRow, XTableViewRowDef };
 //# sourceMappingURL=ng-nest-ui-table-view.mjs.map