@ngneers/controls 0.0.1-pre6 → 0.0.1-pre7

package/fesm2022/ngneers-controls-table.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, effect, Directive, contentChild, ChangeDetectionStrategy, Component, signal, viewChild, model, booleanAttribute, computed, afterNextRender, Renderer2, afterRenderEffect, EnvironmentInjector, ApplicationRef, createComponent, NgModule, ViewContainerRef } from '@angular/core';
+import { input, inject, ElementRef, effect, Directive, contentChild, ChangeDetectionStrategy, Component, signal, viewChild, model, booleanAttribute, computed, afterRenderEffect, afterNextRender, Renderer2, EnvironmentInjector, ApplicationRef, createComponent, NgModule, ViewContainerRef } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { executeMultiFilter } from '@ngneers/controls/api';
 import { injectThemeTemplate, templateTypesFn, elementSizeSignal, NgnTemplate, setComponentInput } from '@ngneers/controls/api/ng';
@@ -7,6 +7,7 @@ import { ResizeEngine, getResizeLimitInPx } from '@ngneers/controls/api/resize';
 import { NgnBase, NgnPt, provideSelf, getNearestNgnInstance, getNearestNgnInstanceSig } from '@ngneers/controls/base';
 import { NgnIcon } from '@ngneers/controls/icon';
 import { NgnPaginator } from '@ngneers/controls/paginator';
+import { NgnScrollShadow } from '@ngneers/controls/scroll-shadow';
 import { NgnScrollerItem, NgnScroller } from '@ngneers/controls/scroller';
 import { tableControlTemplate } from '@ngneers/controls-themes/templates/table';
 import { toggleClass, NgnError } from '@ngneers/controls/utils';
@@ -32,10 +33,10 @@ class NgnTableGroupHeaderTr extends NgnScrollerItem {
         toggleClass(this._element.nativeElement, this.theme.class('row'), true);
         toggleClass(this._element.nativeElement, this.theme.class('group-header-row'), true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableGroupHeaderTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: NgnTableGroupHeaderTr, isStandalone: true, selector: "[ngnTableGroupHeaderTr]", inputs: { ngnTableGroupHeaderTr: { classPropertyName: "ngnTableGroupHeaderTr", publicName: "ngnTableGroupHeaderTr", isSignal: true, isRequired: true, transformFunction: null }, ngnScrollerItem: { classPropertyName: "ngnScrollerItem", publicName: "ngnScrollerItem", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-rowindex": "ngnTableGroupHeaderTr().index + 2", "style.--ngn-table-row-index": "ngnTableGroupHeaderTr().index + 2" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableGroupHeaderTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: NgnTableGroupHeaderTr, isStandalone: true, selector: "[ngnTableGroupHeaderTr]", inputs: { ngnTableGroupHeaderTr: { classPropertyName: "ngnTableGroupHeaderTr", publicName: "ngnTableGroupHeaderTr", isSignal: true, isRequired: true, transformFunction: null }, ngnScrollerItem: { classPropertyName: "ngnScrollerItem", publicName: "ngnScrollerItem", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-rowindex": "ngnTableGroupHeaderTr().index + 2", "style.--ngn-table-row-index": "ngnTableGroupHeaderTr().index + 2" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableGroupHeaderTr, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableGroupHeaderTr, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableGroupHeaderTr]',
@@ -57,10 +58,10 @@ class NgnTableTemplates extends NgnBase {
      * Types for the table templates.
      */
     templateTypes = templateTypesFn();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableTemplates, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.2", type: NgnTableTemplates, isStandalone: true, selector: "ng-component", queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "_groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableTemplates, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: NgnTableTemplates, isStandalone: true, selector: "ng-component", queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "_groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableTemplates, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableTemplates, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -88,6 +89,7 @@ class NgnTable extends NgnTableTemplates {
         reordering: () => this._isReordering(),
     });
     _registeredHeaderCells = signal([], ...(ngDevMode ? [{ debugName: "_registeredHeaderCells" }] : /* istanbul ignore next */ []));
+    _stickyColumns = signal(new Map(), ...(ngDevMode ? [{ debugName: "_stickyColumns" }] : /* istanbul ignore next */ []));
     _scroller = viewChild.required(NgnScroller);
     rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     rowHeight = input(...(ngDevMode ? [undefined, { debugName: "rowHeight" }] : /* istanbul ignore next */ []));
@@ -309,25 +311,6 @@ class NgnTable extends NgnTableTemplates {
         });
     }, ...(ngDevMode ? [{ debugName: "_sortedRows" }] : /* istanbul ignore next */ []));
     columnCount = computed(() => this._registeredHeaderCells().length, ...(ngDevMode ? [{ debugName: "columnCount" }] : /* istanbul ignore next */ []));
-    // --- Sticky column registry (lightweight — directive owns the logic) ---
-    _stickyColumnIds = signal(new Map(), ...(ngDevMode ? [{ debugName: "_stickyColumnIds" }] : /* istanbul ignore next */ []));
-    registerStickyColumnId(columnId, side) {
-        this._stickyColumnIds.update(m => {
-            const n = new Map(m);
-            n.set(columnId, side);
-            return n;
-        });
-    }
-    unregisterStickyColumnId(columnId) {
-        this._stickyColumnIds.update(m => {
-            const n = new Map(m);
-            n.delete(columnId);
-            return n;
-        });
-    }
-    getStickyColumnIds() {
-        return this._stickyColumnIds();
-    }
     // --- Column reorder state ---
     _isReordering = signal(false, ...(ngDevMode ? [{ debugName: "_isReordering" }] : /* istanbul ignore next */ []));
     _reorderSourceColumnId = signal(null, ...(ngDevMode ? [{ debugName: "_reorderSourceColumnId" }] : /* istanbul ignore next */ []));
@@ -350,6 +333,34 @@ class NgnTable extends NgnTableTemplates {
         const missing = cellIds.filter(id => !validOrder.includes(id));
         return [...validOrder, ...missing];
     }, ...(ngDevMode ? [{ debugName: "_effectiveColumnOrder" }] : /* istanbul ignore next */ []));
+    _stickyStartColumns = computed(() => {
+        const stickyMap = this._stickyColumns();
+        const order = this._effectiveColumnOrder();
+        const contiguous = [];
+        for (const id of order) {
+            if (stickyMap.get(id) === 'start') {
+                contiguous.push(id);
+            }
+            else {
+                break;
+            }
+        }
+        return contiguous;
+    }, ...(ngDevMode ? [{ debugName: "_stickyStartColumns" }] : /* istanbul ignore next */ []));
+    _stickyEndColumns = computed(() => {
+        const stickyMap = this._stickyColumns();
+        const order = this._effectiveColumnOrder();
+        const contiguous = [];
+        for (let i = order.length - 1; i >= 0; i--) {
+            if (stickyMap.get(order[i]) === 'end') {
+                contiguous.unshift(order[i]);
+            }
+            else {
+                break;
+            }
+        }
+        return contiguous;
+    }, ...(ngDevMode ? [{ debugName: "_stickyEndColumns" }] : /* istanbul ignore next */ []));
     /**
      * Maps column ID → 1-based visual position.
      */
@@ -416,6 +427,36 @@ class NgnTable extends NgnTableTemplates {
             }
             return `${checkboxCol}repeat(${this.columnCount()}, 1fr)`;
         }, ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : /* istanbul ignore next */ []));
+        afterRenderEffect(() => {
+            const startCols = this._stickyStartColumns();
+            const endCols = this._stickyEndColumns();
+            if (startCols.length === 0 && endCols.length === 0)
+                return;
+            if (this._resizeEngine.isDragging())
+                return;
+            this._tableElementSize();
+            const tableEl = this.element.nativeElement.querySelector(':scope > table');
+            if (!tableEl)
+                return;
+            const cells = this._registeredHeaderCells();
+            let selectionWidth = 0;
+            if (this._hasSelectionColumn()) {
+                const selCol = tableEl.querySelector(`.${this.theme.class('selection-column')}`);
+                selectionWidth = selCol?.getBoundingClientRect().width ?? 0;
+            }
+            let cumulativeLeft = selectionWidth;
+            for (let i = 0; i < startCols.length; i++) {
+                tableEl.style.setProperty(`--ngn-sticky-start-offset-${i}`, `${cumulativeLeft}px`);
+                const cell = cells.find(c => c.ngnTableTh() === startCols[i]);
+                cumulativeLeft += cell?.element.nativeElement.getBoundingClientRect().width ?? 0;
+            }
+            let cumulativeRight = 0;
+            for (let i = endCols.length - 1; i >= 0; i--) {
+                tableEl.style.setProperty(`--ngn-sticky-end-offset-${i}`, `${cumulativeRight}px`);
+                const cell = cells.find(c => c.ngnTableTh() === endCols[i]);
+                cumulativeRight += cell?.element.nativeElement.getBoundingClientRect().width ?? 0;
+            }
+        });
     }
     pageChanged(event) {
         this.pageState.set(event);
@@ -438,6 +479,33 @@ class NgnTable extends NgnTableTemplates {
     getRegisteredHeaderCells() {
         return this._registeredHeaderCells();
     }
+    registerStickyColumn(columnId, side) {
+        this._stickyColumns.update(map => {
+            const next = new Map(map);
+            next.set(columnId, side);
+            return next;
+        });
+    }
+    unregisterStickyColumn(columnId) {
+        this._stickyColumns.update(map => {
+            const next = new Map(map);
+            next.delete(columnId);
+            return next;
+        });
+    }
+    getStickyInfo(columnId) {
+        const startCols = this._stickyStartColumns();
+        const endCols = this._stickyEndColumns();
+        const startIndex = startCols.indexOf(columnId);
+        if (startIndex >= 0) {
+            return { side: 'start', index: startIndex, isEdge: startIndex === startCols.length - 1 };
+        }
+        const endIndex = endCols.indexOf(columnId);
+        if (endIndex >= 0) {
+            return { side: 'end', index: endIndex, isEdge: endIndex === 0 };
+        }
+        return null;
+    }
     // --- Resize operations (called by NgnTableTh) ---
     startColumnResize(columnIndex, event) {
         if (!this.resizable())
@@ -594,6 +662,21 @@ class NgnTable extends NgnTableTemplates {
         this.toggleGroup(row.groupKey);
     }
     // --- Reorder operations (called by NgnTableReorderableColumn) ---
+    getReorderBounds(columnId) {
+        const order = this._effectiveColumnOrder();
+        const startCols = this._stickyStartColumns();
+        const endCols = this._stickyEndColumns();
+        const side = this._stickyColumns().get(columnId);
+        if (side === 'start') {
+            return { min: 0, max: startCols.length };
+        }
+        else if (side === 'end') {
+            return { min: order.length - endCols.length, max: order.length };
+        }
+        else {
+            return { min: startCols.length, max: order.length - endCols.length };
+        }
+    }
     startColumnReorder(columnId) {
         if (!this.reorderable())
             return;
@@ -624,27 +707,8 @@ class NgnTable extends NgnTableTemplates {
                 break;
             }
         }
-        // Clamp target so non-sticky columns cannot land inside sticky zones
-        const stickyMap = this._stickyColumnIds();
-        if (stickyMap.size > 0) {
-            // Count sticky-left columns at the start
-            let stickyLeftCount = 0;
-            for (const id of effectiveOrder) {
-                if (stickyMap.get(id) === 'left')
-                    stickyLeftCount++;
-                else
-                    break;
-            }
-            // Count sticky-right columns at the end
-            let stickyRightCount = 0;
-            for (let i = effectiveOrder.length - 1; i >= 0; i--) {
-                if (stickyMap.get(effectiveOrder[i]) === 'right')
-                    stickyRightCount++;
-                else
-                    break;
-            }
-            targetIndex = Math.max(stickyLeftCount, Math.min(targetIndex, effectiveOrder.length - stickyRightCount));
-        }
+        const bounds = this.getReorderBounds(sourceId);
+        targetIndex = Math.max(bounds.min, Math.min(bounds.max, targetIndex));
         this._reorderTargetIndex = targetIndex;
         // Compute indicator position relative to the table element
         const tableEl = this.element.nativeElement.querySelector(':scope > table');
@@ -752,7 +816,6 @@ class NgnTable extends NgnTableTemplates {
             return;
         const headerEl = headerCell.element.nativeElement;
         const ctx = autoSizeCanvasCtx();
-        let maxContentWidth = 0;
         // Measure header: text width + non-text siblings (icons, controls) + flex gap.
         // The header cell is a flex container with: cell-text, spacer, filter/sort icons, resize handle.
         const cellTextClass = this.theme.class('cell-text');
@@ -781,7 +844,7 @@ class NgnTable extends NgnTableTemplates {
         if (visibleSiblingCount > 0) {
             headerRequiredWidth += headerGap * visibleSiblingCount;
         }
-        maxContentWidth = headerRequiredWidth;
+        let maxContentWidth = headerRequiredWidth;
         // Measure visible body cells (nth-child is 1-indexed, offset by selection column)
         const selectionOffset = this._hasSelectionColumn() ? 1 : 0;
         const bodyCells = Array.from(tableEl.querySelectorAll(`tbody tr td:nth-child(${columnIndex + selectionOffset + 1})`));
@@ -804,10 +867,10 @@ class NgnTable extends NgnTableTemplates {
         this._resizeEngine.setItemSize(headerCell, `${clampedWidth}px`);
         this._resizeEngine.hasBeenResized.set(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: NgnTable, isStandalone: true, selector: "ngn-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, virtualPadding: { classPropertyName: "virtualPadding", publicName: "virtualPadding", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, expandedGroups: { classPropertyName: "expandedGroups", publicName: "expandedGroups", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, lockSizes: { classPropertyName: "lockSizes", publicName: "lockSizes", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, columnOrder: { classPropertyName: "columnOrder", publicName: "columnOrder", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", expandedGroups: "expandedGroupsChange", columnOrder: "columnOrderChange", sort: "sortChange", filters: "filtersChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-multiselectable": "selectionMode() === \"multi\" ? true : null" } }, providers: [provideSelf(NgnTable)], viewQueries: [{ propertyName: "_scroller", first: true, predicate: NgnScroller, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<table\r\n  #scrollContainer\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"{ table: true, striped: striped() }\"\r\n  [attr.aria-rowcount]=\"formattedRows().length\"\r\n  [style.--ngn-table-column-count]=\"totalColumnCount()\"\r\n  [style.--ngn-table-selection-offset]=\"showCheckboxes() ? 1 : 0\"\r\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\r\n  [style.--ngn-table-row-height.px]=\"rowHeight()\"\r\n>\r\n  <thead [ptInt]=\"this\" [ptClass]=\"'head'\">\r\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n  </thead>\r\n  @if (_dropIndicatorState()) {\r\n    <div\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'drop-indicator'\"\r\n      [style.left.px]=\"_dropIndicatorState()!.leftPx\"\r\n      [style.top.px]=\"_dropIndicatorState()!.topPx\"\r\n      [style.height.px]=\"_dropIndicatorState()!.heightPx\"\r\n    ></div>\r\n  }\r\n\r\n  <tbody\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'body'\"\r\n    ngn-scroller\r\n    #scroller\r\n    [scrollContainer]=\"scrollContainer\"\r\n    [virtual]=\"virtual()\"\r\n    [items]=\"pagedRows()\"\r\n    [fieldId]=\"'id'\"\r\n    [itemHeight]=\"rowHeight() || 0\"\r\n    [virtualPadding]=\"virtualPadding()\"\r\n    [style.--ngn-table-item-start-index]=\"scroller.itemStartIndex()\"\r\n  >\r\n    <ng-template #item [ngnTemplate]=\"scroller.templateTypes.item\" let-item let-index=\"index\">\r\n      @if (item.kind === 'group-header') {\r\n        @if (groupHeaderTemplate(); as customGroupHeader) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"customGroupHeader\"\r\n            [ngTemplateOutletContext]=\"{\r\n              $implicit: {\r\n                groupKey: item.groupKey,\r\n                groupValue: item.groupValue,\r\n                count: item.count,\r\n                expanded: item.expanded,\r\n              },\r\n            }\"\r\n          ></ng-container>\r\n        } @else {\r\n          <tr\r\n            [ngnTableGroupHeaderTr]=\"item\"\r\n            [class]=\"theme.classes({ 'group-expanded': item.expanded })\"\r\n            [attr.aria-expanded]=\"item.expanded\"\r\n            role=\"row\"\r\n            (click)=\"toggleGroupFromRow(item)\"\r\n          >\r\n            <td [class]=\"theme.class('group-header-cell')\" role=\"gridcell\">\r\n              <ngn-icon [defaultIcon]=\"'chevron_right'\" [class]=\"theme.class('group-toggle')\" />\r\n              <span>{{ item.groupValue }}</span>\r\n              <span>({{ item.count }})</span>\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"bodyTemplate()\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n        ></ng-container>\r\n      }\r\n    </ng-template>\r\n  </tbody>\r\n</table>\r\n@if (paginator()) {\r\n  <ngn-paginator [totalItems]=\"rows().length\" (value)=\"pageChanged($event)\" />\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgnScroller, selector: "ngn-scroller, [ngn-scroller]", inputs: ["items", "fieldId", "virtual", "itemHeight", "virtualPadding", "focusable", "fieldSticky"] }, { kind: "component", type: NgnPaginator, selector: "ngn-paginator", inputs: ["totalItems", "pageSize", "possiblePageSizes", "fixedPageSize", "page"], outputs: ["pageSizeChange", "value", "pageChange"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "directive", type: NgnTableGroupHeaderTr, selector: "[ngnTableGroupHeaderTr]", inputs: ["ngnTableGroupHeaderTr", "ngnScrollerItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: NgnTable, isStandalone: true, selector: "ngn-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, virtualPadding: { classPropertyName: "virtualPadding", publicName: "virtualPadding", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, expandedGroups: { classPropertyName: "expandedGroups", publicName: "expandedGroups", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, lockSizes: { classPropertyName: "lockSizes", publicName: "lockSizes", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, columnOrder: { classPropertyName: "columnOrder", publicName: "columnOrder", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", expandedGroups: "expandedGroupsChange", columnOrder: "columnOrderChange", sort: "sortChange", filters: "filtersChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-multiselectable": "selectionMode() === \"multi\" ? true : null" } }, providers: [provideSelf(NgnTable)], viewQueries: [{ propertyName: "_scroller", first: true, predicate: NgnScroller, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<table\r\n  #scrollContainer\r\n  ngnScrollShadow=\"horizontal\"\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"{ table: true, striped: striped() }\"\r\n  [attr.aria-rowcount]=\"formattedRows().length\"\r\n  [style.--ngn-table-column-count]=\"totalColumnCount()\"\r\n  [style.--ngn-table-selection-offset]=\"showCheckboxes() ? 1 : 0\"\r\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\r\n  [style.--ngn-table-row-height.px]=\"rowHeight()\"\r\n>\r\n  <thead [ptInt]=\"this\" [ptClass]=\"'head'\">\r\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n  </thead>\r\n  @if (_dropIndicatorState()) {\r\n    <div\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'drop-indicator'\"\r\n      [style.left.px]=\"_dropIndicatorState()!.leftPx\"\r\n      [style.top.px]=\"_dropIndicatorState()!.topPx\"\r\n      [style.height.px]=\"_dropIndicatorState()!.heightPx\"\r\n    ></div>\r\n  }\r\n\r\n  <tbody\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'body'\"\r\n    ngn-scroller\r\n    #scroller\r\n    [scrollContainer]=\"scrollContainer\"\r\n    [virtual]=\"virtual()\"\r\n    [items]=\"pagedRows()\"\r\n    [fieldId]=\"'id'\"\r\n    [itemHeight]=\"rowHeight() || 0\"\r\n    [virtualPadding]=\"virtualPadding()\"\r\n    [style.--ngn-table-item-start-index]=\"scroller.itemStartIndex()\"\r\n  >\r\n    <ng-template #item [ngnTemplate]=\"scroller.templateTypes.item\" let-item let-index=\"index\">\r\n      @if (item.kind === 'group-header') {\r\n        @if (groupHeaderTemplate(); as customGroupHeader) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"customGroupHeader\"\r\n            [ngTemplateOutletContext]=\"{\r\n              $implicit: {\r\n                groupKey: item.groupKey,\r\n                groupValue: item.groupValue,\r\n                count: item.count,\r\n                expanded: item.expanded,\r\n              },\r\n            }\"\r\n          ></ng-container>\r\n        } @else {\r\n          <tr\r\n            [ngnTableGroupHeaderTr]=\"item\"\r\n            [class]=\"theme.classes({ 'group-expanded': item.expanded })\"\r\n            [attr.aria-expanded]=\"item.expanded\"\r\n            role=\"row\"\r\n            (click)=\"toggleGroupFromRow(item)\"\r\n          >\r\n            <td [class]=\"theme.class('group-header-cell')\" role=\"gridcell\">\r\n              <ngn-icon\r\n                [defaultIcon]=\"'table-group-toggle'\"\r\n                [class]=\"theme.class('group-toggle')\"\r\n              />\r\n              <span>{{ item.groupValue }}</span>\r\n              <span>({{ item.count }})</span>\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"bodyTemplate()\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n        ></ng-container>\r\n      }\r\n    </ng-template>\r\n  </tbody>\r\n</table>\r\n@if (paginator()) {\r\n  <ngn-paginator [totalItems]=\"rows().length\" (value)=\"pageChanged($event)\" />\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgnScroller, selector: "ngn-scroller, [ngn-scroller]", inputs: ["items", "fieldId", "virtual", "itemHeight", "virtualPadding", "focusable", "fieldSticky"] }, { kind: "component", type: NgnPaginator, selector: "ngn-paginator", inputs: ["totalItems", "pageSize", "possiblePageSizes", "fixedPageSize", "page"], outputs: ["pageSizeChange", "value", "pageChange"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "directive", type: NgnTableGroupHeaderTr, selector: "[ngnTableGroupHeaderTr]", inputs: ["ngnTableGroupHeaderTr", "ngnScrollerItem"] }, { kind: "directive", type: NgnScrollShadow, selector: "[ngnScrollShadow]", inputs: ["ngnScrollShadow", "scrollShadowTarget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTable, decorators: [{
             type: Component,
             args: [{ selector: 'ngn-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -817,11 +880,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         NgnPt,
                         NgnIcon,
                         NgnTableGroupHeaderTr,
+                        NgnScrollShadow,
                     ], providers: [provideSelf(NgnTable)], host: {
                         tabindex: '0',
                         '[attr.aria-multiselectable]': 'selectionMode() === "multi" ? true : null',
                         '(keydown)': 'onKeyDown($event)',
-                    }, template: "<table\r\n  #scrollContainer\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"{ table: true, striped: striped() }\"\r\n  [attr.aria-rowcount]=\"formattedRows().length\"\r\n  [style.--ngn-table-column-count]=\"totalColumnCount()\"\r\n  [style.--ngn-table-selection-offset]=\"showCheckboxes() ? 1 : 0\"\r\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\r\n  [style.--ngn-table-row-height.px]=\"rowHeight()\"\r\n>\r\n  <thead [ptInt]=\"this\" [ptClass]=\"'head'\">\r\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n  </thead>\r\n  @if (_dropIndicatorState()) {\r\n    <div\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'drop-indicator'\"\r\n      [style.left.px]=\"_dropIndicatorState()!.leftPx\"\r\n      [style.top.px]=\"_dropIndicatorState()!.topPx\"\r\n      [style.height.px]=\"_dropIndicatorState()!.heightPx\"\r\n    ></div>\r\n  }\r\n\r\n  <tbody\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'body'\"\r\n    ngn-scroller\r\n    #scroller\r\n    [scrollContainer]=\"scrollContainer\"\r\n    [virtual]=\"virtual()\"\r\n    [items]=\"pagedRows()\"\r\n    [fieldId]=\"'id'\"\r\n    [itemHeight]=\"rowHeight() || 0\"\r\n    [virtualPadding]=\"virtualPadding()\"\r\n    [style.--ngn-table-item-start-index]=\"scroller.itemStartIndex()\"\r\n  >\r\n    <ng-template #item [ngnTemplate]=\"scroller.templateTypes.item\" let-item let-index=\"index\">\r\n      @if (item.kind === 'group-header') {\r\n        @if (groupHeaderTemplate(); as customGroupHeader) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"customGroupHeader\"\r\n            [ngTemplateOutletContext]=\"{\r\n              $implicit: {\r\n                groupKey: item.groupKey,\r\n                groupValue: item.groupValue,\r\n                count: item.count,\r\n                expanded: item.expanded,\r\n              },\r\n            }\"\r\n          ></ng-container>\r\n        } @else {\r\n          <tr\r\n            [ngnTableGroupHeaderTr]=\"item\"\r\n            [class]=\"theme.classes({ 'group-expanded': item.expanded })\"\r\n            [attr.aria-expanded]=\"item.expanded\"\r\n            role=\"row\"\r\n            (click)=\"toggleGroupFromRow(item)\"\r\n          >\r\n            <td [class]=\"theme.class('group-header-cell')\" role=\"gridcell\">\r\n              <ngn-icon [defaultIcon]=\"'chevron_right'\" [class]=\"theme.class('group-toggle')\" />\r\n              <span>{{ item.groupValue }}</span>\r\n              <span>({{ item.count }})</span>\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"bodyTemplate()\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n        ></ng-container>\r\n      }\r\n    </ng-template>\r\n  </tbody>\r\n</table>\r\n@if (paginator()) {\r\n  <ngn-paginator [totalItems]=\"rows().length\" (value)=\"pageChanged($event)\" />\r\n}\r\n" }]
+                    }, template: "<table\r\n  #scrollContainer\r\n  ngnScrollShadow=\"horizontal\"\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"{ table: true, striped: striped() }\"\r\n  [attr.aria-rowcount]=\"formattedRows().length\"\r\n  [style.--ngn-table-column-count]=\"totalColumnCount()\"\r\n  [style.--ngn-table-selection-offset]=\"showCheckboxes() ? 1 : 0\"\r\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\r\n  [style.--ngn-table-row-height.px]=\"rowHeight()\"\r\n>\r\n  <thead [ptInt]=\"this\" [ptClass]=\"'head'\">\r\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n  </thead>\r\n  @if (_dropIndicatorState()) {\r\n    <div\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'drop-indicator'\"\r\n      [style.left.px]=\"_dropIndicatorState()!.leftPx\"\r\n      [style.top.px]=\"_dropIndicatorState()!.topPx\"\r\n      [style.height.px]=\"_dropIndicatorState()!.heightPx\"\r\n    ></div>\r\n  }\r\n\r\n  <tbody\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'body'\"\r\n    ngn-scroller\r\n    #scroller\r\n    [scrollContainer]=\"scrollContainer\"\r\n    [virtual]=\"virtual()\"\r\n    [items]=\"pagedRows()\"\r\n    [fieldId]=\"'id'\"\r\n    [itemHeight]=\"rowHeight() || 0\"\r\n    [virtualPadding]=\"virtualPadding()\"\r\n    [style.--ngn-table-item-start-index]=\"scroller.itemStartIndex()\"\r\n  >\r\n    <ng-template #item [ngnTemplate]=\"scroller.templateTypes.item\" let-item let-index=\"index\">\r\n      @if (item.kind === 'group-header') {\r\n        @if (groupHeaderTemplate(); as customGroupHeader) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"customGroupHeader\"\r\n            [ngTemplateOutletContext]=\"{\r\n              $implicit: {\r\n                groupKey: item.groupKey,\r\n                groupValue: item.groupValue,\r\n                count: item.count,\r\n                expanded: item.expanded,\r\n              },\r\n            }\"\r\n          ></ng-container>\r\n        } @else {\r\n          <tr\r\n            [ngnTableGroupHeaderTr]=\"item\"\r\n            [class]=\"theme.classes({ 'group-expanded': item.expanded })\"\r\n            [attr.aria-expanded]=\"item.expanded\"\r\n            role=\"row\"\r\n            (click)=\"toggleGroupFromRow(item)\"\r\n          >\r\n            <td [class]=\"theme.class('group-header-cell')\" role=\"gridcell\">\r\n              <ngn-icon\r\n                [defaultIcon]=\"'table-group-toggle'\"\r\n                [class]=\"theme.class('group-toggle')\"\r\n              />\r\n              <span>{{ item.groupValue }}</span>\r\n              <span>({{ item.count }})</span>\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"bodyTemplate()\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n        ></ng-container>\r\n      }\r\n    </ng-template>\r\n  </tbody>\r\n</table>\r\n@if (paginator()) {\r\n  <ngn-paginator [totalItems]=\"rows().length\" (value)=\"pageChanged($event)\" />\r\n}\r\n" }]
         }], ctorParameters: () => [], propDecorators: { _scroller: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnScroller), { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], fieldId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldId", required: true }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], virtualPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualPadding", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], expandedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedGroups", required: false }] }, { type: i0.Output, args: ["expandedGroupsChange"] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], resizeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMode", required: false }] }], lockSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockSizes", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], columnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnOrder", required: false }] }, { type: i0.Output, args: ["columnOrderChange"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }] } });
 // --- Auto-size helpers ---
 /** Lazily created canvas context for text measurement (no DOM reflows). */
@@ -854,6 +918,22 @@ class NgnTableTd extends NgnBase {
         }
         return logicalIndex + 1;
     }, ...(ngDevMode ? [{ debugName: "_visualColumnIndex" }] : /* istanbul ignore next */ []));
+    _columnId = computed(() => {
+        const table = this._table();
+        if (!table)
+            return null;
+        const offset = table.showCheckboxes() ? 1 : 0;
+        const logicalIndex = this._logicalIndex() - offset;
+        const cells = table.getRegisteredHeaderCells();
+        return cells[logicalIndex]?.ngnTableTh() ?? null;
+    }, ...(ngDevMode ? [{ debugName: "_columnId" }] : /* istanbul ignore next */ []));
+    _stickyInfo = computed(() => {
+        const table = this._table();
+        const columnId = this._columnId();
+        if (!table || !columnId)
+            return null;
+        return table.getStickyInfo(columnId);
+    }, ...(ngDevMode ? [{ debugName: "_stickyInfo" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         this.prepareDom();
@@ -866,14 +946,38 @@ class NgnTableTd extends NgnBase {
             const table = getNearestNgnInstance(this.element.nativeElement, NgnTable);
             this._table.set(table);
         });
+        afterRenderEffect(() => {
+            const info = this._stickyInfo();
+            const el = this.element.nativeElement;
+            toggleClass(el, this.theme.class('sticky-start'), info?.side === 'start');
+            toggleClass(el, this.theme.class('sticky-end'), info?.side === 'end');
+            toggleClass(el, this.theme.class('sticky-start-edge'), info?.side === 'start' && info.isEdge);
+            toggleClass(el, this.theme.class('sticky-end-edge'), info?.side === 'end' && info.isEdge);
+            if (info) {
+                el.style.position = 'sticky';
+                if (info.side === 'start') {
+                    el.style.left = `var(--ngn-sticky-start-offset-${info.index})`;
+                    el.style.removeProperty('right');
+                }
+                else {
+                    el.style.right = `var(--ngn-sticky-end-offset-${info.index})`;
+                    el.style.removeProperty('left');
+                }
+            }
+            else {
+                el.style.removeProperty('position');
+                el.style.removeProperty('left');
+                el.style.removeProperty('right');
+            }
+        });
     }
     prepareDom() {
         toggleClass(this.element.nativeElement, this.theme.class('cell'), true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableTd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: NgnTableTd, isStandalone: true, selector: "[ngnTableTd]", host: { properties: { "style.--ngn-table-column-index": "_visualColumnIndex()" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableTd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: NgnTableTd, isStandalone: true, selector: "[ngnTableTd]", host: { properties: { "style.--ngn-table-column-index": "_visualColumnIndex()" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableTd, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableTd, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableTd]',
@@ -884,6 +988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
 class NgnTableTh extends NgnBase {
     theme = this.injectThemeTemplate(tableControlTemplate);
     _table;
+    _tableSignal = signal(null, ...(ngDevMode ? [{ debugName: "_tableSignal" }] : /* istanbul ignore next */ []));
     _resizeHandle;
     ngnTableTh = input.required(...(ngDevMode ? [{ debugName: "ngnTableTh" }] : /* istanbul ignore next */ []));
     /**
@@ -969,6 +1074,34 @@ class NgnTableTh extends NgnBase {
                 this._resizeHandle.style.display = show ? '' : 'none';
             }
         });
+        // Sticky column classes and offsets
+        afterRenderEffect(() => {
+            const table = this._tableSignal();
+            if (!table)
+                return;
+            const info = table.getStickyInfo(this.ngnTableTh());
+            const el = this.element.nativeElement;
+            toggleClass(el, this.theme.class('sticky-start'), info?.side === 'start');
+            toggleClass(el, this.theme.class('sticky-end'), info?.side === 'end');
+            toggleClass(el, this.theme.class('sticky-start-edge'), info?.side === 'start' && info.isEdge);
+            toggleClass(el, this.theme.class('sticky-end-edge'), info?.side === 'end' && info.isEdge);
+            if (info) {
+                el.style.position = 'sticky';
+                if (info.side === 'start') {
+                    el.style.left = `var(--ngn-sticky-start-offset-${info.index})`;
+                    el.style.removeProperty('right');
+                }
+                else {
+                    el.style.right = `var(--ngn-sticky-end-offset-${info.index})`;
+                    el.style.removeProperty('left');
+                }
+            }
+            else {
+                el.style.removeProperty('position');
+                el.style.removeProperty('left');
+                el.style.removeProperty('right');
+            }
+        });
     }
     ngOnInit() {
         const table = getNearestNgnInstance(this.element.nativeElement, (NgnTable));
@@ -976,6 +1109,7 @@ class NgnTableTh extends NgnBase {
             throw new NgnError('ngnTableTh', 'ngnTableTh must be used within an NgnTable component');
         }
         this._table = table;
+        this._tableSignal.set(table);
         this._table.registerHeaderCell(this);
     }
     ngOnDestroy() {
@@ -1034,10 +1168,10 @@ class NgnTableTh extends NgnBase {
         const cells = this._table.getRegisteredHeaderCells();
         return cells.indexOf(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableTh, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: NgnTableTh, isStandalone: true, selector: "[ngnTableTh]", inputs: { ngnTableTh: { classPropertyName: "ngnTableTh", publicName: "ngnTableTh", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "style.--ngn-table-column-index": "_visualColumnIndex()" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableTh, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: NgnTableTh, isStandalone: true, selector: "[ngnTableTh]", inputs: { ngnTableTh: { classPropertyName: "ngnTableTh", publicName: "ngnTableTh", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "style.--ngn-table-column-index": "_visualColumnIndex()" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableTh, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableTh, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableTh]',
@@ -1057,10 +1191,10 @@ class NgnTableHeadTr extends NgnBase {
     prepareDom() {
         toggleClass(this._element.nativeElement, this.theme.class('row'), true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableHeadTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: NgnTableHeadTr, isStandalone: true, selector: "[ngnTableHeadTr]", host: { properties: { "attr.aria-rowindex": "1" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableHeadTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: NgnTableHeadTr, isStandalone: true, selector: "[ngnTableHeadTr]", host: { properties: { "attr.aria-rowindex": "1" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableHeadTr, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableHeadTr, decorators: [{
             type: Directive,
             args: [{ selector: '[ngnTableHeadTr]', host: { '[attr.aria-rowindex]': '1' } }]
         }], ctorParameters: () => [] });
@@ -1102,10 +1236,6 @@ class NgnTableReorderableColumn {
         const target = event.target;
         if (target.classList.contains(this.theme.class('resize-handle')))
             return;
-        // Don't allow reordering of sticky columns
-        const stickyMap = table.getStickyColumnIds();
-        if (stickyMap.has(this._columnId()))
-            return;
         event.preventDefault();
         this._startX = event.clientX;
         this._startY = event.clientY;
@@ -1190,10 +1320,10 @@ class NgnTableReorderableColumn {
             this._boundOnKeyDown = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableReorderableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: NgnTableReorderableColumn, isStandalone: true, selector: "[ngnTableReorderableColumn]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableReorderableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: NgnTableReorderableColumn, isStandalone: true, selector: "[ngnTableReorderableColumn]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableReorderableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableReorderableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableReorderableColumn]',
@@ -1238,10 +1368,10 @@ class NgnTableBodyTr extends NgnScrollerItem {
             return;
         table.handleRowClick(this.ngnTableBodyTr(), event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableBodyTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: NgnTableBodyTr, isStandalone: true, selector: "[ngnTableBodyTr]", inputs: { ngnTableBodyTr: { classPropertyName: "ngnTableBodyTr", publicName: "ngnTableBodyTr", isSignal: true, isRequired: true, transformFunction: null }, ngnScrollerItem: { classPropertyName: "ngnScrollerItem", publicName: "ngnScrollerItem", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "row" }, listeners: { "click": "onRowClick($event)" }, properties: { "attr.aria-rowindex": "ngnTableBodyTr().index + 2", "style.--ngn-table-row-index": "ngnTableBodyTr().index + 2", "class": "theme.classes({\n      'even': ngnTableBodyTr().index % 2 === 0,\n      'selected-row': selected(),\n      'focused-row': focused()\n    })", "attr.aria-selected": "selectable() ? selected() : null" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableBodyTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: NgnTableBodyTr, isStandalone: true, selector: "[ngnTableBodyTr]", inputs: { ngnTableBodyTr: { classPropertyName: "ngnTableBodyTr", publicName: "ngnTableBodyTr", isSignal: true, isRequired: true, transformFunction: null }, ngnScrollerItem: { classPropertyName: "ngnScrollerItem", publicName: "ngnScrollerItem", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "row" }, listeners: { "click": "onRowClick($event)" }, properties: { "attr.aria-rowindex": "ngnTableBodyTr().index + 2", "style.--ngn-table-row-index": "ngnTableBodyTr().index + 2", "class": "theme.classes({\n      'even': ngnTableBodyTr().index % 2 === 0,\n      'selected-row': selected(),\n      'focused-row': focused()\n    })", "attr.aria-selected": "selectable() ? selected() : null" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableBodyTr, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableBodyTr, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableBodyTr]',
@@ -1352,7 +1482,7 @@ class NgnTableSelectionColumn {
         const cbEl = this._checkboxRef.location.nativeElement;
         cbEl.classList.add(this.theme.class('selection-checkbox'));
         if (this._isHeader) {
-            this._checkboxRef.setInput('allowIndeterminate', true);
+            setComponentInput(this._checkboxRef, 'allowIndeterminate', true);
         }
         this._element.nativeElement.appendChild(cbEl);
     }
@@ -1396,10 +1526,10 @@ class NgnTableSelectionColumn {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableSelectionColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: NgnTableSelectionColumn, isStandalone: true, selector: "[ngnTableSelectionColumn]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableSelectionColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: NgnTableSelectionColumn, isStandalone: true, selector: "[ngnTableSelectionColumn]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableSelectionColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableSelectionColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableSelectionColumn]',
@@ -1409,223 +1539,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const tableTracker = new WeakMap();
-function attachTableTracking(scrollContainer, tableHostEl, directive, theme) {
-    const existing = tableTracker.get(scrollContainer);
-    if (existing) {
-        existing.directives.add(directive);
-        return;
-    }
-    const updateScrollClasses = () => {
-        const el = scrollContainer;
-        const scrolledLeft = el.scrollLeft > 1;
-        const scrolledRight = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
-        toggleClass(tableHostEl, theme.class('sticky-scrolled-left'), scrolledLeft);
-        toggleClass(tableHostEl, theme.class('sticky-scrolled-right'), scrolledRight);
-    };
-    const stickyColumnClass = theme.class('sticky-column');
-    const selectionColumnClass = theme.class('selection-column');
-    const recalcAllOffsets = () => {
-        const state = tableTracker.get(scrollContainer);
-        if (!state)
-            return;
-        // Make all checkbox/selection columns sticky (they're created dynamically,
-        // not via template, so the directive can't be placed on them).
-        const selectionCols = Array.from(scrollContainer.querySelectorAll(`.${selectionColumnClass}`));
-        for (const col of selectionCols) {
-            if (!col.classList.contains(stickyColumnClass)) {
-                toggleClass(col, stickyColumnClass, true);
-                toggleClass(col, theme.class('sticky-left'), true);
-            }
-            col.style.left = '0px';
-        }
-        for (const dir of state.directives) {
-            dir._recalcOffset();
-        }
-        updateScrollClasses();
-    };
-    scrollContainer.addEventListener('scroll', updateScrollClasses, { passive: true });
-    const directives = new Set();
-    directives.add(directive);
-    // Coalesce rapid ResizeObserver callbacks (e.g. from selection class toggles)
-    // into a single recalculation per animation frame.
-    const state = {
-        scrollListener: updateScrollClasses,
-        resizeObserver: null,
-        recalcRafId: 0,
-        directives,
-        tableHostEl,
-    };
-    const debouncedRecalc = () => {
-        if (state.recalcRafId)
-            return;
-        state.recalcRafId = requestAnimationFrame(() => {
-            state.recalcRafId = 0;
-            recalcAllOffsets();
-        });
-    };
-    state.resizeObserver = new ResizeObserver(() => debouncedRecalc());
-    state.resizeObserver.observe(scrollContainer);
-    // Also observe <thead> — its subgrid cells change size when grid-template-columns updates,
-    // but the table container's border-box may not change (overflow: auto).
-    const thead = scrollContainer.querySelector('thead');
-    if (thead) {
-        state.resizeObserver.observe(thead);
-    }
-    // Initial update
-    requestAnimationFrame(() => {
-        recalcAllOffsets();
-        updateScrollClasses();
-    });
-    tableTracker.set(scrollContainer, state);
-}
-function detachTableTracking(scrollContainer, directive) {
-    const state = tableTracker.get(scrollContainer);
-    if (!state)
-        return;
-    state.directives.delete(directive);
-    if (state.directives.size === 0) {
-        scrollContainer.removeEventListener('scroll', state.scrollListener);
-        state.resizeObserver.disconnect();
-        if (state.recalcRafId)
-            cancelAnimationFrame(state.recalcRafId);
-        toggleClass(state.tableHostEl, state.tableHostEl.className.split(' ').find(c => c.includes('sticky-scrolled-left')) ?? '', false);
-        toggleClass(state.tableHostEl, state.tableHostEl.className.split(' ').find(c => c.includes('sticky-scrolled-right')) ?? '', false);
-        tableTracker.delete(scrollContainer);
-    }
-}
-// ── Directive ───────────────────────────────────────────────────────────────
-/**
- * @category directive
- */
 class NgnTableStickyColumn {
-    theme = injectThemeTemplate(tableControlTemplate);
     _element = inject(ElementRef);
-    _headerCell = inject(NgnTableTh, { optional: true });
-    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
-    /**
-     * Which side this column sticks to.
-     */
+    _headerCell = inject(NgnTableTh);
+    _columnId = this._headerCell.ngnTableTh;
     ngnTableStickyColumn = input.required(...(ngDevMode ? [{ debugName: "ngnTableStickyColumn" }] : /* istanbul ignore next */ []));
-    _scrollContainer = null;
+    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
     constructor() {
-        const el = this._element.nativeElement;
-        // Apply static sticky classes immediately
-        toggleClass(el, this.theme.class('sticky-column'), true);
         afterNextRender(() => {
-            const side = this.ngnTableStickyColumn();
-            toggleClass(el, this.theme.class('sticky-left'), side === 'left');
-            toggleClass(el, this.theme.class('sticky-right'), side === 'right');
-            // Register with table for reorder awareness
             const table = this._table();
-            const columnId = this._getColumnId();
-            if (table && columnId) {
-                table.registerStickyColumnId(columnId, side);
+            if (table) {
+                table.registerStickyColumn(this._columnId(), this.ngnTableStickyColumn());
             }
-            // Set up shared scroll + resize listener
-            this._scrollContainer = el.closest('table');
-            if (this._scrollContainer && table) {
-                attachTableTracking(this._scrollContainer, table.element.nativeElement, this, this.theme);
-            }
-            // Initial offset + boundary calculation
-            this._recalcOffset();
         });
     }
     ngOnDestroy() {
-        const table = this._table();
-        const columnId = this._getColumnId();
-        if (table && columnId) {
-            table.unregisterStickyColumnId(columnId);
-        }
-        if (this._scrollContainer) {
-            detachTableTracking(this._scrollContainer, this);
-        }
-    }
-    /**
-     * Recalculates sticky offset and boundary classes. Called by the shared
-     * ResizeObserver when the table container changes size.
-     * @internal
-     */
-    _recalcOffset() {
-        const el = this._element.nativeElement;
-        const side = this.ngnTableStickyColumn();
-        this._applyStickyOffset(el, side);
-        this._applyBoundaryClasses(el, side);
-    }
-    _getColumnId() {
-        return this._headerCell?.ngnTableTh() ?? null;
-    }
-    /**
-     * Computes and applies the sticky offset by measuring sibling sticky elements.
-     * For left: offset = sum of widths of all preceding sticky-left cells + selection column.
-     * For right: offset = sum of widths of all following sticky-right cells.
-     */
-    _applyStickyOffset(el, side) {
-        const stickyLeftClass = this.theme.class('sticky-left');
-        const stickyRightClass = this.theme.class('sticky-right');
-        const selectionColumnClass = this.theme.class('selection-column');
-        // Find the row-level container.
-        // For headers: all sticky cells in <thead>
-        // For body: all sticky cells in the same <tr>
-        const container = el.tagName === 'TH' ? el.closest('thead') : el.parentElement;
-        if (!container)
-            return;
-        if (side === 'left') {
-            let offset = 0;
-            // Sum widths of all preceding sticky-left siblings (includes selection column
-            // which was given sticky-left by the shared tracker)
-            const stickyCells = Array.from(container.querySelectorAll(`.${stickyLeftClass}`));
-            for (const cell of stickyCells) {
-                if (cell === el)
-                    break;
-                offset += cell.getBoundingClientRect().width;
-            }
-            el.style.left = `${offset}px`;
-            el.style.right = '';
-        }
-        else {
-            let offset = 0;
-            // Sum widths of all following sticky-right siblings
-            const stickyCells = Array.from(container.querySelectorAll(`.${stickyRightClass}`));
-            let found = false;
-            for (let i = stickyCells.length - 1; i >= 0; i--) {
-                if (stickyCells[i] === el) {
-                    found = true;
-                    break;
-                }
-                if (!found) {
-                    offset += stickyCells[i].getBoundingClientRect().width;
-                }
-            }
-            el.style.right = `${offset}px`;
-            el.style.left = '';
-        }
-    }
-    /**
-     * Marks boundary cells: last sticky-left gets `sticky-left-last`,
-     * first sticky-right gets `sticky-right-first`.
-     */
-    _applyBoundaryClasses(el, side) {
-        const stickyLeftClass = this.theme.class('sticky-left');
-        const stickyRightClass = this.theme.class('sticky-right');
-        const container = el.tagName === 'TH' ? el.closest('thead') : el.parentElement;
-        if (!container)
-            return;
-        if (side === 'left') {
-            const stickyCells = Array.from(container.querySelectorAll(`.${stickyLeftClass}`));
-            const isLast = stickyCells[stickyCells.length - 1] === el;
-            toggleClass(el, this.theme.class('sticky-left-last'), isLast);
-        }
-        else {
-            const stickyCells = Array.from(container.querySelectorAll(`.${stickyRightClass}`));
-            const isFirst = stickyCells[0] === el;
-            toggleClass(el, this.theme.class('sticky-right-first'), isFirst);
-        }
+        this._table()?.unregisterStickyColumn(this._columnId());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableStickyColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: NgnTableStickyColumn, isStandalone: true, selector: "[ngnTableStickyColumn]", inputs: { ngnTableStickyColumn: { classPropertyName: "ngnTableStickyColumn", publicName: "ngnTableStickyColumn", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableStickyColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: NgnTableStickyColumn, isStandalone: true, selector: "[ngnTableStickyColumn]", inputs: { ngnTableStickyColumn: { classPropertyName: "ngnTableStickyColumn", publicName: "ngnTableStickyColumn", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableStickyColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableStickyColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableStickyColumn]',
@@ -1633,8 +1567,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
         }], ctorParameters: () => [], propDecorators: { ngnTableStickyColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableStickyColumn", required: true }] }] } });
 
 class NgnTableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: NgnTableModule, imports: [NgnTable,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: NgnTableModule, imports: [NgnTable,
             NgnTableBodyTr,
             NgnTableTd,
             NgnTableTh,
@@ -1651,9 +1585,9 @@ class NgnTableModule {
             NgnTableReorderableColumn,
             NgnTableSelectionColumn,
             NgnTableStickyColumn] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableModule, imports: [NgnTable] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableModule, imports: [NgnTable] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1716,7 +1650,7 @@ class NgnTableFilterableColumn {
             label: 'Filter',
             value: null,
             kind: 'icon',
-            defaultIcon: this.filter() ? 'filter_solid' : 'filter',
+            defaultIcon: this.filter() ? 'filter-active' : 'filter-inactive',
             action: event => {
                 event.stopPropagation();
                 this._ngnFilter.instance.show();
@@ -1744,10 +1678,10 @@ class NgnTableFilterableColumn {
         this._ngnActionButton.destroy();
         this._ngnFilter.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableFilterableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: NgnTableFilterableColumn, isStandalone: true, selector: "[ngnTableFilterableColumn]", inputs: { ngnTableFilterableColumn: { classPropertyName: "ngnTableFilterableColumn", publicName: "ngnTableFilterableColumn", isSignal: true, isRequired: false, transformFunction: null }, ngnTableFilterableColumnType: { classPropertyName: "ngnTableFilterableColumnType", publicName: "ngnTableFilterableColumnType", isSignal: true, isRequired: true, transformFunction: null }, ngnTableFilterableColumnItems: { classPropertyName: "ngnTableFilterableColumnItems", publicName: "ngnTableFilterableColumnItems", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme.classes({'filterable-column': true, 'filtered-column': !!filter() })" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableFilterableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: NgnTableFilterableColumn, isStandalone: true, selector: "[ngnTableFilterableColumn]", inputs: { ngnTableFilterableColumn: { classPropertyName: "ngnTableFilterableColumn", publicName: "ngnTableFilterableColumn", isSignal: true, isRequired: false, transformFunction: null }, ngnTableFilterableColumnType: { classPropertyName: "ngnTableFilterableColumnType", publicName: "ngnTableFilterableColumnType", isSignal: true, isRequired: true, transformFunction: null }, ngnTableFilterableColumnItems: { classPropertyName: "ngnTableFilterableColumnItems", publicName: "ngnTableFilterableColumnItems", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme.classes({'filterable-column': true, 'filtered-column': !!filter() })" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableFilterableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableFilterableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableFilterableColumn]',
@@ -1780,7 +1714,7 @@ class NgnTableSortableColumn {
         this._ngnIcon.location.nativeElement.classList.add(this.theme.class('sort-control'));
         effect(() => {
             const sort = this.sort();
-            setComponentInput(this._ngnIcon, 'defaultIcon', sort === 'asc' ? 'sort_down' : sort === 'desc' ? 'sort_up' : 'sort');
+            setComponentInput(this._ngnIcon, 'defaultIcon', sort === 'asc' ? 'sort-ascending' : sort === 'desc' ? 'sort-descending' : 'sort-neutral');
         });
     }
     ngOnDestroy() {
@@ -1801,10 +1735,10 @@ class NgnTableSortableColumn {
                 ? { column: this.columnId(), direction: 'desc' }
                 : null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableSortableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: NgnTableSortableColumn, isStandalone: true, selector: "[ngnTableSortableColumn]", inputs: { ngnTableSortableColumn: { classPropertyName: "ngnTableSortableColumn", publicName: "ngnTableSortableColumn", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "theme.classes({'sortable-column': true, 'sorted-column': !!sort() })" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableSortableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: NgnTableSortableColumn, isStandalone: true, selector: "[ngnTableSortableColumn]", inputs: { ngnTableSortableColumn: { classPropertyName: "ngnTableSortableColumn", publicName: "ngnTableSortableColumn", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "theme.classes({'sortable-column': true, 'sorted-column': !!sort() })" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableSortableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTableSortableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableSortableColumn]',