@ngneers/controls 0.0.1-pre4 → 0.0.1-pre6

package/fesm2022/ngneers-controls-table.mjs

@@ -1,56 +1,213 @@
 import * as i0 from '@angular/core';
-import { contentChild, ChangeDetectionStrategy, Component, signal, input, model, computed, Directive, inject, Renderer2, ElementRef, afterNextRender, effect, NgModule, ViewContainerRef } 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 { NgTemplateOutlet } from '@angular/common';
 import { executeMultiFilter } from '@ngneers/controls/api';
-import { templateTypesFn, NgnTemplate, injectThemeTemplate, setComponentInput } from '@ngneers/controls/api/ng';
+import { injectThemeTemplate, templateTypesFn, elementSizeSignal, NgnTemplate, setComponentInput } from '@ngneers/controls/api/ng';
+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 { NgnScroller, NgnScrollerItem } from '@ngneers/controls/scroller';
+import { NgnScrollerItem, NgnScroller } from '@ngneers/controls/scroller';
 import { tableControlTemplate } from '@ngneers/controls-themes/templates/table';
 import { toggleClass, NgnError } from '@ngneers/controls/utils';
 import { setInputSignalValue } from '@ngneers/controls/utils-ng';
+import { NgnCheckbox } from '@ngneers/controls/checkbox';
 import { NgnActionButton } from '@ngneers/controls/button';
 import { NgnFilter } from '@ngneers/controls/filter';
-import { NgnIcon } from '@ngneers/controls/icon';
+
+class NgnTableGroupHeaderTr extends NgnScrollerItem {
+    ngnTableGroupHeaderTr = input.required(...(ngDevMode ? [{ debugName: "ngnTableGroupHeaderTr" }] : /* istanbul ignore next */ []));
+    ngnScrollerItem = input({}, ...(ngDevMode ? [{ debugName: "ngnScrollerItem" }] : /* istanbul ignore next */ []));
+    _element = inject((ElementRef));
+    theme = injectThemeTemplate(tableControlTemplate);
+    constructor() {
+        super();
+        effect(() => {
+            const row = this.ngnTableGroupHeaderTr();
+            setInputSignalValue(this.ngnScrollerItem, row);
+        });
+        this.prepareDom();
+    }
+    prepareDom() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableGroupHeaderTr, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableGroupHeaderTr]',
+                    host: {
+                        '[attr.aria-rowindex]': 'ngnTableGroupHeaderTr().index + 2',
+                        '[style.--ngn-table-row-index]': 'ngnTableGroupHeaderTr().index + 2',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngnTableGroupHeaderTr: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableGroupHeaderTr", required: true }] }], ngnScrollerItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnScrollerItem", required: false }] }] } });
 
 class NgnTableTemplates extends NgnBase {
-    _headerTemplate = contentChild('header', ...(ngDevMode ? [{ debugName: "_headerTemplate" }] : []));
-    _bodyTemplate = contentChild('body', ...(ngDevMode ? [{ debugName: "_bodyTemplate" }] : []));
+    _headerTemplate = contentChild('header', ...(ngDevMode ? [{ debugName: "_headerTemplate" }] : /* istanbul ignore next */ []));
+    _bodyTemplate = contentChild('body', ...(ngDevMode ? [{ debugName: "_bodyTemplate" }] : /* istanbul ignore next */ []));
+    _groupHeaderTemplate = contentChild('groupHeader', ...(ngDevMode ? [{ debugName: "_groupHeaderTemplate" }] : /* istanbul ignore next */ []));
     headerTemplate = this._headerTemplate;
     bodyTemplate = this._bodyTemplate;
+    groupHeaderTemplate = this._groupHeaderTemplate;
     /**
-     * Types for the calendar templates.
+     * Types for the table templates.
      */
     templateTypes = templateTypesFn();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableTemplates, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", 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 }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableTemplates, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableTemplates, decorators: [{
             type: Component,
             args: [{
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { _headerTemplate: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], _bodyTemplate: [{ type: i0.ContentChild, args: ['body', { isSignal: true }] }] } });
+        }], propDecorators: { _headerTemplate: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], _bodyTemplate: [{ type: i0.ContentChild, args: ['body', { isSignal: true }] }], _groupHeaderTemplate: [{ type: i0.ContentChild, args: ['groupHeader', { isSignal: true }] }] } });
 
+/**
+ * Default minimum column width in pixels for table columns.
+ * Enforced as an absolute floor even when a relative min-size (e.g. `5%`) resolves smaller.
+ */
+const TABLE_MIN_COLUMN_WIDTH_PX = 50;
+/** Splits a CSS grid-template-columns string into individual track values, handling minmax(). */
+const GRID_TRACK_RE = /(?:minmax\([^)]+\)|[^\s]+)/g;
+/**
+ * @category control
+ */
 class NgnTable extends NgnTableTemplates {
     theme = this.injectThemeTemplate(tableControlTemplate, {
         root: true,
         virtual: () => this.virtual(),
+        resizing: () => this._resizeEngine?.isDragging() ?? false,
+        selectable: () => !!this.selectionMode(),
+        reorderable: () => this.reorderable(),
+        reordering: () => this._isReordering(),
     });
-    _registeredHeaderCells = signal([], ...(ngDevMode ? [{ debugName: "_registeredHeaderCells" }] : []));
-    rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
-    rowHeight = input(...(ngDevMode ? [undefined, { debugName: "rowHeight" }] : []));
-    fieldId = input.required(...(ngDevMode ? [{ debugName: "fieldId" }] : []));
-    virtual = input(false, ...(ngDevMode ? [{ debugName: "virtual" }] : []));
-    virtualPadding = input(2, ...(ngDevMode ? [{ debugName: "virtualPadding" }] : []));
-    striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : []));
-    paginator = input(false, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
+    _registeredHeaderCells = signal([], ...(ngDevMode ? [{ debugName: "_registeredHeaderCells" }] : /* 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 */ []));
+    fieldId = input.required(...(ngDevMode ? [{ debugName: "fieldId" }] : /* istanbul ignore next */ []));
+    virtual = input(false, ...(ngDevMode ? [{ debugName: "virtual" }] : /* istanbul ignore next */ []));
+    virtualPadding = input(2, ...(ngDevMode ? [{ debugName: "virtualPadding" }] : /* istanbul ignore next */ []));
+    striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
+    paginator = input(false, ...(ngDevMode ? [{ debugName: "paginator" }] : /* istanbul ignore next */ []));
+    /**
+     * The selection mode for the table.
+     * - `'single'`: Only one row can be selected at a time.
+     * - `'multi'`: Multiple rows can be selected (with Ctrl/Shift click or checkboxes).
+     * - `null`: Selection is disabled.
+     * @default null
+     */
+    selectionMode = input(null, ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /**
+     * The selected row IDs. Two-way bindable via `[(selection)]`.
+     * @default []
+     */
+    selection = model([], ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a selection column directive is present in the template.
+     * Set automatically by `NgnTableSelectionColumn` — do not set manually.
+     */
+    _hasSelectionColumn = signal(false, ...(ngDevMode ? [{ debugName: "_hasSelectionColumn" }] : /* istanbul ignore next */ []));
+    /**
+     * Column key to group rows by. Rows with the same value in this column
+     * are collected under a collapsible group header.
+     * @default null (no grouping)
+     */
+    groupBy = input(null, ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way model tracking which groups are currently expanded, identified
+     * by their column value. Defaults to `[]` (all collapsed).
+     * Pass all group values to start with all groups expanded.
+     *
+     * Type-safe: when `groupBy` is set, this is typed as `T[G][]` where G
+     * is the groupBy column key (inferred by Angular's template type checker).
+     */
+    expandedGroups = model([], ...(ngDevMode ? [{ debugName: "expandedGroups" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether column resizing is enabled.
+     * @default false
+     */
+    resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The resize distribution mode.
+     * - `'adjacent'`: Only columns adjacent to the resize handle change. Total width stays the same.
+     * - `'push'`: Column grows/shrinks independently, total width changes (enables horizontal scrolling).
+     * @default 'adjacent'
+     */
+    resizeMode = input('adjacent', ...(ngDevMode ? [{ debugName: "resizeMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to lock affected columns to fixed `px` values after a resize completes.
+     *
+     * - **`proportional` mode**: when `true`, the resized column stays as `px` (locked);
+     *   when `false`, it is converted back to `fr` and continues to flex with the container.
+     * - **`adjacent` / `push` modes**: when `true`, columns whose size changed are converted
+     *   to `px`; when `false`, columns keep their original units.
+     *
+     * @default false
+     */
+    lockSizes = input(false, ...(ngDevMode ? [{ debugName: "lockSizes" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether column reordering is enabled.
+     * @default false
+     */
+    reorderable = input(false, { ...(ngDevMode ? { debugName: "reorderable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The current column order as an array of column identifiers.
+     * When empty, the natural registration order (DOM order) is used.
+     * Supports two-way binding for persistence.
+     */
+    columnOrder = model([], ...(ngDevMode ? [{ debugName: "columnOrder" }] : /* istanbul ignore next */ []));
     trackById = (item) => item[this.fieldId()];
-    sort = model(null, ...(ngDevMode ? [{ debugName: "sort" }] : []));
-    filters = model(null, ...(ngDevMode ? [{ debugName: "filters" }] : []));
-    pageState = signal(null, ...(ngDevMode ? [{ debugName: "pageState" }] : []));
+    sort = model(null, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    filters = model(null, ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    pageState = signal(null, ...(ngDevMode ? [{ debugName: "pageState" }] : /* istanbul ignore next */ []));
+    // --- Selection state ---
+    showCheckboxes = this._hasSelectionColumn.asReadonly();
+    /**
+     * Set of selected row IDs for O(1) lookup.
+     * Uses a content-aware equality check to avoid invalidating dependents
+     * (50+ per-row computeds) when the selection hasn't actually changed.
+     */
+    selectionSet = computed(() => new Set(this.selection()), { ...(ngDevMode ? { debugName: "selectionSet" } : /* istanbul ignore next */ {}), equal: (a, b) => a.size === b.size && [...a].every(v => b.has(v)) });
+    /**
+     * Anchor index for Shift+click range selection (index in formattedRows).
+     */
+    _selectionAnchor = signal(null, ...(ngDevMode ? [{ debugName: "_selectionAnchor" }] : /* istanbul ignore next */ []));
+    /**
+     * Currently focused row index for keyboard navigation (index in formattedRows).
+     */
+    focusedRowIndex = signal(null, ...(ngDevMode ? [{ debugName: "focusedRowIndex" }] : /* istanbul ignore next */ []));
+    isAllSelected = computed(() => {
+        const rows = this.formattedRows();
+        const selSet = this.selectionSet();
+        return rows.length > 0 && rows.every(row => selSet.has(row.id));
+    }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : /* istanbul ignore next */ []));
+    isIndeterminate = computed(() => {
+        const selSet = this.selectionSet();
+        return selSet.size > 0 && !this.isAllSelected();
+    }, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
+    headerCheckboxValue = computed(() => {
+        if (this.isAllSelected())
+            return true;
+        if (this.isIndeterminate())
+            return null;
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "headerCheckboxValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Total column count including the selection checkbox column.
+     */
+    totalColumnCount = computed(() => this.columnCount() + (this.showCheckboxes() ? 1 : 0), ...(ngDevMode ? [{ debugName: "totalColumnCount" }] : /* istanbul ignore next */ []));
     formattedRows = computed(() => {
+        const groupBy = this.groupBy();
+        if (groupBy) {
+            return this._groupedRows();
+        }
         const rows = this._sortedRows();
         return rows.map((data, index) => ({
             kind: 'data',
@@ -58,7 +215,51 @@ class NgnTable extends NgnTableTemplates {
             data,
             index,
         }));
-    }, ...(ngDevMode ? [{ debugName: "formattedRows" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "formattedRows" }] : /* istanbul ignore next */ []));
+    _groupedRows = computed(() => {
+        const groupBy = this.groupBy();
+        if (!groupBy)
+            return [];
+        const rows = this._sortedRows();
+        const expandedSet = new Set(this.expandedGroups());
+        const fieldId = this.fieldId();
+        const groupMap = new Map();
+        for (const row of rows) {
+            const key = row[groupBy];
+            let group = groupMap.get(key);
+            if (!group) {
+                group = [];
+                groupMap.set(key, group);
+            }
+            group.push(row);
+        }
+        // Build flat list with group headers interleaved
+        const result = [];
+        let index = 0;
+        for (const [groupKey, groupRows] of groupMap) {
+            const expanded = expandedSet.has(groupKey);
+            result.push({
+                kind: 'group-header',
+                id: `group-${String(groupKey)}`,
+                groupKey,
+                groupValue: groupKey,
+                count: groupRows.length,
+                expanded,
+                index: index++,
+            });
+            if (expanded) {
+                for (const data of groupRows) {
+                    result.push({
+                        kind: 'data',
+                        id: data[fieldId],
+                        data,
+                        index: index++,
+                    });
+                }
+            }
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "_groupedRows" }] : /* istanbul ignore next */ []));
     pagedRows = computed(() => {
         const paginator = this.paginator();
         if (!paginator) {
@@ -69,7 +270,7 @@ class NgnTable extends NgnTableTemplates {
             return [];
         }
         return this.formattedRows().slice(pageState.slice.skip, pageState.slice.take + pageState.slice.skip);
-    }, ...(ngDevMode ? [{ debugName: "pagedRows" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "pagedRows" }] : /* istanbul ignore next */ []));
     _filteredRows = computed(() => {
         const filters = this.filters();
         const rows = this.rows();
@@ -77,7 +278,7 @@ class NgnTable extends NgnTableTemplates {
             return rows;
         }
         return executeMultiFilter(rows, filters);
-    }, ...(ngDevMode ? [{ debugName: "_filteredRows" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_filteredRows" }] : /* istanbul ignore next */ []));
     _sortedRows = computed(() => {
         const rows = this._filteredRows();
         const sort = this.sort();
@@ -106,69 +307,667 @@ class NgnTable extends NgnTableTemplates {
                     ? String(aValue).localeCompare(String(bValue))
                     : String(bValue).localeCompare(String(aValue));
         });
-    }, ...(ngDevMode ? [{ debugName: "_sortedRows" }] : []));
-    columnCount = computed(() => this._registeredHeaderCells().length, ...(ngDevMode ? [{ debugName: "columnCount" }] : []));
+    }, ...(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 */ []));
+    _dropIndicatorState = signal(null, ...(ngDevMode ? [{ debugName: "_dropIndicatorState" }] : /* istanbul ignore next */ []));
+    _reorderTargetIndex = -1;
+    /**
+     * Effective column order: merges user-provided `columnOrder` with registered header cells.
+     * If `columnOrder` is empty, falls back to registration order.
+     * Unknown keys are filtered; new columns not in the order are appended.
+     */
+    _effectiveColumnOrder = computed(() => {
+        const cells = this._registeredHeaderCells();
+        const cellIds = cells.map(c => c.ngnTableTh());
+        const userOrder = this.columnOrder();
+        if (!userOrder.length) {
+            return cellIds;
+        }
+        // Filter to valid keys and append any new columns not in the order
+        const validOrder = userOrder.filter(id => cellIds.includes(id));
+        const missing = cellIds.filter(id => !validOrder.includes(id));
+        return [...validOrder, ...missing];
+    }, ...(ngDevMode ? [{ debugName: "_effectiveColumnOrder" }] : /* istanbul ignore next */ []));
+    /**
+     * Maps column ID → 1-based visual position.
+     */
+    columnOrderMap = computed(() => {
+        const order = this._effectiveColumnOrder();
+        const map = new Map();
+        for (let i = 0; i < order.length; i++) {
+            map.set(order[i], i + 1);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "columnOrderMap" }] : /* istanbul ignore next */ []));
+    /**
+     * Returns the 1-based visual column index for a given 0-based logical (DOM) index.
+     */
+    getVisualColumnIndex(logicalIndex) {
+        const cells = this._registeredHeaderCells();
+        const cell = cells[logicalIndex];
+        if (!cell)
+            return logicalIndex + 1;
+        return this.columnOrderMap().get(cell.ngnTableTh()) ?? logicalIndex + 1;
+    }
+    // --- Resize engine ---
+    _tableElementSize = elementSizeSignal(this.element);
+    _resizeEngine;
+    /**
+     * Grid template columns computed from the resize engine when resizable,
+     * otherwise falls back to the standard equal-width repeat.
+     */
+    gridTemplateColumns;
+    constructor() {
+        super();
+        // Create engine eagerly in constructor (outside reactive context) to avoid NG0602
+        this._resizeEngine = new ResizeEngine({
+            items: computed(() => this._registeredHeaderCells()),
+            containerSize: computed(() => {
+                // Subscribe to the size signal for reactivity, but use clientWidth
+                // to exclude vertical scrollbar width and avoid horizontal overflow.
+                this._tableElementSize();
+                const tableEl = this.element.nativeElement.querySelector('table');
+                const total = tableEl?.clientWidth ?? 0;
+                if (!this._hasSelectionColumn())
+                    return total;
+                // Subtract the selection column width so the resize engine only distributes
+                // the remaining space among data columns.
+                const selCol = this.element.nativeElement.querySelector(`.${this.theme.class('selection-column')}`);
+                return total - (selCol?.getBoundingClientRect().width ?? 0);
+            }),
+            gapSizes: signal([]),
+            distributionMode: computed(() => this.resizeMode()),
+            containerConstrained: computed(() => this.resizeMode() !== 'push'),
+            lockSizes: computed(() => this.lockSizes()),
+            minItemSizePx: TABLE_MIN_COLUMN_WIDTH_PX,
+            resolveItemSizes: () => this._registeredHeaderCells().map(cell => cell.element.nativeElement.getBoundingClientRect().width),
+        });
+        this.gridTemplateColumns = computed(() => {
+            const checkboxCol = this._hasSelectionColumn() ? 'min-content ' : '';
+            if (this.resizable()) {
+                const rawSizes = this._resizeEngine.gridTemplateSizes();
+                // When reorderable, permute grid track sizes to match visual column order
+                if (this.reorderable()) {
+                    return `${checkboxCol}${this._permuteGridSizes(rawSizes)}`;
+                }
+                return `${checkboxCol}${rawSizes}`;
+            }
+            return `${checkboxCol}repeat(${this.columnCount()}, 1fr)`;
+        }, ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : /* istanbul ignore next */ []));
+    }
     pageChanged(event) {
         this.pageState.set(event);
     }
     column(column) {
         return column;
     }
+    registerSelectionColumn() {
+        this._hasSelectionColumn.set(true);
+    }
+    unregisterSelectionColumn() {
+        this._hasSelectionColumn.set(false);
+    }
     registerHeaderCell(cell) {
         this._registeredHeaderCells.update(cells => [...cells, cell]);
     }
     unregisterHeaderCell(cell) {
         this._registeredHeaderCells.update(cells => cells.filter(c => c !== cell));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTable, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", filters: "filtersChange" }, host: { attributes: { "tabindex": "0" } }, providers: [provideSelf(NgnTable)], usesInheritance: true, ngImport: i0, template: "<table\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"{ table: true, striped: striped() }\"\r\n  [attr.aria-rowcount]=\"rows().length\"\r\n  [style.--ngn-table-column-count]=\"columnCount()\"\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\r\n  <tbody\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'body'\"\r\n    ngn-scroller\r\n    #scroller\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      <ng-container\r\n        [ngTemplateOutlet]=\"bodyTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      ></ng-container>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    getRegisteredHeaderCells() {
+        return this._registeredHeaderCells();
+    }
+    // --- Resize operations (called by NgnTableTh) ---
+    startColumnResize(columnIndex, event) {
+        if (!this.resizable())
+            return;
+        this._resizeEngine.startDrag(columnIndex, event.clientX);
+    }
+    dragColumnResize(columnIndex, event) {
+        if (!this.resizable())
+            return;
+        this._resizeEngine.drag(columnIndex, event.clientX);
+    }
+    endColumnResize(columnIndex, cancel) {
+        if (!this.resizable())
+            return;
+        this._resizeEngine.endDrag(columnIndex, cancel);
+    }
+    // --- Selection operations ---
+    isRowSelected(id) {
+        return this.selectionSet().has(id);
+    }
+    handleRowClick(row, event) {
+        const mode = this.selectionMode();
+        if (!mode)
+            return;
+        const id = row.id;
+        const rowIndex = this.formattedRows().findIndex(r => r.id === row.id);
+        if (mode === 'single') {
+            this.selection.set([id]);
+            this._selectionAnchor.set(rowIndex);
+            this.focusedRowIndex.set(null);
+            return;
+        }
+        // Multi mode
+        if (event.shiftKey && this._selectionAnchor() !== null) {
+            this._selectRange(this._selectionAnchor(), rowIndex);
+        }
+        else if (event.ctrlKey || event.metaKey) {
+            this._toggleRowInSelection(id);
+        }
+        else {
+            this._toggleRowInSelection(id);
+        }
+        this._selectionAnchor.set(rowIndex);
+        this.focusedRowIndex.set(null);
+    }
+    handleCheckboxChange(row) {
+        const id = row.id;
+        this._toggleRowInSelection(id);
+        const rowIndex = this.formattedRows().findIndex(r => r.id === row.id);
+        this._selectionAnchor.set(rowIndex);
+        this.focusedRowIndex.set(null);
+    }
+    toggleSelectAll() {
+        if (this.isAllSelected()) {
+            this.selection.set([]);
+        }
+        else {
+            const dataRows = this.formattedRows().filter((r) => r.kind === 'data');
+            this.selection.set(dataRows.map(r => r.id));
+        }
+    }
+    _toggleRowInSelection(id) {
+        const current = this.selection();
+        if (this.selectionSet().has(id)) {
+            this.selection.set(current.filter(v => v !== id));
+        }
+        else {
+            this.selection.set([...current, id]);
+        }
+    }
+    _selectRange(fromIndex, toIndex) {
+        const rows = this.formattedRows();
+        const start = Math.min(fromIndex, toIndex);
+        const end = Math.max(fromIndex, toIndex);
+        const rangeIds = rows
+            .slice(start, end + 1)
+            .filter((r) => r.kind === 'data')
+            .map(r => r.id);
+        // Merge with existing selection (union)
+        const currentSet = new Set(this.selection());
+        for (const id of rangeIds) {
+            currentSet.add(id);
+        }
+        this.selection.set([...currentSet]);
+    }
+    // --- Keyboard navigation ---
+    onKeyDown(event) {
+        const mode = this.selectionMode();
+        if (!mode)
+            return;
+        const rows = this.formattedRows();
+        if (rows.length === 0)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            event.stopPropagation();
+            // Start from current focus, or current selection in single mode, or -1
+            let currentIndex = this.focusedRowIndex();
+            if (currentIndex === null && mode === 'single') {
+                const sel = this.selection();
+                if (sel.length > 0) {
+                    currentIndex = rows.findIndex(r => r.id === sel[0]);
+                }
+            }
+            currentIndex ??= -1;
+            const nextIndex = event.key === 'ArrowDown'
+                ? Math.min(currentIndex + 1, rows.length - 1)
+                : Math.max(currentIndex - 1, 0);
+            this.focusedRowIndex.set(nextIndex);
+            this._scroller().scrollToIndex(nextIndex);
+            if (mode === 'single') {
+                const id = rows[nextIndex].id;
+                this.selection.set([id]);
+                this._selectionAnchor.set(nextIndex);
+            }
+            else if (event.shiftKey) {
+                // Extend range selection with Shift+Arrow
+                const anchor = this._selectionAnchor() ?? nextIndex;
+                this._selectRange(anchor, nextIndex);
+            }
+        }
+        else if (event.key === ' ' || event.key === 'Enter') {
+            if (mode === 'multi') {
+                const focusIdx = this.focusedRowIndex();
+                if (focusIdx !== null && rows[focusIdx]) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const id = rows[focusIdx].id;
+                    this._toggleRowInSelection(id);
+                    this._selectionAnchor.set(focusIdx);
+                }
+            }
+        }
+    }
+    // --- Row grouping ---
+    /**
+     * Toggle the expanded state of a group identified by its column value.
+     */
+    toggleGroup(groupKey) {
+        const current = this.expandedGroups();
+        if (current.includes(groupKey)) {
+            this.expandedGroups.set(current.filter(k => k !== groupKey));
+        }
+        else {
+            this.expandedGroups.set([...current, groupKey]);
+        }
+    }
+    /**
+     * Toggle a group from a group-header row. Used in the template where
+     * the scroller item type cannot carry the `G` generic.
+     * @internal
+     */
+    toggleGroupFromRow(row) {
+        this.toggleGroup(row.groupKey);
+    }
+    // --- Reorder operations (called by NgnTableReorderableColumn) ---
+    startColumnReorder(columnId) {
+        if (!this.reorderable())
+            return;
+        this._isReordering.set(true);
+        this._reorderSourceColumnId.set(columnId);
+        this._reorderTargetIndex = -1;
+    }
+    dragColumnReorder(event) {
+        if (!this.reorderable() || !this._isReordering())
+            return;
+        const cells = this._registeredHeaderCells();
+        const effectiveOrder = this._effectiveColumnOrder();
+        const sourceId = this._reorderSourceColumnId();
+        if (!sourceId)
+            return;
+        // Find drop target by comparing cursor X to header cell midpoints (in visual order)
+        const cursorX = event.clientX;
+        let targetIndex = effectiveOrder.length;
+        // Build visual-order cells with their bounding boxes
+        const visualCells = effectiveOrder
+            .map(id => cells.find(c => c.ngnTableTh() === id))
+            .filter((c) => !!c);
+        for (let i = 0; i < visualCells.length; i++) {
+            const rect = visualCells[i].element.nativeElement.getBoundingClientRect();
+            const midX = rect.left + rect.width / 2;
+            if (cursorX < midX) {
+                targetIndex = i;
+                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));
+        }
+        this._reorderTargetIndex = targetIndex;
+        // Compute indicator position relative to the table element
+        const tableEl = this.element.nativeElement.querySelector(':scope > table');
+        if (!tableEl)
+            return;
+        const tableRect = tableEl.getBoundingClientRect();
+        // Use the first header cell's height for the indicator
+        const firstCellRect = visualCells[0]?.element.nativeElement.getBoundingClientRect();
+        const indicatorHeight = firstCellRect?.height ?? 40;
+        let indicatorLeftPx;
+        if (targetIndex === 0) {
+            const firstCell = visualCells[0];
+            if (!firstCell)
+                return;
+            const rect = firstCell.element.nativeElement.getBoundingClientRect();
+            indicatorLeftPx = rect.left - tableRect.left;
+        }
+        else if (targetIndex >= visualCells.length) {
+            const lastCell = visualCells[visualCells.length - 1];
+            if (!lastCell)
+                return;
+            const rect = lastCell.element.nativeElement.getBoundingClientRect();
+            indicatorLeftPx = rect.right - tableRect.left;
+        }
+        else {
+            const prevCell = visualCells[targetIndex - 1];
+            const nextCell = visualCells[targetIndex];
+            const prevRect = prevCell.element.nativeElement.getBoundingClientRect();
+            const nextRect = nextCell.element.nativeElement.getBoundingClientRect();
+            indicatorLeftPx = (prevRect.right + nextRect.left) / 2 - tableRect.left;
+        }
+        // Clamp so the 3px-wide indicator stays within the visible content area
+        // (use clientWidth to exclude scrollbar width from the boundary)
+        const maxLeft = tableEl.clientWidth - 3;
+        indicatorLeftPx = Math.max(0, Math.min(indicatorLeftPx, maxLeft));
+        this._dropIndicatorState.set({
+            leftPx: indicatorLeftPx,
+            topPx: tableEl.scrollTop,
+            heightPx: indicatorHeight,
+        });
+    }
+    endColumnReorder(cancel) {
+        if (!this.reorderable())
+            return;
+        if (!cancel && this._reorderTargetIndex >= 0) {
+            const sourceId = this._reorderSourceColumnId();
+            if (sourceId) {
+                const effectiveOrder = [...this._effectiveColumnOrder()];
+                const sourceIndex = effectiveOrder.indexOf(sourceId);
+                if (sourceIndex >= 0) {
+                    // Remove source from its current position
+                    effectiveOrder.splice(sourceIndex, 1);
+                    // Adjust target index if source was before target
+                    let insertAt = this._reorderTargetIndex;
+                    if (sourceIndex < this._reorderTargetIndex) {
+                        insertAt--;
+                    }
+                    // Insert at new position
+                    effectiveOrder.splice(insertAt, 0, sourceId);
+                    this.columnOrder.set(effectiveOrder);
+                }
+            }
+        }
+        this._isReordering.set(false);
+        this._reorderSourceColumnId.set(null);
+        this._dropIndicatorState.set(null);
+        this._reorderTargetIndex = -1;
+    }
+    getReorderSourceColumnId() {
+        return this._reorderSourceColumnId();
+    }
+    /**
+     * Permutes grid template sizes from logical (registration) order to visual (column order) order.
+     */
+    _permuteGridSizes(rawSizes) {
+        const tracks = rawSizes.match(GRID_TRACK_RE) ?? [];
+        const cells = this._registeredHeaderCells();
+        const effectiveOrder = this._effectiveColumnOrder();
+        if (tracks.length !== cells.length) {
+            return rawSizes; // Mismatch — don't permute
+        }
+        // Build map: column ID → track size (logical order)
+        const sizeByColumnId = new Map();
+        for (let i = 0; i < cells.length; i++) {
+            sizeByColumnId.set(cells[i].ngnTableTh(), tracks[i]);
+        }
+        // Emit sizes in visual order
+        return effectiveOrder.map(id => sizeByColumnId.get(id) ?? '1fr').join(' ');
+    }
+    /**
+     * Auto-sizes the column at `columnIndex` to fit its visible content.
+     * Uses `Canvas.measureText()` for fast, reflow-free text measurement since
+     * grid-constrained cells (`min-width: 0`) don't report natural content width
+     * via `scrollWidth`.
+     */
+    autoSizeColumn(columnIndex) {
+        if (!this.resizable())
+            return;
+        const cells = this._registeredHeaderCells();
+        const headerCell = cells[columnIndex];
+        if (!headerCell)
+            return;
+        const tableEl = this.element.nativeElement.querySelector('table');
+        if (!tableEl)
+            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');
+        const headerTextEl = headerEl.querySelector(`.${cellTextClass}`);
+        let headerRequiredWidth = 0;
+        if (headerTextEl) {
+            ctx.font = getCssFont(headerEl);
+            const text = headerTextEl.textContent ?? '';
+            headerRequiredWidth = Math.ceil(ctx.measureText(text).width);
+        }
+        // Add width of visible non-text siblings (filter icon, sort icon, etc.)
+        const headerStyle = getComputedStyle(headerEl);
+        const headerGap = parseFloat(headerStyle.gap) || 0;
+        let visibleSiblingCount = 0;
+        for (let i = 0; i < headerEl.children.length; i++) {
+            const child = headerEl.children[i];
+            if (child === headerTextEl)
+                continue;
+            // Skip spacer (zero intrinsic width) and hidden resize handle
+            if (child.offsetWidth > 0 && getComputedStyle(child).flexGrow === '0') {
+                headerRequiredWidth += child.offsetWidth;
+                visibleSiblingCount++;
+            }
+        }
+        // Add flex gaps between visible items
+        if (visibleSiblingCount > 0) {
+            headerRequiredWidth += headerGap * visibleSiblingCount;
+        }
+        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})`));
+        if (bodyCells.length > 0) {
+            ctx.font = getCssFont(bodyCells[0]);
+            for (let i = 0; i < bodyCells.length; i++) {
+                const text = bodyCells[i].textContent ?? '';
+                maxContentWidth = Math.max(maxContentWidth, Math.ceil(ctx.measureText(text).width));
+            }
+        }
+        // Add cell horizontal padding
+        const paddingLeft = parseFloat(headerStyle.paddingLeft) || 0;
+        const paddingRight = parseFloat(headerStyle.paddingRight) || 0;
+        const totalWidth = maxContentWidth + paddingLeft + paddingRight;
+        // Clamp to min/max constraints
+        const containerSize = this._tableElementSize().width;
+        const minPx = Math.max(TABLE_MIN_COLUMN_WIDTH_PX, getResizeLimitInPx(headerCell.minSize(), containerSize));
+        const maxPx = getResizeLimitInPx(headerCell.maxSize(), containerSize);
+        const clampedWidth = Math.max(minPx, Math.min(maxPx, totalWidth));
+        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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTable, decorators: [{
             type: Component,
-            args: [{ selector: 'ngn-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, NgnScroller, NgnPaginator, NgnTemplate, NgnPt], providers: [provideSelf(NgnTable)], host: {
+            args: [{ selector: 'ngn-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        NgnScroller,
+                        NgnPaginator,
+                        NgnTemplate,
+                        NgnPt,
+                        NgnIcon,
+                        NgnTableGroupHeaderTr,
+                    ], providers: [provideSelf(NgnTable)], host: {
                         tabindex: '0',
-                    }, template: "<table\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"{ table: true, striped: striped() }\"\r\n  [attr.aria-rowcount]=\"rows().length\"\r\n  [style.--ngn-table-column-count]=\"columnCount()\"\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\r\n  <tbody\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'body'\"\r\n    ngn-scroller\r\n    #scroller\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      <ng-container\r\n        [ngTemplateOutlet]=\"bodyTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      ></ng-container>\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" }]
-        }], propDecorators: { 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 }] }], 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"] }] } });
+                        '[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" }]
+        }], 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). */
+let _autoSizeCtx = null;
+function autoSizeCanvasCtx() {
+    if (!_autoSizeCtx) {
+        _autoSizeCtx = document.createElement('canvas').getContext('2d');
+    }
+    return _autoSizeCtx;
+}
+/** Builds the CSS font shorthand from an element's computed style. */
+function getCssFont(el) {
+    const s = getComputedStyle(el);
+    return `${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`;
+}
 
 class NgnTableTd extends NgnBase {
     theme = this.injectThemeTemplate(tableControlTemplate);
-    columnIndex = signal(0, ...(ngDevMode ? [{ debugName: "columnIndex" }] : []));
+    _table = signal(null, ...(ngDevMode ? [{ debugName: "_table" }] : /* istanbul ignore next */ []));
+    /** 0-based logical (DOM) index of this cell within its row. */
+    _logicalIndex = signal(0, ...(ngDevMode ? [{ debugName: "_logicalIndex" }] : /* istanbul ignore next */ []));
+    /** 1-based visual column index, remapped through the table's column order. */
+    _visualColumnIndex = computed(() => {
+        const logicalIndex = this._logicalIndex();
+        const table = this._table();
+        if (table) {
+            // Subtract the selection column offset so DOM index aligns with registered header cells.
+            const offset = table.showCheckboxes() ? 1 : 0;
+            return table.getVisualColumnIndex(logicalIndex - offset);
+        }
+        return logicalIndex + 1;
+    }, ...(ngDevMode ? [{ debugName: "_visualColumnIndex" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         this.prepareDom();
         const parent = this.element.nativeElement.parentElement?.children;
         if (parent) {
             const index = Array.from(parent).findIndex(child => child === this.element.nativeElement);
-            this.columnIndex.set(index + 1);
+            this._logicalIndex.set(index);
         }
+        afterNextRender(() => {
+            const table = getNearestNgnInstance(this.element.nativeElement, NgnTable);
+            this._table.set(table);
+        });
     }
     prepareDom() {
         toggleClass(this.element.nativeElement, this.theme.class('cell'), true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableTd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NgnTableTd, isStandalone: true, selector: "[ngnTableTd]", host: { properties: { "style.--ngn-table-column-index": "columnIndex()" } }, usesInheritance: true, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableTd, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableTd, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableTd]',
-                    host: { '[style.--ngn-table-column-index]': 'columnIndex()' },
+                    host: { '[style.--ngn-table-column-index]': '_visualColumnIndex()' },
                 }]
         }], ctorParameters: () => [] });
 
 class NgnTableTh extends NgnBase {
     theme = this.injectThemeTemplate(tableControlTemplate);
     _table;
-    ngnTableTh = input.required(...(ngDevMode ? [{ debugName: "ngnTableTh" }] : []));
+    _resizeHandle;
+    ngnTableTh = input.required(...(ngDevMode ? [{ debugName: "ngnTableTh" }] : /* istanbul ignore next */ []));
+    /**
+     * The size of this column (e.g. '1fr', '200px', '25%').
+     * @default '1fr'
+     */
+    size = model('1fr', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * The minimum size constraint for this column.
+     * @default '50px'
+     */
+    minSize = input('50px', ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    /**
+     * The maximum size constraint for this column.
+     * @default '100%'
+     */
+    maxSize = input('100%', ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this column is resizable. Computed from the parent table's `resizable` input.
+     */
+    resizable = computed(() => this._table?.resizable() ?? false, ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the resize handle should be shown. Hidden for the last column in adjacent
+     * and proportional modes since it is implicitly resized via the previous column's handle.
+     * Push mode shows handles on all columns since each column grows independently.
+     */
+    _showHandle = computed(() => {
+        if (!this._table?.resizable())
+            return false;
+        if (this._table.resizeMode() === 'push')
+            return true;
+        // Adjacent & proportional: hide handle on last column
+        const cells = this._table.getRegisteredHeaderCells();
+        return cells.indexOf(this) < cells.length - 1;
+    }, ...(ngDevMode ? [{ debugName: "_showHandle" }] : /* istanbul ignore next */ []));
+    /**
+     * 1-based visual column index, derived from the table's column order map.
+     * Falls back to registration index + 1 when no reordering is active.
+     */
+    _visualColumnIndex = computed(() => {
+        if (!this._table)
+            return undefined;
+        const map = this._table.columnOrderMap();
+        return map.get(this.ngnTableTh()) ?? this.getColumnIndex() + 1;
+    }, ...(ngDevMode ? [{ debugName: "_visualColumnIndex" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         this.prepareDom();
         const renderer = inject(Renderer2);
         const elRef = inject(ElementRef);
         afterNextRender(() => {
-            const element = renderer.createElement('div');
-            element.classList.add(this.theme.class('spacer'));
-            elRef.nativeElement.appendChild(element);
+            // Wrap existing content in a text container for ellipsis support
+            const textWrapper = renderer.createElement('span');
+            textWrapper.classList.add(this.theme.class('cell-text'));
+            const el = elRef.nativeElement;
+            while (el.firstChild) {
+                textWrapper.appendChild(el.firstChild);
+            }
+            el.appendChild(textWrapper);
+            // Move dynamically-created controls back out of the text wrapper
+            // so they participate in the header cell's flex layout (order: 2, 3)
+            const filterControl = textWrapper.querySelector(`.${this.theme.class('filter-control')}`);
+            if (filterControl)
+                el.appendChild(filterControl);
+            const sortControl = textWrapper.querySelector(`.${this.theme.class('sort-control')}`);
+            if (sortControl)
+                el.appendChild(sortControl);
+            // Spacer div for flex layout
+            const spacer = renderer.createElement('div');
+            spacer.classList.add(this.theme.class('spacer'));
+            elRef.nativeElement.appendChild(spacer);
+            // Resize handle
+            this._resizeHandle = renderer.createElement('div');
+            this._resizeHandle.classList.add(this.theme.class('resize-handle'));
+            this._resizeHandle.addEventListener('pointerdown', this.onResizePointerDown);
+            this._resizeHandle.addEventListener('dblclick', this.onResizeDblClick);
+            elRef.nativeElement.appendChild(this._resizeHandle);
+        });
+        // Toggle handle visibility based on mode and column position
+        afterRenderEffect(() => {
+            const show = this._showHandle();
+            if (this._resizeHandle) {
+                this._resizeHandle.style.display = show ? '' : 'none';
+            }
         });
     }
     ngOnInit() {
@@ -181,40 +980,247 @@ class NgnTableTh extends NgnBase {
     }
     ngOnDestroy() {
         this._table?.unregisterHeaderCell(this);
+        this._resizeHandle?.removeEventListener('pointerdown', this.onResizePointerDown);
+        this._resizeHandle?.removeEventListener('dblclick', this.onResizeDblClick);
     }
     prepareDom() {
         toggleClass(this.element.nativeElement, this.theme.class('cell'), true);
+        toggleClass(this.element.nativeElement, this.theme.class('resizable'), true);
+    }
+    onResizeDblClick = (event) => {
+        if (!this._table?.resizable())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const columnIndex = this.getColumnIndex();
+        if (columnIndex < 0)
+            return;
+        this._table.autoSizeColumn(columnIndex);
+    };
+    onResizePointerDown = (event) => {
+        if (!this._table?.resizable())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const target = event.target;
+        try {
+            target.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // Ignore
+        }
+        const columnIndex = this.getColumnIndex();
+        if (columnIndex < 0)
+            return;
+        this._table.startColumnResize(columnIndex, event);
+        const onPointerMove = (e) => {
+            this._table.dragColumnResize(columnIndex, e);
+        };
+        const cleanup = (cancel) => {
+            this._table.endColumnResize(columnIndex, cancel);
+            target.removeEventListener('pointermove', onPointerMove);
+            target.removeEventListener('pointerup', onPointerUp);
+            target.removeEventListener('pointercancel', onPointerCancel);
+        };
+        const onPointerUp = () => cleanup(false);
+        const onPointerCancel = () => cleanup(true);
+        target.addEventListener('pointermove', onPointerMove);
+        target.addEventListener('pointerup', onPointerUp);
+        target.addEventListener('pointercancel', onPointerCancel);
+    };
+    getColumnIndex() {
+        if (!this._table)
+            return -1;
+        const cells = this._table.getRegisteredHeaderCells();
+        return cells.indexOf(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableTh, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgnTableTh, isStandalone: true, selector: "[ngnTableTh]", inputs: { ngnTableTh: { classPropertyName: "ngnTableTh", publicName: "ngnTableTh", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableTh, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableTh, decorators: [{
             type: Directive,
-            args: [{ selector: '[ngnTableTh]' }]
-        }], ctorParameters: () => [], propDecorators: { ngnTableTh: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableTh", required: true }] }] } });
+            args: [{
+                    selector: '[ngnTableTh]',
+                    host: {
+                        '[style.--ngn-table-column-index]': '_visualColumnIndex()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngnTableTh: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableTh", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }] } });
 
 class NgnTableHeadTr extends NgnBase {
     theme = this.injectThemeTemplate(tableControlTemplate);
+    _element = inject((ElementRef));
     constructor() {
         super();
         this.prepareDom();
     }
     prepareDom() {
-        toggleClass(this.element.nativeElement, this.theme.class('row'), true);
+        toggleClass(this._element.nativeElement, this.theme.class('row'), true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableHeadTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", 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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableHeadTr, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableHeadTr, decorators: [{
             type: Directive,
             args: [{ selector: '[ngnTableHeadTr]', host: { '[attr.aria-rowindex]': '1' } }]
         }], ctorParameters: () => [] });
 
+/** Minimum distance in pixels before a drag is initiated. */
+const REORDER_DEAD_ZONE_PX = 5;
+/**
+ * @category directive
+ */
+class NgnTableReorderableColumn {
+    theme = injectThemeTemplate(tableControlTemplate);
+    _element = inject(ElementRef);
+    _headerCell = inject(NgnTableTh);
+    _columnId = this._headerCell.ngnTableTh;
+    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
+    _isDragging = false;
+    _startX = 0;
+    _startY = 0;
+    _pointerId = null;
+    _boundOnPointerMove = null;
+    _boundOnPointerUp = null;
+    _boundOnPointerCancel = null;
+    _boundOnKeyDown = null;
+    constructor() {
+        afterNextRender(() => {
+            const el = this._element.nativeElement;
+            el.addEventListener('pointerdown', this.onPointerDown);
+        });
+    }
+    ngOnDestroy() {
+        this._element.nativeElement.removeEventListener('pointerdown', this.onPointerDown);
+        this.cleanup();
+    }
+    onPointerDown = (event) => {
+        const table = this._table();
+        if (!table?.reorderable())
+            return;
+        // Don't intercept resize handle clicks
+        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;
+        this._isDragging = false;
+        this._pointerId = event.pointerId;
+        try {
+            this._element.nativeElement.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // Ignore
+        }
+        this._boundOnPointerMove = (e) => this.onPointerMove(e);
+        this._boundOnPointerUp = () => this.onPointerUp();
+        this._boundOnPointerCancel = () => this.onPointerCancel();
+        this._boundOnKeyDown = (e) => this.onKeyDown(e);
+        this._element.nativeElement.addEventListener('pointermove', this._boundOnPointerMove);
+        this._element.nativeElement.addEventListener('pointerup', this._boundOnPointerUp);
+        this._element.nativeElement.addEventListener('pointercancel', this._boundOnPointerCancel);
+        document.addEventListener('keydown', this._boundOnKeyDown);
+    };
+    onPointerMove(event) {
+        if (!this._isDragging) {
+            const deltaX = event.clientX - this._startX;
+            const deltaY = event.clientY - this._startY;
+            const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
+            if (distance < REORDER_DEAD_ZONE_PX)
+                return;
+            // Start dragging
+            this._isDragging = true;
+            const table = this._table();
+            table?.startColumnReorder(this._columnId());
+            toggleClass(this._element.nativeElement, this.theme.class('drag-source'), true);
+        }
+        this._table()?.dragColumnReorder(event);
+    }
+    onPointerUp() {
+        if (this._isDragging) {
+            this._table()?.endColumnReorder(false);
+            toggleClass(this._element.nativeElement, this.theme.class('drag-source'), false);
+        }
+        this.cleanup();
+    }
+    onPointerCancel() {
+        if (this._isDragging) {
+            this._table()?.endColumnReorder(true);
+            toggleClass(this._element.nativeElement, this.theme.class('drag-source'), false);
+        }
+        this.cleanup();
+    }
+    onKeyDown(event) {
+        if (event.key === 'Escape' && this._isDragging) {
+            this._table()?.endColumnReorder(true);
+            toggleClass(this._element.nativeElement, this.theme.class('drag-source'), false);
+            this.cleanup();
+        }
+    }
+    cleanup() {
+        this._isDragging = false;
+        if (this._pointerId != null) {
+            try {
+                this._element.nativeElement.releasePointerCapture(this._pointerId);
+            }
+            catch {
+                // Ignore — capture may already be released
+            }
+            this._pointerId = null;
+        }
+        if (this._boundOnPointerMove) {
+            this._element.nativeElement.removeEventListener('pointermove', this._boundOnPointerMove);
+            this._boundOnPointerMove = null;
+        }
+        if (this._boundOnPointerUp) {
+            this._element.nativeElement.removeEventListener('pointerup', this._boundOnPointerUp);
+            this._boundOnPointerUp = null;
+        }
+        if (this._boundOnPointerCancel) {
+            this._element.nativeElement.removeEventListener('pointercancel', this._boundOnPointerCancel);
+            this._boundOnPointerCancel = null;
+        }
+        if (this._boundOnKeyDown) {
+            document.removeEventListener('keydown', this._boundOnKeyDown);
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableReorderableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableReorderableColumn]',
+                }]
+        }], ctorParameters: () => [] });
+
 class NgnTableBodyTr extends NgnScrollerItem {
-    ngnTableBodyTr = input.required(...(ngDevMode ? [{ debugName: "ngnTableBodyTr" }] : []));
-    ngnScrollerItem = input({}, ...(ngDevMode ? [{ debugName: "ngnScrollerItem" }] : []));
+    ngnTableBodyTr = input.required(...(ngDevMode ? [{ debugName: "ngnTableBodyTr" }] : /* istanbul ignore next */ []));
+    ngnScrollerItem = input({}, ...(ngDevMode ? [{ debugName: "ngnScrollerItem" }] : /* istanbul ignore next */ []));
     _element = inject((ElementRef));
     theme = injectThemeTemplate(tableControlTemplate);
+    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
+    selectable = computed(() => !!this._table()?.selectionMode(), ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    selected = computed(() => {
+        const table = this._table();
+        if (!table || !table.selectionMode())
+            return false;
+        const row = this.ngnTableBodyTr();
+        return table.isRowSelected(row.id);
+    }, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    focused = computed(() => {
+        const table = this._table();
+        if (!table || !table.selectionMode())
+            return false;
+        const row = this.ngnTableBodyTr();
+        return table.focusedRowIndex() === row.index;
+    }, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         effect(() => {
@@ -226,51 +1232,475 @@ class NgnTableBodyTr extends NgnScrollerItem {
     prepareDom() {
         toggleClass(this._element.nativeElement, this.theme.class('row'), true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableBodyTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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: { properties: { "attr.aria-rowindex": "ngnTableBodyTr().index + 2", "style.--ngn-table-row-index": "ngnTableBodyTr().index + 2", "class": "theme.classes({'even': ngnTableBodyTr().index % 2 === 0})" } }, usesInheritance: true, ngImport: i0 });
+    onRowClick(event) {
+        const table = this._table();
+        if (!table || !table.selectionMode())
+            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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableBodyTr, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableBodyTr, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableBodyTr]',
                     host: {
                         '[attr.aria-rowindex]': 'ngnTableBodyTr().index + 2',
                         '[style.--ngn-table-row-index]': 'ngnTableBodyTr().index + 2',
-                        '[class]': `theme.classes({'even': ngnTableBodyTr().index % 2 === 0})`,
+                        '[class]': `theme.classes({
+      'even': ngnTableBodyTr().index % 2 === 0,
+      'selected-row': selected(),
+      'focused-row': focused()
+    })`,
+                        '[attr.aria-selected]': 'selectable() ? selected() : null',
+                        role: 'row',
+                        '(click)': 'onRowClick($event)',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { ngnTableBodyTr: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableBodyTr", required: true }] }], ngnScrollerItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnScrollerItem", required: false }] }] } });
 
+/**
+ * Directive that turns a `<th>` or `<td>` into a selection checkbox column.
+ *
+ * **Header usage** — renders a "select all / none" checkbox:
+ * ```html
+ * <th ngnTableSelectionColumn></th>
+ * ```
+ *
+ * **Body usage** — renders a per-row checkbox (must be inside a `[ngnTableBodyTr]`):
+ * ```html
+ * <td ngnTableSelectionColumn></td>
+ * ```
+ *
+ * @category directive
+ */
+class NgnTableSelectionColumn {
+    theme = injectThemeTemplate(tableControlTemplate);
+    _element = inject(ElementRef);
+    _envInjector = inject(EnvironmentInjector);
+    _appRef = inject(ApplicationRef);
+    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
+    /** Non-null only when used inside a body row (`<td>`). */
+    _bodyTr = inject(NgnTableBodyTr, { optional: true });
+    _isHeader = this._element.nativeElement.tagName === 'TH';
+    /**
+     * NgnCheckbox created at the application level via `createComponent` + `EnvironmentInjector`.
+     * This keeps it outside Angular's view tree so @for reconciliation cannot destroy it.
+     */
+    _checkboxRef;
+    selected = computed(() => {
+        if (this._isHeader)
+            return false;
+        const table = this._table();
+        const row = this._bodyTr?.ngnTableBodyTr();
+        if (!table || !row)
+            return false;
+        return table.isRowSelected(row.id);
+    }, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    focused = computed(() => {
+        if (this._isHeader)
+            return false;
+        const table = this._table();
+        const row = this._bodyTr?.ngnTableBodyTr();
+        if (!table || !row)
+            return false;
+        return table.focusedRowIndex() === row.index;
+    }, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this._prepareDom();
+        this._createCheckbox();
+        if (this._isHeader) {
+            this._setupHeaderEffects();
+            // Register the selection column once the table signal resolves
+            effect(() => {
+                const table = this._table();
+                if (table) {
+                    table.registerSelectionColumn();
+                }
+            });
+        }
+        else {
+            this._setupBodyEffects();
+        }
+    }
+    ngOnDestroy() {
+        if (this._isHeader) {
+            this._table()?.unregisterSelectionColumn();
+        }
+        this._appRef.detachView(this._checkboxRef.hostView);
+        this._checkboxRef.destroy();
+    }
+    _prepareDom() {
+        const el = this._element.nativeElement;
+        toggleClass(el, this.theme.class('cell'), true);
+        toggleClass(el, this.theme.class('selection-column'), true);
+        if (this._isHeader) {
+            el.setAttribute('aria-label', 'Select all rows');
+        }
+    }
+    /**
+     * Creates an NgnCheckbox via `createComponent` + `EnvironmentInjector`.
+     * The component is attached to `ApplicationRef` (not a ViewContainerRef),
+     * so Angular's @for block reconciliation cannot destroy it.
+     */
+    _createCheckbox() {
+        this._checkboxRef = createComponent(NgnCheckbox, {
+            environmentInjector: this._envInjector,
+        });
+        this._appRef.attachView(this._checkboxRef.hostView);
+        const cbEl = this._checkboxRef.location.nativeElement;
+        cbEl.classList.add(this.theme.class('selection-checkbox'));
+        if (this._isHeader) {
+            this._checkboxRef.setInput('allowIndeterminate', true);
+        }
+        this._element.nativeElement.appendChild(cbEl);
+    }
+    // --- Header (select-all) ---
+    _setupHeaderEffects() {
+        effect(() => {
+            const table = this._table();
+            if (!table)
+                return;
+            setComponentInput(this._checkboxRef, 'value', table.headerCheckboxValue());
+        });
+    }
+    // --- Body (per-row) ---
+    _setupBodyEffects() {
+        effect(() => {
+            const isSelected = this.selected();
+            const isFocused = this.focused();
+            const row = this._bodyTr?.ngnTableBodyTr();
+            const el = this._element.nativeElement;
+            setComponentInput(this._checkboxRef, 'value', isSelected);
+            if (row) {
+                el.style.setProperty('--ngn-table-row-index', String(row.index + 2));
+            }
+            toggleClass(el, this.theme.class('selected-row-cell'), isSelected);
+            toggleClass(el, this.theme.class('focused-row-cell'), isFocused);
+        });
+    }
+    // --- Click handling ---
+    onClick(event) {
+        event.stopPropagation();
+        const table = this._table();
+        if (!table)
+            return;
+        if (this._isHeader) {
+            table.toggleSelectAll();
+        }
+        else {
+            const row = this._bodyTr?.ngnTableBodyTr();
+            if (row) {
+                table.handleCheckboxChange(row);
+            }
+        }
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableSelectionColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableSelectionColumn]',
+                    host: {
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], 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.
+     */
+    ngnTableStickyColumn = input.required(...(ngDevMode ? [{ debugName: "ngnTableStickyColumn" }] : /* istanbul ignore next */ []));
+    _scrollContainer = null;
+    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);
+            }
+            // 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);
+        }
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableStickyColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableStickyColumn]',
+                }]
+        }], 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.1.0", ngImport: i0, type: NgnTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: NgnTableModule, imports: [NgnTable, NgnTableBodyTr, NgnTableTd, NgnTableTh, NgnTableHeadTr], exports: [NgnTable, NgnTableBodyTr, NgnTableTd, NgnTableTh, NgnTableHeadTr] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableModule, imports: [NgnTable] });
+    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,
+            NgnTableBodyTr,
+            NgnTableTd,
+            NgnTableTh,
+            NgnTableHeadTr,
+            NgnTableGroupHeaderTr,
+            NgnTableReorderableColumn,
+            NgnTableSelectionColumn,
+            NgnTableStickyColumn], exports: [NgnTable,
+            NgnTableBodyTr,
+            NgnTableTd,
+            NgnTableTh,
+            NgnTableHeadTr,
+            NgnTableGroupHeaderTr,
+            NgnTableReorderableColumn,
+            NgnTableSelectionColumn,
+            NgnTableStickyColumn] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableModule, imports: [NgnTable] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [NgnTable, NgnTableBodyTr, NgnTableTd, NgnTableTh, NgnTableHeadTr],
-                    exports: [NgnTable, NgnTableBodyTr, NgnTableTd, NgnTableTh, NgnTableHeadTr],
+                    imports: [
+                        NgnTable,
+                        NgnTableBodyTr,
+                        NgnTableTd,
+                        NgnTableTh,
+                        NgnTableHeadTr,
+                        NgnTableGroupHeaderTr,
+                        NgnTableReorderableColumn,
+                        NgnTableSelectionColumn,
+                        NgnTableStickyColumn,
+                    ],
+                    exports: [
+                        NgnTable,
+                        NgnTableBodyTr,
+                        NgnTableTd,
+                        NgnTableTh,
+                        NgnTableHeadTr,
+                        NgnTableGroupHeaderTr,
+                        NgnTableReorderableColumn,
+                        NgnTableSelectionColumn,
+                        NgnTableStickyColumn,
+                    ],
                 }]
         }] });
 
+/**
+ * @category directive
+ */
 class NgnTableFilterableColumn {
     theme = injectThemeTemplate(tableControlTemplate);
     _element = inject(ElementRef);
     _columnId = inject(NgnTableTh).ngnTableTh;
-    ngnTableFilterableColumn = input(...(ngDevMode ? [undefined, { debugName: "ngnTableFilterableColumn" }] : []));
+    ngnTableFilterableColumn = input(...(ngDevMode ? [undefined, { debugName: "ngnTableFilterableColumn" }] : /* istanbul ignore next */ []));
     _ngnActionButton;
     _ngnFilter;
     _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
     _rows = computed(() => {
         return this._table()?.rows() || [];
-    }, ...(ngDevMode ? [{ debugName: "_rows" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
     filter = computed(() => {
         const tableFilter = this._table()?.filters()?.[this._columnId()];
         return tableFilter;
-    }, ...(ngDevMode ? [{ debugName: "filter" }] : []));
-    ngnTableFilterableColumnType = input.required(...(ngDevMode ? [{ debugName: "ngnTableFilterableColumnType" }] : []));
-    ngnTableFilterableColumnItems = input(...(ngDevMode ? [undefined, { debugName: "ngnTableFilterableColumnItems" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    ngnTableFilterableColumnType = input.required(...(ngDevMode ? [{ debugName: "ngnTableFilterableColumnType" }] : /* istanbul ignore next */ []));
+    ngnTableFilterableColumnItems = input(...(ngDevMode ? [undefined, { debugName: "ngnTableFilterableColumnItems" }] : /* istanbul ignore next */ []));
     constructor() {
         this._ngnActionButton = inject(ViewContainerRef).createComponent((NgnActionButton));
         this._ngnFilter = inject(ViewContainerRef).createComponent(NgnFilter);
@@ -278,6 +1708,7 @@ class NgnTableFilterableColumn {
         this._element.nativeElement.appendChild(this._ngnFilter.location.nativeElement);
         this._ngnActionButton.location.nativeElement.classList.add(this.theme.class('filter-control'));
         setComponentInput(this._ngnActionButton, 'kind', 'icon');
+        setComponentInput(this._ngnActionButton, 'inline', true);
         setComponentInput(this._ngnFilter, 'anchor', this._ngnActionButton.location.nativeElement);
         setComponentInput(this._ngnFilter, 'mode', 'headless');
         setComponentInput(this._ngnFilter, 'allowMultiple', true);
@@ -290,7 +1721,7 @@ class NgnTableFilterableColumn {
                 event.stopPropagation();
                 this._ngnFilter.instance.show();
             },
-        }), ...(ngDevMode ? [{ debugName: "cfg" }] : []));
+        }), ...(ngDevMode ? [{ debugName: "cfg" }] : /* istanbul ignore next */ []));
         effect(() => {
             setComponentInput(this._ngnActionButton, 'config', cfg());
         });
@@ -313,10 +1744,10 @@ class NgnTableFilterableColumn {
         this._ngnActionButton.destroy();
         this._ngnFilter.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableFilterableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableFilterableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableFilterableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableFilterableColumn]',
@@ -326,10 +1757,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { ngnTableFilterableColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableFilterableColumn", required: false }] }], ngnTableFilterableColumnType: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableFilterableColumnType", required: true }] }], ngnTableFilterableColumnItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableFilterableColumnItems", required: false }] }] } });
 
+/**
+ * @category directive
+ */
 class NgnTableSortableColumn {
     theme = injectThemeTemplate(tableControlTemplate);
     _element = inject(ElementRef);
-    ngnTableSortableColumn = input(...(ngDevMode ? [undefined, { debugName: "ngnTableSortableColumn" }] : []));
+    ngnTableSortableColumn = input(...(ngDevMode ? [undefined, { debugName: "ngnTableSortableColumn" }] : /* istanbul ignore next */ []));
     _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
     sort = computed(() => {
         const tableSort = this._table()?.sort();
@@ -337,7 +1771,7 @@ class NgnTableSortableColumn {
             return tableSort.direction;
         }
         return null;
-    }, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
     columnId = inject(NgnTableTh).ngnTableTh;
     _ngnIcon;
     constructor() {
@@ -352,6 +1786,12 @@ class NgnTableSortableColumn {
     ngOnDestroy() {
         this._ngnIcon.destroy();
     }
+    onHostClick(event) {
+        const target = event.target;
+        if (target.classList.contains(this.theme.class('resize-handle')))
+            return;
+        this.toggleSort();
+    }
     toggleSort() {
         const currentSort = this.sort();
         const table = this._table();
@@ -361,16 +1801,16 @@ class NgnTableSortableColumn {
                 ? { column: this.columnId(), direction: 'desc' }
                 : null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableSortableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgnTableSortableColumn, isStandalone: true, selector: "[ngnTableSortableColumn]", inputs: { ngnTableSortableColumn: { classPropertyName: "ngnTableSortableColumn", publicName: "ngnTableSortableColumn", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggleSort()" }, properties: { "class": "theme.classes({'sortable-column': true, 'sorted-column': !!sort() })" } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTableSortableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnTableSortableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTableSortableColumn]',
                     host: {
                         '[class]': `theme.classes({'sortable-column': true, 'sorted-column': !!sort() })`,
-                        '(click)': `toggleSort()`,
+                        '(click)': `onHostClick($event)`,
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { ngnTableSortableColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableSortableColumn", required: false }] }] } });
@@ -379,5 +1819,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgnTable, NgnTableBodyTr, NgnTableFilterableColumn, NgnTableHeadTr, NgnTableModule, NgnTableSortableColumn, NgnTableTd, NgnTableTh };
+export { NgnTable, NgnTableBodyTr, NgnTableFilterableColumn, NgnTableGroupHeaderTr, NgnTableHeadTr, NgnTableModule, NgnTableReorderableColumn, NgnTableSelectionColumn, NgnTableSortableColumn, NgnTableStickyColumn, NgnTableTd, NgnTableTemplates, NgnTableTh };
 //# sourceMappingURL=ngneers-controls-table.mjs.map