forty-cdk 0.10.0 → 0.11.0

package/fesm2022/forty-cdk-table.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, booleanAttribute, inject, isSignal, signal, computed, input, model, ElementRef, Directive, TemplateRef, contentChild, Injector, DOCUMENT, output, PLATFORM_ID, DestroyRef, effect, afterNextRender, numberAttribute, contentChildren, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, booleanAttribute, inject, isSignal, signal, computed, input, model, ElementRef, Directive, TemplateRef, contentChild, Injector, PLATFORM_ID, output, DestroyRef, DOCUMENT, effect, afterNextRender, numberAttribute, viewChildren, afterEveryRender, contentChildren, ChangeDetectionStrategy, Component } from '@angular/core';
 import { injectTextDirection, injectElementSize, Collection, RovingTabindex, firstEnabledHost, computeFlatHierarchy, reconcileRovingActive, findFirstFocusable, resolveTreegridExpandCollapse, resolveGridNavigation, moveGridIndex, registerHandle, createPointerDragSession, DRAG_DEAD_ZONE_PX, clampToRange, translateWindowReorder, LiveAnnouncer, createKeyboardDragMediator, isDragLiftKey, resolveLiftedDragControl, resolveScrubReorder } from 'forty-cdk/core';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i1 from 'forty-cdk/drag-drop';
-import { ForDropList, moveItemInArray, FOR_DROP_LIST_DEFAULT_ORIENTATION, FOR_DROP_LIST_ROVING_DELEGATE, FOR_DRAGGABLE_LIFT_GUARD, FOR_DRAG_DROP_DEFAULTS } from 'forty-cdk/drag-drop';
+import { ForDropList, moveItemInArray, FOR_DROP_LIST_DEFAULT_ORIENTATION, FOR_DROP_LIST_ROVING_DELEGATE, FOR_DRAGGABLE_LIFT_GUARD, ForDraggable, ForDragPlaceholder, FOR_DRAG_DROP_DEFAULTS } from 'forty-cdk/drag-drop';
 
 const FOR_TABLE_CONTEXT = new InjectionToken('FOR_TABLE_CONTEXT');
 const FOR_TABLE_ROW_CONTEXT = new InjectionToken('FOR_TABLE_ROW_CONTEXT');
@@ -346,12 +346,25 @@ class ForTable {
     _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
     dir = injectTextDirection(this._dirInput);
     /**
-     * True total number of data rows for `aria-rowcount`, e.g. for a server-paged or
-     * (later) virtualized table that renders only a window of rows. Defaults to the
-     * rendered data-row count. Ignored in `mode="table"`.
+     * Explicit override for the true total data-row count (`aria-rowcount` and the
+     * virtualized scroll range). A declarative `<for-table-body>` supplies this
+     * automatically from its `rows` dataset length, so bind `[rowCount]` only for a
+     * server-known total larger than the loaded rows; when set it wins over the
+     * body-derived count. Defaults to the body count, else the rendered data-row
+     * count. Ignored in `mode="table"`.
      */
-    rowCount = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "rowCount" }] : /* istanbul ignore next */ []));
+    _rowCountInput = input(undefined, { ...(ngDevMode ? { debugName: "_rowCountInput" } : /* istanbul ignore next */ {}), alias: 'rowCount' });
+    /** The declarative body's dataset length, registered by `<for-table-body>`; `null` when none. */
+    #bodyRowCount = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#bodyRowCount" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved true total data-row count: the explicit `[rowCount]` input when set,
+     * else the declarative `<for-table-body>`'s dataset length, else `undefined`
+     * (readers fall back to the rendered count). Feeds `aria-rowcount`, the
+     * cross-window navigation total, and the virtualizer's count.
+     */
+    rowCount = computed(() => this._rowCountInput() ?? this.#bodyRowCount()?.(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowCount" }] : /* istanbul ignore next */ []));
     /**
      * True total number of columns for `aria-colcount`. Defaults to the rendered
      * column count (the cells of the first data row that has any). Ignored in
@@ -558,6 +571,9 @@ class ForTable {
     registerVirtualWindow(window) {
         this.#virtualWindow.set(window);
     }
+    registerBodyRowCount(count) {
+        this.#bodyRowCount.set(count);
+    }
     setReorderingRow(index) {
         this.#reorderingRow.set(index);
     }
@@ -774,7 +790,7 @@ class ForTable {
         return Math.max(1, this.#rows.items().length);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTable, isStandalone: true, selector: "[forTable]", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null }, colCount: { classPropertyName: "colCount", publicName: "colCount", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, selectableValues: { classPropertyName: "selectableValues", publicName: "selectableValues", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", expanded: "expandedChange" }, host: { properties: { "attr.role": "mode()", "attr.aria-label": "ariaLabel() || null", "attr.dir": "dir()", "attr.data-mode": "mode()", "style.--for-table-header-height.px": "headerSize()?.height ?? null", "attr.aria-rowcount": "rowCountAttr()", "attr.aria-colcount": "colCountAttr()", "attr.aria-multiselectable": "selectionMode() === \"multiple\" ? \"true\" : null" } }, providers: [{ provide: FOR_TABLE_CONTEXT, useExisting: ForTable }], exportAs: ["forTable"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTable, isStandalone: true, selector: "[forTable]", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, _rowCountInput: { classPropertyName: "_rowCountInput", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null }, colCount: { classPropertyName: "colCount", publicName: "colCount", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, selectableValues: { classPropertyName: "selectableValues", publicName: "selectableValues", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", expanded: "expandedChange" }, host: { properties: { "attr.role": "mode()", "attr.aria-label": "ariaLabel() || null", "attr.dir": "dir()", "attr.data-mode": "mode()", "style.--for-table-header-height.px": "headerSize()?.height ?? null", "attr.aria-rowcount": "rowCountAttr()", "attr.aria-colcount": "colCountAttr()", "attr.aria-multiselectable": "selectionMode() === \"multiple\" ? \"true\" : null" } }, providers: [{ provide: FOR_TABLE_CONTEXT, useExisting: ForTable }], exportAs: ["forTable"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTable, decorators: [{
             type: Directive,
@@ -793,7 +809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     },
                     providers: [{ provide: FOR_TABLE_CONTEXT, useExisting: ForTable }],
                 }]
-        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], colCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "colCount", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectableValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableValues", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], _rowCountInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], colCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "colCount", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectableValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableValues", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
 /**
  * Resolves the absolute `(row, 0-based column)` target and travel `direction`
  * for a row-crossing grid action against the true `total` row count. Arrow
@@ -851,6 +867,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Bind `[forDataCellRow]` to the same array passed to `ForTableBody`'s `rows`
  * to type `let-row` — the input is read only for type inference, never at
  * runtime.
+ *
+ * When the row type is a discriminated union whose variant members render
+ * through a `[forRowDef]` instead of the per-column cells, bind
+ * `[forDataCellUnless]` to the same type guard(s) used on those defs' `[when]`
+ * so `let-row` is narrowed to the variant-excluded members (`Exclude<T, V>`).
  */
 class ForDataCell {
     /** The captured data-cell template, typed with `ForDataCellContext<T>`. */
@@ -861,17 +882,26 @@ class ForDataCell {
      * directive never touches its value.
      */
     rowType = input([], { ...(ngDevMode ? { debugName: "rowType" } : /* istanbul ignore next */ {}), alias: 'forDataCellRow' });
+    /**
+     * Type-inference hint: bind the type guard(s) that match the variant rows
+     * rendered by `[forRowDef]` (the same predicate used on their `[when]`) so
+     * `let-row` is narrowed to `Exclude<T, V>` — the members this per-column
+     * template actually receives. Compose several variants into one union guard
+     * (`(r): r is A | B => …`). Read only by the compiler; the directive never
+     * touches its value. Omitting it leaves `let-row` typed as the full `T`.
+     */
+    excludeType = input(null, { ...(ngDevMode ? { debugName: "excludeType" } : /* istanbul ignore next */ {}), alias: 'forDataCellUnless' });
     /** Narrows the template context type for `let-row` under strict template checking. */
     static ngTemplateContextGuard(_directive, _context) {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDataCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForDataCell, isStandalone: true, selector: "ng-template[forDataCell]", inputs: { rowType: { classPropertyName: "rowType", publicName: "forDataCellRow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForDataCell, isStandalone: true, selector: "ng-template[forDataCell]", inputs: { rowType: { classPropertyName: "rowType", publicName: "forDataCellRow", isSignal: true, isRequired: false, transformFunction: null }, excludeType: { classPropertyName: "excludeType", publicName: "forDataCellUnless", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDataCell, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[forDataCell]' }]
-        }], propDecorators: { rowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDataCellRow", required: false }] }] } });
+        }], propDecorators: { rowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDataCellRow", required: false }] }], excludeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDataCellUnless", required: false }] }] } });
 /**
  * Marks the placeholder/skeleton template of a column definition. Optional;
  * place on an `<ng-template forPlaceholderCell>` inside a `[forColumnDef]`. When
@@ -889,6 +919,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             type: Directive,
             args: [{ selector: 'ng-template[forPlaceholderCell]' }]
         }] });
+/**
+ * Marks the shared drag placeholder for the reorderable columns of a
+ * `<for-table-body>`. Optional and declared **once per body** (not per column);
+ * place on an `<ng-template forColumnDragPlaceholder>` among the `[forColumnDef]`s.
+ * `ForTableBody` stamps it as every reorderable header cell's
+ * `[forDragPlaceholder]`, so during a pointer reorder the dragged column's slot
+ * shows this template. Omit it to keep drag-drop's default placeholder behaviour.
+ */
+class ForColumnDragPlaceholder {
+    /** The captured placeholder template rendered in a reordered column's slot. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForColumnDragPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForColumnDragPlaceholder, isStandalone: true, selector: "ng-template[forColumnDragPlaceholder]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForColumnDragPlaceholder, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[forColumnDragPlaceholder]' }]
+        }] });
 /**
  * Declarative definition of a single table column, co-locating its header,
  * data, and (optional) placeholder templates plus its per-column config in one
@@ -921,11 +969,22 @@ class ForColumnDef {
      */
     sortable = input(false, { ...(ngDevMode ? { debugName: "sortable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * When set, `ForTableBody` renders a `[forTableColumnResizer]` (with `autoFit`)
-     * inside the column's header cell and re-emits its commits through the body's
-     * `resizeCommit` output. Provide `resizeAriaLabel` so the handle is named.
+     * When set, `ForTableBody` renders a `[forTableColumnResizer]` inside the column's
+     * header cell and re-emits its commits through the body's `resizeCommit` output.
+     * Provide `resizeAriaLabel` so the handle is named. Tune the handle per column with
+     * `resizeMin` / `resizeMax` / `resizeStep` / `autoFit` / `fitIncludesHeader`, and
+     * seed / track its width through the body's `[(columnWidths)]`.
      */
     resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When set, the column's header cell becomes a drag-reorder handle: with at least
+     * one `reorderable` column, `ForTableBody` applies `[forTableColumnReorder]` to the
+     * stamped header row and `[forDraggable]` (with `[dragData]` set to this column's
+     * `name`) to this header cell, and re-emits committed reorders through the body's
+     * `columnReorder` output. Non-reorderable columns stay static (not draggable). Note
+     * that any `reorderable` column makes the body bundle `forty-cdk/drag-drop`.
+     */
+    reorderable = input(false, { ...(ngDevMode ? { debugName: "reorderable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Accessible name for the auto-wired resize handle (only meaningful with
      * `resizable`). Supplied by the consumer so it is localizable; `null` (default)
@@ -933,14 +992,70 @@ class ForColumnDef {
      */
     resizeAriaLabel = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resizeAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum width (px) the auto-wired resize handle clamps to (only meaningful with
+     * `resizable`). Forwarded to the stamped `[forTableColumnResizer]`'s `min`; drives
+     * its `aria-valuemin`. Default `0`.
+     */
+    resizeMin = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeMin" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum width (px) the auto-wired resize handle clamps to (only meaningful with
+     * `resizable`). Forwarded to the stamped `[forTableColumnResizer]`'s `max`; drives
+     * its `aria-valuemax` (omitted when non-finite). Default `Infinity` (no upper bound).
+     */
+    resizeMax = input(Infinity, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeMax" }] : /* istanbul ignore next */ []));
+    /**
+     * Pixels applied per `ArrowLeft` / `ArrowRight` press on the auto-wired resize
+     * handle (only meaningful with `resizable`). Forwarded to the stamped
+     * `[forTableColumnResizer]`'s `step`. Default `10`.
+     */
+    resizeStep = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeStep" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether double-clicking the auto-wired resize handle fits the column to its
+     * widest content (only meaningful with `resizable`). Forwarded to the stamped
+     * `[forTableColumnResizer]`'s `autoFit`. Default `true` — the historical
+     * hardcoded behaviour; set `false` to make the double-click a no-op.
+     */
+    autoFit = input(true, { ...(ngDevMode ? { debugName: "autoFit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether header-inclusive auto-fit also accounts for the column header's label
+     * (only meaningful with `resizable` + `autoFit`). Forwarded to the stamped
+     * `[forTableColumnResizer]`'s `fitIncludesHeader`; isolate the header text with a
+     * `[forTableColumnLabel]` inside the `[forHeaderCell]` template. Default `false`.
+     */
+    fitIncludesHeader = input(false, { ...(ngDevMode ? { debugName: "fitIncludesHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * `grid-template-columns` track fragment for this column (e.g. `'160px'`,
      * `'minmax(160px, 1fr)'`). When unset, `ForTableBody` falls back to the
      * published `--for-table-col-<name>-width` resize var with a `minmax(0, 1fr)`
-     * default, so a resized column drives its own track.
+     * default, so a resized column drives its own track. A static `width`
+     * **takes precedence** over that resize var — so leave it unset on a
+     * `resizable` column whose width you drive through `resizeCommit` or the
+     * body's `[(columnWidths)]`, otherwise the pinned track ignores the resized
+     * width (the handle still reports `aria-valuenow` but the column won't move).
      */
     width = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /**
+     * Static class(es) applied to this column's stamped `[forTableHeaderCell]`.
+     * `ForTableBody` owns the header cell element, so this is the styling seam a
+     * consumer (or wrapping design system) uses to reach it without scoping CSS to
+     * the body's template internals. `null` (default) adds no class attribute.
+     */
+    headerClass = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Static class(es) applied to this column's stamped `[forTableCell]` on every
+     * data **and** placeholder row. The styling seam for the cell box itself
+     * (padding, truncation, alignment, sticky backgrounds) that `ForTableBody`
+     * owns. Per-datum row styling is out of scope. `null` (default) adds no class
+     * attribute.
+     */
+    cellClass = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellClass" }] : /* istanbul ignore next */ []));
     /** The column's header-cell template. */
     header = contentChild.required(ForHeaderCell);
     /** The column's data-cell template. */
@@ -949,12 +1064,12 @@ class ForColumnDef {
     placeholderCell = contentChild(ForPlaceholderCell, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholderCell" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForColumnDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.2", type: ForColumnDef, isStandalone: true, selector: "[forColumnDef]", inputs: { name: { classPropertyName: "name", publicName: "forColumnDef", isSignal: true, isRequired: true, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizeAriaLabel: { classPropertyName: "resizeAriaLabel", publicName: "resizeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "header", first: true, predicate: ForHeaderCell, descendants: true, isSignal: true }, { propertyName: "dataCell", first: true, predicate: ForDataCell, descendants: true, isSignal: true }, { propertyName: "placeholderCell", first: true, predicate: ForPlaceholderCell, descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.2", type: ForColumnDef, isStandalone: true, selector: "[forColumnDef]", inputs: { name: { classPropertyName: "name", publicName: "forColumnDef", isSignal: true, isRequired: true, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, resizeAriaLabel: { classPropertyName: "resizeAriaLabel", publicName: "resizeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, resizeMin: { classPropertyName: "resizeMin", publicName: "resizeMin", isSignal: true, isRequired: false, transformFunction: null }, resizeMax: { classPropertyName: "resizeMax", publicName: "resizeMax", isSignal: true, isRequired: false, transformFunction: null }, resizeStep: { classPropertyName: "resizeStep", publicName: "resizeStep", isSignal: true, isRequired: false, transformFunction: null }, autoFit: { classPropertyName: "autoFit", publicName: "autoFit", isSignal: true, isRequired: false, transformFunction: null }, fitIncludesHeader: { classPropertyName: "fitIncludesHeader", publicName: "fitIncludesHeader", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "header", first: true, predicate: ForHeaderCell, descendants: true, isSignal: true }, { propertyName: "dataCell", first: true, predicate: ForDataCell, descendants: true, isSignal: true }, { propertyName: "placeholderCell", first: true, predicate: ForPlaceholderCell, descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForColumnDef, decorators: [{
             type: Directive,
             args: [{ selector: '[forColumnDef]' }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "forColumnDef", required: true }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], resizeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeAriaLabel", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForHeaderCell), { isSignal: true }] }], dataCell: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForDataCell), { isSignal: true }] }], placeholderCell: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForPlaceholderCell), { isSignal: true }] }] } });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "forColumnDef", required: true }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], resizeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeAriaLabel", required: false }] }], resizeMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMin", required: false }] }], resizeMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMax", required: false }] }], resizeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeStep", required: false }] }], autoFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFit", required: false }] }], fitIncludesHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitIncludesHeader", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], headerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerClass", required: false }] }], cellClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellClass", required: false }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForHeaderCell), { isSignal: true }] }], dataCell: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForDataCell), { isSignal: true }] }], placeholderCell: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForPlaceholderCell), { isSignal: true }] }] } });
 
 /**
  * Marks the content template of a full-span row variant. Place on an
@@ -970,6 +1085,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  *
  * Bind `[forRowCellRow]` to the same array passed to `ForTableBody`'s `rows` to
  * type `let-row` — the input is read only for type inference, never at runtime.
+ *
+ * When the row type is a discriminated union, also bind `[forRowCellWhen]` to
+ * the same type guard used on the def's `[when]` so `let-row` is narrowed to the
+ * matched variant member (`V`) instead of staying the full union.
  */
 class ForRowCell {
     /** The captured row-variant template, typed with `ForDataCellContext<T>`. */
@@ -980,31 +1099,48 @@ class ForRowCell {
      * directive never touches its value.
      */
     rowType = input([], { ...(ngDevMode ? { debugName: "rowType" } : /* istanbul ignore next */ {}), alias: 'forRowCellRow' });
+    /**
+     * Type-inference hint: bind the same type guard used on this def's `[when]`
+     * so `let-row` is narrowed to the matched variant member (`V`). Read only by
+     * the compiler; the directive never touches its value. Omitting it leaves
+     * `let-row` typed as the full `T`.
+     */
+    narrowType = input(null, { ...(ngDevMode ? { debugName: "narrowType" } : /* istanbul ignore next */ {}), alias: 'forRowCellWhen' });
     /** Narrows the template context type for `let-row` under strict template checking. */
     static ngTemplateContextGuard(_directive, _context) {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForRowCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForRowCell, isStandalone: true, selector: "ng-template[forRowCell]", inputs: { rowType: { classPropertyName: "rowType", publicName: "forRowCellRow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForRowCell, isStandalone: true, selector: "ng-template[forRowCell]", inputs: { rowType: { classPropertyName: "rowType", publicName: "forRowCellRow", isSignal: true, isRequired: false, transformFunction: null }, narrowType: { classPropertyName: "narrowType", publicName: "forRowCellWhen", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForRowCell, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[forRowCell]' }]
-        }], propDecorators: { rowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "forRowCellRow", required: false }] }] } });
+        }], propDecorators: { rowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "forRowCellRow", required: false }] }], narrowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "forRowCellWhen", required: false }] }] } });
 /**
- * Declarative definition of a full-span row variant for `<for-table-body>`. Place
+ * Declarative definition of a row variant for `<for-table-body>`. Place
  * `[forRowDef]` on an `<ng-container>` alongside the `[forColumnDef]`s and bind a
- * `[when]` predicate; for every datum the predicate matches, `ForTableBody` stamps
- * a row whose single cell spans all columns and renders the `[forRowCell]` template
- * instead of the per-column data cells. This covers group-header rows, section
- * separators, and full-width summary / empty-state rows.
+ * `[when]` predicate; for every datum the predicate matches, `ForTableBody` renders
+ * this variant instead of the per-column data cells. A def comes in one of two
+ * shapes, and must declare **exactly one** of them:
  *
- * The variant row is **presentational**: its spanning cell carries the row's
- * `role` (`gridcell` in grid / treegrid mode) plus `aria-colindex="1"` and
- * `aria-colspan` equal to the column count, but it does not join the roving 2D
- * navigation grid, so arrow-key navigation moves between the regular data cells
- * and steps over variant rows (their `aria-rowindex` still counts them in reading
- * order). Variant rows are also non-selectable.
+ * - **Full-span** (a `[forRowCell]` template): the matched row's single cell spans
+ *   all columns and renders the template — group-header rows, section separators,
+ *   full-width summary / empty-state rows. The spanning cell carries the row's
+ *   `role` (`gridcell` in grid / treegrid mode) plus `aria-colindex="1"` and
+ *   `aria-colspan` equal to the column count, but it does **not** join the roving 2D
+ *   navigation grid (it registers no cell handle), so arrow-key navigation moves
+ *   between the regular data cells and steps over the variant row.
+ * - **Placeholder cells** (the `placeholderCells` flag, no `[forRowCell]`): the
+ *   matched row stamps one cell per displayed column from each column's
+ *   `[forPlaceholderCell]` template — interleaved / trailing skeleton rows for
+ *   infinite-scroll or paginated tables. Unlike the full-span shape these keep the
+ *   roving grid **rectangular** (one cell per column), and the cells are stamped
+ *   disabled so grid-mode arrow navigation steps over them.
+ *
+ * Either way the variant row is **presentational** and **non-selectable** (its
+ * `value` stays `undefined`), while still occupying a row slot and counting towards
+ * `aria-rowindex` / `aria-rowcount` (reading order is preserved).
  *
  * When several `[forRowDef]`s match a datum, the first in DOM order wins. A datum
  * matched by no `[forRowDef]` renders the standard per-column row.
@@ -1015,11 +1151,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  *   <ng-container forColumnDef="name">
  *     <ng-template forHeaderCell>Name</ng-template>
  *     <ng-template forDataCell [forDataCellRow]="rows()" let-row>{{ row.name }}</ng-template>
+ *     <ng-template forPlaceholderCell><span class="skeleton"></span></ng-template>
  *   </ng-container>
  *
+ *   <!-- full-span group header -->
  *   <ng-container forRowDef [when]="isGroupHeader">
  *     <ng-template forRowCell [forRowCellRow]="rows()" let-row>{{ row.group }}</ng-template>
  *   </ng-container>
+ *
+ *   <!-- per-column skeleton rows while the next page loads -->
+ *   <ng-container forRowDef [when]="isPlaceholder" placeholderCells />
  * </for-table-body>
  * ```
  */
@@ -1034,15 +1175,58 @@ class ForRowDef {
      */
     when = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "when" }] : /* istanbul ignore next */ []));
-    /** The variant's full-span content template. */
-    cell = contentChild.required(ForRowCell);
+    /**
+     * The variant's full-span content template. Present for a full-span def; absent
+     * (and unused) when `placeholderCells` is set. A def must declare exactly one of
+     * a `[forRowCell]` template or `placeholderCells` — the body validates this and
+     * throws a `[forty-cdk/table]` error otherwise.
+     */
+    cell = contentChild(ForRowCell, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cell" }] : /* istanbul ignore next */ []));
+    /**
+     * Render this variant's matched rows as **per-column placeholder cells** instead
+     * of a full-span `[forRowCell]`. Set it (the bare `placeholderCells` attribute)
+     * for interleaved / trailing skeleton rows — infinite-scroll or paginated tables
+     * that keep their loaded rows and append placeholder rows while the next page
+     * loads. The body stamps one `[forTableCell]` per displayed column from that
+     * column's `[forPlaceholderCell]` template (an empty cell when the column omits
+     * it), exactly like the `loading` state, but stamps the cells disabled so
+     * grid-mode arrow navigation steps over them and the roving grid stays
+     * rectangular.
+     *
+     * A def must declare **exactly one** of a `[forRowCell]` template or
+     * `placeholderCells`; declaring both or neither throws a `[forty-cdk/table]`
+     * error.
+     */
+    placeholderCells = input(false, { ...(ngDevMode ? { debugName: "placeholderCells" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForRowDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.2", type: ForRowDef, isStandalone: true, selector: "[forRowDef]", inputs: { when: { classPropertyName: "when", publicName: "when", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "cell", first: true, predicate: ForRowCell, descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.2", type: ForRowDef, isStandalone: true, selector: "[forRowDef]", inputs: { when: { classPropertyName: "when", publicName: "when", isSignal: true, isRequired: true, transformFunction: null }, placeholderCells: { classPropertyName: "placeholderCells", publicName: "placeholderCells", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "cell", first: true, predicate: ForRowCell, descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForRowDef, decorators: [{
             type: Directive,
             args: [{ selector: '[forRowDef]' }]
-        }], propDecorators: { when: [{ type: i0.Input, args: [{ isSignal: true, alias: "when", required: true }] }], cell: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForRowCell), { isSignal: true }] }] } });
+        }], propDecorators: { when: [{ type: i0.Input, args: [{ isSignal: true, alias: "when", required: true }] }], cell: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForRowCell), { isSignal: true }] }], placeholderCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderCells", required: false }] }] } });
+
+const INTERACTIVE_DESCENDANT_SELECTOR = 'button, a[href], input, select, textarea, summary, [contenteditable="true"]';
+/**
+ * Whether `event` originated from an interactive element nested inside the row it
+ * is bound to — a consumer-placed `button`, `a[href]`, `input`, `select`,
+ * `textarea`, `summary`, or `contenteditable` descendant of the row host. Resolves
+ * the event target's closest interactive element and reports `true` only when it is
+ * a strict descendant of `event.currentTarget` (the row), so a plain click on cell
+ * text, the gaps between cells, or the row host itself reports `false`. Shared by
+ * the two row-interaction call sites — `ForTableBody`'s whole-row activation and
+ * `ForTableRow`'s selection — so both skip firing for clicks the inner control owns.
+ */
+function eventFromInteractiveDescendant(event) {
+    const target = event.target;
+    const rowEl = event.currentTarget;
+    if (!(target instanceof HTMLElement) || !(rowEl instanceof HTMLElement)) {
+        return false;
+    }
+    const interactive = target.closest(INTERACTIVE_DESCENDANT_SELECTOR);
+    return interactive !== null && interactive !== rowEl && rowEl.contains(interactive);
+}
 
 /**
  * Marks a data cell. The `role` is derived from the root's `mode`: `'cell'` in
@@ -1130,6 +1314,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
+/**
+ * Opt-in **column reordering** for `ForTable`, composed over the drag-drop primitive.
+ *
+ * Apply on the `[forTableHeaderRow]` element. It wraps `[forDropList]` (via
+ * `hostDirectives`) so the header cells become a reorderable list, then translates
+ * drag-drop's generic drop into the table-friendly `columnReorder` output. Mark each
+ * `[forTableHeaderCell]` as `[forDraggable]` with `[dragData]` set to the column name.
+ * On a committed drop (pointer or keyboard) it emits the previous / new index and the
+ * new column-name order; the consumer applies it to their own column array. **It never
+ * reorders columns itself** (BYO-data).
+ *
+ * The wrapped list defaults to `orientation="horizontal"` (a column reorder is always along
+ * the row axis), so no `orientation` binding is needed. Bind `orientation="vertical"` to
+ * override for the rare case.
+ *
+ * In `mode="grid"` / `mode="treegrid"` the draggable header cells join the table's composite
+ * roving grid as its first row, so a sortable + column-reorderable grid keeps the **single
+ * tab stop** the WAI-ARIA Data Grid pattern calls for: `Tab` enters the grid once, Arrow keys
+ * cross between header and body, and `Space` on a header cell lifts it for keyboard reordering.
+ * It hands its drop-list roving to the grid via `FOR_DROP_LIST_ROVING_DELEGATE` and routes idle
+ * header navigation through the table's grid keyboard handler.
+ *
+ * When a header cell is both sortable (`[forTableSortHeader]`) and reorderable, the two
+ * keyboard activations split along WAI-ARIA lines so a single key never both sorts and lifts:
+ * `Space` lifts the column, `Enter` toggles the sort. The split is enforced via a
+ * `FOR_DRAGGABLE_LIFT_GUARD` that defers `Enter` to the sort header on cells carrying the
+ * `data-sortable` marker — detected by DOM marker, so `forty-cdk/drag-drop` needs no table
+ * import. A reorder-only header (no sort header) still lifts on both `Enter` and `Space`.
+ *
+ * @example
+ * ```html
+ * <div forTableHeaderRow forTableColumnReorder (columnReorder)="columns.set($event.columns)">
+ *   @for (col of columns(); track col) {
+ *     <div forTableHeaderCell [name]="col" forDraggable [dragData]="col">{{ col }}</div>
+ *   }
+ * </div>
+ * ```
+ */
+class ForTableColumnReorder {
+    ctx = injectTableContext('ForTableColumnReorder');
+    #list = inject(ForDropList);
+    #host = inject(ElementRef).nativeElement;
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /**
+     * Fires once per committed reorder gesture (pointer drop or keyboard drop) with the
+     * previous / new column index and the full column-name order after the move.
+     */
+    columnReorder = output();
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        const sub = this.#list.dragDrop.subscribe((event) => this.#emit(event));
+        destroyRef.onDestroy(() => sub.unsubscribe());
+        if (this.#isBrowser) {
+            const onCaptureKeydown = (event) => this.#onCaptureKeydown(event);
+            this.#host.addEventListener('keydown', onCaptureKeydown, { capture: true });
+            destroyRef.onDestroy(() => this.#host.removeEventListener('keydown', onCaptureKeydown, { capture: true }));
+        }
+    }
+    /**
+     * When the header row joins the composite grid, intercepts idle (not-lifted) Arrow /
+     * Home / End / Page keys on a draggable header cell in the capture phase and routes them
+     * through the table's grid navigation, then stops propagation so the draggable's own
+     * keydown does not also navigate. Space / Enter (and every key while a keyboard drag is in
+     * progress) fall through untouched, so the draggable still owns the lift / move / drop /
+     * cancel gesture — keeping the header one navigation continuum with the body while
+     * preserving column reordering.
+     */
+    #onCaptureKeydown(event) {
+        if (!this.ctx.headerParticipatesInRoving()) {
+            return;
+        }
+        const target = event.target;
+        if (!(target instanceof HTMLElement)) {
+            return;
+        }
+        if (!this.#list.items().some((handle) => handle.host === target) ||
+            this.#list.isLifted(target)) {
+            return;
+        }
+        if (this.ctx.handleHeaderCellKeydown(event, target)) {
+            event.stopPropagation();
+        }
+    }
+    #emit(event) {
+        const names = this.#list.items().map((handle) => String(handle.data()));
+        const columns = moveItemInArray(names, event.previousIndex, event.currentIndex);
+        this.columnReorder.emit({ from: event.previousIndex, to: event.currentIndex, columns });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableColumnReorder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTableColumnReorder, isStandalone: true, selector: "[forTableColumnReorder]", outputs: { columnReorder: "columnReorder" }, providers: [
+            { provide: FOR_DROP_LIST_DEFAULT_ORIENTATION, useValue: 'horizontal' },
+            {
+                provide: FOR_DROP_LIST_ROVING_DELEGATE,
+                useFactory: () => {
+                    const ctx = injectTableContext('ForTableColumnReorder');
+                    return {
+                        itemTabindex: (el) => ctx.headerParticipatesInRoving() ? ctx.headerCellTabIndex(el) : null,
+                        isItemHighlighted: (el) => ctx.headerParticipatesInRoving() ? ctx.isCellHighlighted(el) : null,
+                    };
+                },
+            },
+            {
+                provide: FOR_DRAGGABLE_LIFT_GUARD,
+                useValue: {
+                    canLiftOnKey: (event, host) => !(event.key === 'Enter' && hostHasSortActivation(host)),
+                },
+            },
+        ], exportAs: ["forTableColumnReorder"], hostDirectives: [{ directive: i1.ForDropList, inputs: ["orientation", "orientation", "dir", "dir", "disabled", "disabled", "autoScroll", "autoScroll", "animateReorder", "animateReorder", "liveSort", "liveSort", "boundary", "boundary", "lockAxis", "lockAxis"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableColumnReorder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTableColumnReorder]',
+                    exportAs: 'forTableColumnReorder',
+                    providers: [
+                        { provide: FOR_DROP_LIST_DEFAULT_ORIENTATION, useValue: 'horizontal' },
+                        {
+                            provide: FOR_DROP_LIST_ROVING_DELEGATE,
+                            useFactory: () => {
+                                const ctx = injectTableContext('ForTableColumnReorder');
+                                return {
+                                    itemTabindex: (el) => ctx.headerParticipatesInRoving() ? ctx.headerCellTabIndex(el) : null,
+                                    isItemHighlighted: (el) => ctx.headerParticipatesInRoving() ? ctx.isCellHighlighted(el) : null,
+                                };
+                            },
+                        },
+                        {
+                            provide: FOR_DRAGGABLE_LIFT_GUARD,
+                            useValue: {
+                                canLiftOnKey: (event, host) => !(event.key === 'Enter' && hostHasSortActivation(host)),
+                            },
+                        },
+                    ],
+                    hostDirectives: [
+                        {
+                            directive: ForDropList,
+                            inputs: [
+                                'orientation',
+                                'dir',
+                                'disabled',
+                                'autoScroll',
+                                'animateReorder',
+                                'liveSort',
+                                'boundary',
+                                'lockAxis',
+                            ],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { columnReorder: [{ type: i0.Output, args: ["columnReorder"] }] } });
+
 /**
  * Marks a header cell (`role="columnheader"`). Requires a `name` input that
  * identifies the column — reflected as `data-column` for later phases (sort,
@@ -1731,7 +2066,9 @@ class ForTableRow {
     }
     onClick(event) {
         const v = this.value();
-        if (this.ctx.selectionMode() === 'none' || v === undefined) {
+        if (this.ctx.selectionMode() === 'none' ||
+            v === undefined ||
+            eventFromInteractiveDescendant(event)) {
             return;
         }
         this.ctx.selectRow(v, {
@@ -1764,6 +2101,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], virtualIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualIndex", required: false }] }] } });
 
+/**
+ * Applies a per-row attribute map to a `<for-table-body>` stamped row. The body
+ * places it on every stamped row so its `rowAttrs` hook can set or remove
+ * arbitrary attributes derived from the row datum, without the body owning a
+ * static list of attribute names. A key mapped to `null` (or dropped from a
+ * later map) removes that attribute. Internal to `forty-cdk/table`.
+ */
+class ForTableRowAttrs {
+    #host = inject(ElementRef).nativeElement;
+    /** The attribute map to reflect on the row host, or `undefined` for none. */
+    attrs = input(undefined, { ...(ngDevMode ? { debugName: "attrs" } : /* istanbul ignore next */ {}), alias: 'forTableRowAttrs' });
+    constructor() {
+        let applied = [];
+        effect(() => {
+            const next = this.attrs() ?? {};
+            for (const key of applied) {
+                if (!(key in next)) {
+                    this.#host.removeAttribute(key);
+                }
+            }
+            const keys = [];
+            for (const [key, value] of Object.entries(next)) {
+                if (value == null) {
+                    this.#host.removeAttribute(key);
+                }
+                else {
+                    this.#host.setAttribute(key, value);
+                }
+                keys.push(key);
+            }
+            applied = keys;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableRowAttrs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTableRowAttrs, isStandalone: true, selector: "[forTableRowAttrs]", inputs: { attrs: { classPropertyName: "attrs", publicName: "forTableRowAttrs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableRowAttrs, decorators: [{
+            type: Directive,
+            args: [{ selector: '[forTableRowAttrs]' }]
+        }], ctorParameters: () => [], propDecorators: { attrs: [{ type: i0.Input, args: [{ isSignal: true, alias: "forTableRowAttrs", required: false }] }] } });
+
 /**
  * Turns a `[forTableHeaderCell]` into a sortable affordance that emits `aria-sort`
  * and fires `sortChange` on activation (click, Enter, Space). The directive is
@@ -1913,13 +2291,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         }], ctorParameters: () => [], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }, { type: i0.Output, args: ["directionChange"] }], disableClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClear", required: false }] }], firstClickDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstClickDirection", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
 
 /**
- * Ergonomic declarative renderer for `[forTable]` in `<div role>` grid mode.
+ * Ergonomic declarative renderer for the columns of a `[forTable]`.
  * Place `<for-table-body>` inside a `[forTable]` element and declare one
  * `[forColumnDef]` per column; the body harvests the defs and stamps the header
  * row and one data row per item out of the raw cell primitives, so a column is
  * authored in a single block instead of being smeared across header, data, and
  * placeholder rows.
  *
+ * **Supported modes: `table` and `grid`.** Nothing in the body is grid-specific
+ * — it derives each stamped cell's role from the table `mode` (`cell` in
+ * `table`, `gridcell` in `grid`) and applies no mode guard. Choose `mode="grid"`
+ * for interactive cells (roving 2D navigation, cell widgets, cell-entry); choose
+ * the default `mode="table"` for read-only or whole-row navigation lists, where
+ * `role="grid"` would announce an interaction model the list does not have. The
+ * table-mode row-interaction companion feature (whole-row activate / context
+ * menu) is tracked in
+ * [#1349](https://github.com/tutkli/forty-cdk/issues/1349). `mode="treegrid"` is
+ * out of scope — the body stamps no expansion affordances.
+ *
  * It owns only the grid **structure** — it applies `display: grid` and the
  * derived `grid-template-columns` track (from each def's `width` and the
  * published `--for-table-col-<name>-width` resize var) to the header row and
@@ -1931,33 +2320,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * raw `[forTableCell]` / `[forTableHeaderCell]` primitives directly.
  *
  * Sort and resize affordances are auto-wired from the per-column `sortable` /
- * `resizable` flags and surfaced through `sortChange` / `resizeCommit`; the sort
- * and width descriptors stay consumer-applied (BYO-data). Selection stays
- * consumer-placed: drop `[forTableRowSelector]` / `[forTableSelectAll]` into the
- * cell templates and set `rowKey` so each row carries a selection identity.
+ * `resizable` flags. Sort stays consumer-applied (BYO-data): the body derives each
+ * header's `aria-sort` from `sort` and re-emits activation through `sortChange`.
+ * Resize width state can be owned by the body instead — `[(columnWidths)]` seeds
+ * each `resizable` handle's width (keyed by column name) and tracks its live
+ * changes, so the resized track drives itself with no per-consumer plumbing; each
+ * `resizable` column is tuned per def via `resizeMin` / `resizeMax` / `resizeStep`
+ * / `autoFit` / `fitIncludesHeader`, and gesture-end commits still surface through
+ * `resizeCommit`. Selection stays consumer-placed: drop `[forTableRowSelector]` /
+ * `[forTableSelectAll]` into the cell templates and set `rowKey` so each row
+ * carries a selection identity.
  *
  * **Virtualization is transparent.** Adding `[forTableVirtualized]` to the same
  * `[forTable]` element switches the body to windowed rendering automatically:
  * it reads the published window off the table context (no cross-entry import),
  * renders only the visible slice indexed into `rows`, sizes its rowgroup to the
  * full scroll height, and absolutely positions each row at its offset. The
- * consumer passes the whole dataset to `rows` and sets `[rowCount]` on
- * `[forTable]` — no `#v` reference, manual sizer, `@for` window, or
- * `[virtualIndex]` binding. Fixed-size rows only for now (drive row height in
- * CSS); measured / dynamic row heights stay on the raw `[forTableRow]` path.
+ * consumer passes the whole dataset to `rows` — the body derives the true total
+ * from its length, so `[rowCount]` on `[forTable]` is unnecessary (bind it only
+ * for a server-known total larger than the loaded rows). No `#v` reference,
+ * manual sizer, `@for` window, or `[virtualIndex]` binding. Rows are fixed-size
+ * by default (drive row height in CSS); set `measureRows` for measured /
+ * variable row heights (denser variant rows, group separators) — the body feeds
+ * each rendered row's real height back to the virtualizer so the window stays
+ * aligned after scroll.
  *
  * **Row variants.** Declare one or more `[forRowDef]` alongside the columns to
- * render a full-span row for the data they match (group headers, section
- * separators, summary / empty-state rows). For each datum the body picks the
- * first `[forRowDef]` whose `[when]` predicate returns `true` and stamps a row
- * whose single cell spans every column and renders the `[forRowCell]` template;
- * unmatched data renders the standard per-column row. Variant rows are
- * presentational — their spanning cell stays out of the roving 2D navigation
- * grid (arrow keys step over them) and they are non-selectable — but they still
- * occupy a row slot and count towards `aria-rowindex` / `aria-rowcount`.
+ * render a variant row for the data they match. For each datum the body picks the
+ * first `[forRowDef]` whose `[when]` predicate returns `true`; unmatched data
+ * renders the standard per-column row. Each def declares one of two shapes: a
+ * `[forRowCell]` template stamps a **full-span** row (group headers, section
+ * separators, summary / empty-state rows) whose single cell spans every column;
+ * the `placeholderCells` flag stamps **per-column placeholder cells** from each
+ * column's `[forPlaceholderCell]` (interleaved / trailing skeleton rows for
+ * infinite scroll). Either way variant rows are presentational and
+ * non-selectable, and still count towards `aria-rowindex` / `aria-rowcount`. A
+ * full-span cell stays out of the roving 2D navigation grid (registers no cell
+ * handle, so arrow keys step over the row); placeholder cells keep the grid
+ * rectangular (one cell per column) but are stamped disabled so grid navigation
+ * steps over them.
  */
 class ForTableBody {
     #ctx = injectTableContext('ForTableBody');
+    rowEls = viewChildren('rowEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowEls" }] : /* istanbul ignore next */ []));
+    #measuredAt = new WeakMap();
+    constructor() {
+        const bodyRowCount = computed(() => this.rows().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bodyRowCount" }] : /* istanbul ignore next */ []));
+        this.#ctx.registerBodyRowCount(bodyRowCount);
+        inject(DestroyRef).onDestroy(() => this.#ctx.registerBodyRowCount(null));
+        afterEveryRender(() => {
+            const window = this.#ctx.virtualWindow();
+            if (!window || !this.measureRows()) {
+                return;
+            }
+            for (const ref of this.rowEls()) {
+                const el = ref.nativeElement;
+                const index = el.getAttribute('data-index');
+                if (index === null || this.#measuredAt.get(el) === index) {
+                    continue;
+                }
+                this.#measuredAt.set(el, index);
+                window.measureRow(el);
+            }
+        });
+    }
     /** The rows to render — already sorted / filtered / paged by the consumer (BYO-data). */
     rows = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
@@ -1986,16 +2414,108 @@ class ForTableBody {
     /** Number of placeholder rows rendered while `loading`. Default `3`. */
     placeholderRows = input(3, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholderRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Opt in to **measured (variable) row heights** under `[forTableVirtualized]`.
+     * When set, the body measures each stamped row after render and feeds its real
+     * height back to the virtualizer, which replaces the `estimateRowSize` estimate
+     * and re-aligns the offsets of the rows below — so a window mixing row shapes
+     * (denser variant rows, group separators) stays contiguous after scroll.
+     *
+     * Off by default: a uniform-height table keeps the pure `estimateRowSize` fast
+     * path with no per-row measurement work. Has no effect without
+     * `[forTableVirtualized]` (there is no window to measure against).
+     */
+    measureRows = input(false, { ...(ngDevMode ? { debugName: "measureRows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Fires when a `sortable` header is activated; forwarded from the internal `[forTableSortHeader]`. */
     sortChange = output();
     /** Fires when a `resizable` column commits a width; forwarded from the internal `[forTableColumnResizer]`. */
     resizeCommit = output();
+    /**
+     * Fires once per committed column reorder gesture (pointer drop or keyboard drop),
+     * forwarded unchanged from the internal `[forTableColumnReorder]`. Its `columns`
+     * lists the reorderable columns in their new order (equal to the full displayed
+     * order when every displayed column is `reorderable`); apply it to your own column
+     * order and feed it back through `displayedColumns` (BYO-data). Only present when at
+     * least one `[forColumnDef]` is `reorderable`.
+     */
+    columnReorder = output();
+    /**
+     * Two-way map of column widths (px), keyed by column `name`. It seeds each
+     * `resizable` column's stamped handle `[width]` — so the `role="separator"`
+     * handle exposes `aria-valuenow` from the first render and the column's grid
+     * track picks up the seeded width immediately — and is updated immutably on
+     * every live width change the handle reports (pointer drag, keyboard resize,
+     * auto-fit). Only `resizable` columns participate; other names are ignored.
+     *
+     * The map is JSON-serializable, so persisting a user's column layout is
+     * `[(columnWidths)]` plus one storage write. Together with `[displayedColumns]`
+     * and `[sort]` it makes the full user-configurable table state three bindings.
+     * Its implicit `columnWidthsChange` fires only on handle-driven updates, not on
+     * consumer writes through `[(columnWidths)]`.
+     */
+    columnWidths = model({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+    /**
+     * Opt-in whole-row interaction for **navigation lists**, active only in the
+     * default `mode="table"`. When set, each data row becomes a focusable tab stop
+     * (`tabindex="0"`) and a pointer click or `Enter` emits `rowActivate`, while a
+     * `contextmenu` (right-click or the context-menu key) emits `rowContextMenu`.
+     * Full-span `[forRowDef]` variant rows stay non-interactive. Ignored in `grid`
+     * / `treegrid` mode, where roving 2D navigation and cell-entry own the keyboard
+     * and whole-row activation would conflict.
+     *
+     * Interactive content inside a data cell owns its own events: a click or
+     * `Enter` originating from a `button`, `a[href]`, `input`, `select`,
+     * `textarea`, `summary`, or `contenteditable` descendant does **not** emit
+     * `rowActivate`, and its native default action is left intact — a trailing
+     * per-row action button keeps working, and `Enter` on it is not
+     * `preventDefault`ed. The row still activates from anywhere else: cell text,
+     * the gaps between cells, or the focused row host itself. `rowContextMenu` is
+     * deliberately unguarded — a right-click anywhere on the row, including over an
+     * inner control, still offers the row's context menu, matching native lists.
+     */
+    interactiveRows = input(false, { ...(ngDevMode ? { debugName: "interactiveRows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Fires when a data row is activated by a pointer click or `Enter`, carrying
+     * the row datum, its dataset index, and the originating event. Requires
+     * `interactiveRows` and `mode="table"`.
+     */
+    rowActivate = output();
+    /**
+     * Fires when a data row receives a `contextmenu` event (right-click or the
+     * context-menu key), carrying the row datum, its dataset index, and the event —
+     * position your own overlay from it. Requires `interactiveRows` and
+     * `mode="table"`.
+     */
+    rowContextMenu = output();
+    /**
+     * Per-row class hook, applied to data **and** variant rows in **every** mode.
+     * Receives the row datum and its 0-based dataset index and returns the class(es)
+     * to apply — a string, a `{ className: boolean }` map, or `undefined` for none.
+     * This is the only seam for styling a body-owned row from its datum (an
+     * "active" / "menu-open" highlight, error or dimmed rows). Evaluated on every
+     * change-detection pass, so keep it cheap and free of side effects.
+     */
+    rowClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-row attribute hook, applied to data **and** variant rows in **every**
+     * mode. Receives the row datum and its 0-based dataset index and returns an
+     * attribute map to reflect on the row host; a key mapped to `null` (or dropped
+     * from a later map) removes that attribute. Evaluated on every change-detection
+     * pass, so keep it cheap and free of side effects.
+     */
+    rowAttrs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rowAttrs" }] : /* istanbul ignore next */ []));
     /** Declared column definitions, in DOM order. */
     columns = contentChildren(ForColumnDef, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     /** Declared full-span row variants, in DOM order (first match wins per datum). */
     rowDefs = contentChildren(ForRowDef, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rowDefs" }] : /* istanbul ignore next */ []));
+    /** The optional shared drag placeholder for reorderable columns, or `undefined`. */
+    columnDragPlaceholder = contentChild(ForColumnDragPlaceholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnDragPlaceholder" }] : /* istanbul ignore next */ []));
     /** The role a stamped cell carries: `'cell'` in `table` mode, `'gridcell'` otherwise. */
     cellRole = computed(() => this.#ctx.mode() === 'table' ? 'cell' : 'gridcell', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cellRole" }] : /* istanbul ignore next */ []));
@@ -2010,6 +2530,13 @@ class ForTableBody {
         return order.map((name) => byName.get(name)).filter((def) => def != null);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * `true` when at least one displayed column is `reorderable`, switching the stamped
+     * header row to the drag-reorder path (`[forTableColumnReorder]` + per-cell
+     * `[forDraggable]`). A body with no reorderable column keeps the plain header row.
+     */
+    hasReorderable = computed(() => this.orderedColumns().some((col) => col.reorderable()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasReorderable" }] : /* istanbul ignore next */ []));
     /**
      * The derived `grid-template-columns` track, applied to the header row and every
      * data row and exposed for consumers who want to bind it elsewhere. Each column
@@ -2029,6 +2556,9 @@ class ForTableBody {
         const data = this.rows();
         const key = this.rowKey();
         const variants = this.rowDefs();
+        for (const def of variants) {
+            this.#assertRowDefConfig(def);
+        }
         const matchVariant = (datum, index) => variants.find((def) => def.when()(datum, index)) ?? null;
         if (window) {
             const out = [];
@@ -2066,6 +2596,14 @@ class ForTableBody {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "renderRows" }] : /* istanbul ignore next */ []));
+    /** Enforces that each `[forRowDef]` declares exactly one of `[forRowCell]` / `placeholderCells`. */
+    #assertRowDefConfig(def) {
+        const hasCell = def.cell() != null;
+        const hasPlaceholder = def.placeholderCells();
+        if (hasCell === hasPlaceholder) {
+            throw new Error(`[forty-cdk/table] A [forRowDef] must declare exactly one of a [forRowCell] template or the placeholderCells flag (this def declares ${hasCell ? 'both' : 'neither'}).`);
+        }
+    }
     /** Full scroll height (px) applied to the rowgroup when virtualized, else `null` (natural height). */
     sizerHeight = computed(() => {
         const window = this.#ctx.virtualWindow();
@@ -2079,37 +2617,163 @@ class ForTableBody {
         const descriptor = this.sort();
         return descriptor && descriptor.column === column ? descriptor.direction : 'none';
     }
+    /** Whether whole-row interaction is active: opted in via `interactiveRows` and in `table` mode. */
+    rowsInteractive = computed(() => this.interactiveRows() && this.#ctx.mode() === 'table', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowsInteractive" }] : /* istanbul ignore next */ []));
+    /** The `tabindex` for a stamped row: `0` for an interactive data row, `null` otherwise. */
+    rowTabIndex(row) {
+        return this.rowsInteractive() && !row.variant ? 0 : null;
+    }
+    /** Resolves the `rowClass` hook for a stamped row, or `undefined` when unset. */
+    rowClassFor(row) {
+        return this.rowClass()?.(row.datum, row.index);
+    }
+    /** Resolves the `rowAttrs` hook for a stamped row, or `undefined` when unset. */
+    rowAttrsFor(row) {
+        return this.rowAttrs()?.(row.datum, row.index);
+    }
+    /**
+     * Folds a stamped resizer's live width update into the `[(columnWidths)]` map
+     * immutably, keyed by the column name. Ignores the resizer's initial unset
+     * (`undefined`) emission and no-ops when the width is unchanged, so seeding the
+     * handle from `columnWidths` never loops back into a redundant model write.
+     */
+    onColumnWidthChange(column, width) {
+        if (width === undefined) {
+            return;
+        }
+        const current = this.columnWidths();
+        if (current[column] === width) {
+            return;
+        }
+        this.columnWidths.set({ ...current, [column]: width });
+    }
+    onRowClick(row, event) {
+        this.#activateRow(row, event);
+    }
+    onRowEnter(row, event) {
+        if (this.#activateRow(row, event)) {
+            event.preventDefault();
+        }
+    }
+    onRowContextMenu(row, event) {
+        if (!this.rowsInteractive() || row.variant) {
+            return;
+        }
+        this.rowContextMenu.emit({ row: row.datum, index: row.index, event });
+    }
+    #activateRow(row, event) {
+        if (!this.rowsInteractive() || row.variant || eventFromInteractiveDescendant(event)) {
+            return false;
+        }
+        this.rowActivate.emit({ row: row.datum, index: row.index, event });
+        return true;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ForTableBody, isStandalone: true, selector: "for-table-body", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholderRows: { classPropertyName: "placeholderRows", publicName: "placeholderRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", resizeCommit: "resizeCommit" }, host: { styleAttribute: "display: contents" }, queries: [{ propertyName: "columns", predicate: ForColumnDef, isSignal: true }, { propertyName: "rowDefs", predicate: ForRowDef, isSignal: true }], ngImport: i0, template: `
-    <div forTableHeaderRow [style.display]="'grid'" [style.grid-template-columns]="track()">
-      @for (col of orderedColumns(); track col.name()) {
-        <div
-          #headerCell="forTableHeaderCell"
-          forTableHeaderCell
-          [name]="col.name()"
-          [sticky]="col.sticky()"
-          forTableSortHeader
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ForTableBody, isStandalone: true, selector: "for-table-body", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholderRows: { classPropertyName: "placeholderRows", publicName: "placeholderRows", isSignal: true, isRequired: false, transformFunction: null }, measureRows: { classPropertyName: "measureRows", publicName: "measureRows", isSignal: true, isRequired: false, transformFunction: null }, columnWidths: { classPropertyName: "columnWidths", publicName: "columnWidths", isSignal: true, isRequired: false, transformFunction: null }, interactiveRows: { classPropertyName: "interactiveRows", publicName: "interactiveRows", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, rowAttrs: { classPropertyName: "rowAttrs", publicName: "rowAttrs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", resizeCommit: "resizeCommit", columnReorder: "columnReorder", columnWidths: "columnWidthsChange", rowActivate: "rowActivate", rowContextMenu: "rowContextMenu" }, host: { styleAttribute: "display: contents" }, queries: [{ propertyName: "columns", predicate: ForColumnDef, isSignal: true }, { propertyName: "rowDefs", predicate: ForRowDef, isSignal: true }, { propertyName: "columnDragPlaceholder", first: true, predicate: ForColumnDragPlaceholder, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "rowEls", predicate: ["rowEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #headerCellContent let-col let-cell="cell">
+      <ng-container
+        [ngTemplateOutlet]="col.header().template"
+        [ngTemplateOutletInjector]="cell.injector"
+      />
+      @if (col.resizable()) {
+        <button
+          forTableColumnResizer
           [column]="col.name()"
-          [sortable]="col.sortable()"
-          [direction]="directionFor(col.name())"
-          (sortChange)="sortChange.emit($event)"
-        >
-          <ng-container
-            [ngTemplateOutlet]="col.header().template"
-            [ngTemplateOutletInjector]="headerCell.injector"
-          />
-          @if (col.resizable()) {
-            <button
-              forTableColumnResizer
-              autoFit
+          [width]="columnWidths()[col.name()]"
+          [min]="col.resizeMin()"
+          [max]="col.resizeMax()"
+          [step]="col.resizeStep()"
+          [autoFit]="col.autoFit()"
+          [fitIncludesHeader]="col.fitIncludesHeader()"
+          [attr.aria-label]="col.resizeAriaLabel()"
+          (widthChange)="onColumnWidthChange(col.name(), $event)"
+          (resizeCommit)="resizeCommit.emit($event)"
+        ></button>
+      }
+    </ng-template>
+
+    @if (hasReorderable()) {
+      <div
+        forTableHeaderRow
+        forTableColumnReorder
+        [style.display]="'grid'"
+        [style.grid-template-columns]="track()"
+        (columnReorder)="columnReorder.emit($event)"
+      >
+        @for (col of orderedColumns(); track col.name()) {
+          @if (col.reorderable()) {
+            <div
+              #headerCell="forTableHeaderCell"
+              forTableHeaderCell
+              [name]="col.name()"
+              [sticky]="col.sticky()"
+              [class]="col.headerClass()"
+              forTableSortHeader
+              [column]="col.name()"
+              [sortable]="col.sortable()"
+              [direction]="directionFor(col.name())"
+              (sortChange)="sortChange.emit($event)"
+              forDraggable
+              [dragData]="col.name()"
+            >
+              <ng-container
+                [ngTemplateOutlet]="headerCellContent"
+                [ngTemplateOutletInjector]="headerCell.injector"
+                [ngTemplateOutletContext]="{ $implicit: col, cell: headerCell }"
+              />
+              @if (columnDragPlaceholder(); as placeholder) {
+                <ng-template forDragPlaceholder>
+                  <ng-container [ngTemplateOutlet]="placeholder.template" />
+                </ng-template>
+              }
+            </div>
+          } @else {
+            <div
+              #headerCell="forTableHeaderCell"
+              forTableHeaderCell
+              [name]="col.name()"
+              [sticky]="col.sticky()"
+              [class]="col.headerClass()"
+              forTableSortHeader
               [column]="col.name()"
-              [attr.aria-label]="col.resizeAriaLabel()"
-              (resizeCommit)="resizeCommit.emit($event)"
-            ></button>
+              [sortable]="col.sortable()"
+              [direction]="directionFor(col.name())"
+              (sortChange)="sortChange.emit($event)"
+            >
+              <ng-container
+                [ngTemplateOutlet]="headerCellContent"
+                [ngTemplateOutletInjector]="headerCell.injector"
+                [ngTemplateOutletContext]="{ $implicit: col, cell: headerCell }"
+              />
+            </div>
           }
-        </div>
-      }
-    </div>
+        }
+      </div>
+    } @else {
+      <div forTableHeaderRow [style.display]="'grid'" [style.grid-template-columns]="track()">
+        @for (col of orderedColumns(); track col.name()) {
+          <div
+            #headerCell="forTableHeaderCell"
+            forTableHeaderCell
+            [name]="col.name()"
+            [sticky]="col.sticky()"
+            [class]="col.headerClass()"
+            forTableSortHeader
+            [column]="col.name()"
+            [sortable]="col.sortable()"
+            [direction]="directionFor(col.name())"
+            (sortChange)="sortChange.emit($event)"
+          >
+            <ng-container
+              [ngTemplateOutlet]="headerCellContent"
+              [ngTemplateOutletInjector]="headerCell.injector"
+              [ngTemplateOutletContext]="{ $implicit: col, cell: headerCell }"
+            />
+          </div>
+        }
+      </div>
+    }
     <div
       role="rowgroup"
       [style.position]="sizerHeight() !== null ? 'relative' : null"
@@ -2119,7 +2783,13 @@ class ForTableBody {
         @for (placeholder of placeholderRange(); track placeholder) {
           <div forTableRow [style.display]="'grid'" [style.grid-template-columns]="track()">
             @for (col of orderedColumns(); track col.name()) {
-              <div #cell="forTableCell" forTableCell [name]="col.name()" [sticky]="col.sticky()">
+              <div
+                #cell="forTableCell"
+                forTableCell
+                [name]="col.name()"
+                [sticky]="col.sticky()"
+                [class]="col.cellClass()"
+              >
                 @if (col.placeholderCell(); as placeholderCell) {
                   <ng-container
                     [ngTemplateOutlet]="placeholderCell.template"
@@ -2134,34 +2804,67 @@ class ForTableBody {
         @for (r of renderRows(); track r.key) {
           <div
             #rowRef="forTableRow"
+            #rowEl
             forTableRow
             [value]="r.value"
             [virtualIndex]="r.virtualIndex"
             [attr.data-index]="r.virtualIndex"
+            [attr.tabindex]="rowTabIndex(r)"
+            [class]="rowClassFor(r)"
+            [forTableRowAttrs]="rowAttrsFor(r)"
             [style.display]="'grid'"
             [style.grid-template-columns]="track()"
             [style.position]="r.start !== null ? 'absolute' : null"
             [style.left]="r.start !== null ? '0' : null"
             [style.right]="r.start !== null ? '0' : null"
             [style.transform]="r.start !== null ? 'translateY(' + r.start + 'px)' : null"
+            (click)="onRowClick(r, $event)"
+            (keydown.enter)="onRowEnter(r, $event)"
+            (contextmenu)="onRowContextMenu(r, $event)"
           >
             @if (r.variant; as variant) {
-              <div
-                [attr.role]="cellRole()"
-                [attr.aria-colindex]="1"
-                [attr.aria-colspan]="orderedColumns().length"
-                [attr.data-row-variant]="''"
-                [style.grid-column]="'1 / -1'"
-              >
-                <ng-container
-                  [ngTemplateOutlet]="variant.cell().template"
-                  [ngTemplateOutletInjector]="rowRef.injector"
-                  [ngTemplateOutletContext]="{ $implicit: r.datum, index: r.index }"
-                />
-              </div>
+              @if (variant.placeholderCells()) {
+                @for (col of orderedColumns(); track col.name()) {
+                  <div
+                    #cell="forTableCell"
+                    forTableCell
+                    disabled
+                    [name]="col.name()"
+                    [sticky]="col.sticky()"
+                    [class]="col.cellClass()"
+                  >
+                    @if (col.placeholderCell(); as placeholderCell) {
+                      <ng-container
+                        [ngTemplateOutlet]="placeholderCell.template"
+                        [ngTemplateOutletInjector]="cell.injector"
+                      />
+                    }
+                  </div>
+                }
+              } @else {
+                <div
+                  [attr.role]="cellRole()"
+                  [attr.aria-colindex]="1"
+                  [attr.aria-colspan]="orderedColumns().length"
+                  [attr.data-row-variant]="''"
+                  [style.grid-column]="'1 / -1'"
+                >
+                  <ng-container
+                    [ngTemplateOutlet]="variant.cell()?.template ?? null"
+                    [ngTemplateOutletInjector]="rowRef.injector"
+                    [ngTemplateOutletContext]="{ $implicit: r.datum, index: r.index }"
+                  />
+                </div>
+              }
             } @else {
               @for (col of orderedColumns(); track col.name()) {
-                <div #cell="forTableCell" forTableCell [name]="col.name()" [sticky]="col.sticky()">
+                <div
+                  #cell="forTableCell"
+                  forTableCell
+                  [name]="col.name()"
+                  [sticky]="col.sticky()"
+                  [class]="col.cellClass()"
+                >
                   <ng-container
                     [ngTemplateOutlet]="col.dataCell().template"
                     [ngTemplateOutletInjector]="cell.injector"
@@ -2175,7 +2878,7 @@ class ForTableBody {
       }
     </div>
     <ng-content />
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ForTableHeaderRow, selector: "[forTableHeaderRow]", exportAs: ["forTableHeaderRow"] }, { kind: "directive", type: ForTableHeaderCell, selector: "[forTableHeaderCell]", inputs: ["name", "sticky"], exportAs: ["forTableHeaderCell"] }, { kind: "directive", type: ForTableCell, selector: "[forTableCell]", inputs: ["name", "sticky", "disabled"], exportAs: ["forTableCell"] }, { kind: "directive", type: ForTableRow, selector: "[forTableRow]", inputs: ["value", "level", "expandable", "virtualIndex"], exportAs: ["forTableRow"] }, { kind: "directive", type: ForTableSortHeader, selector: "[forTableSortHeader]", inputs: ["column", "direction", "disableClear", "firstClickDirection", "sortable"], outputs: ["directionChange", "sortChange"], exportAs: ["forTableSortHeader"] }, { kind: "directive", type: ForTableColumnResizer, selector: "[forTableColumnResizer]", inputs: ["column", "width", "min", "max", "step", "autoFit", "fitIncludesHeader"], outputs: ["widthChange", "resizeCommit"], exportAs: ["forTableColumnResizer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ForTableHeaderRow, selector: "[forTableHeaderRow]", exportAs: ["forTableHeaderRow"] }, { kind: "directive", type: ForTableHeaderCell, selector: "[forTableHeaderCell]", inputs: ["name", "sticky"], exportAs: ["forTableHeaderCell"] }, { kind: "directive", type: ForTableCell, selector: "[forTableCell]", inputs: ["name", "sticky", "disabled"], exportAs: ["forTableCell"] }, { kind: "directive", type: ForTableRow, selector: "[forTableRow]", inputs: ["value", "level", "expandable", "virtualIndex"], exportAs: ["forTableRow"] }, { kind: "directive", type: ForTableRowAttrs, selector: "[forTableRowAttrs]", inputs: ["forTableRowAttrs"] }, { kind: "directive", type: ForTableSortHeader, selector: "[forTableSortHeader]", inputs: ["column", "direction", "disableClear", "firstClickDirection", "sortable"], outputs: ["directionChange", "sortChange"], exportAs: ["forTableSortHeader"] }, { kind: "directive", type: ForTableColumnResizer, selector: "[forTableColumnResizer]", inputs: ["column", "width", "min", "max", "step", "autoFit", "fitIncludesHeader"], outputs: ["widthChange", "resizeCommit"], exportAs: ["forTableColumnResizer"] }, { kind: "directive", type: ForTableColumnReorder, selector: "[forTableColumnReorder]", outputs: ["columnReorder"], exportAs: ["forTableColumnReorder"] }, { kind: "directive", type: ForDraggable, selector: "[forDraggable]", inputs: ["dragData", "dragDisabled"], outputs: ["dragStart", "dragEnd"], exportAs: ["forDraggable"] }, { kind: "directive", type: ForDragPlaceholder, selector: "ng-template[forDragPlaceholder]", exportAs: ["forDragPlaceholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableBody, decorators: [{
             type: Component,
@@ -2189,39 +2892,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         ForTableHeaderCell,
                         ForTableCell,
                         ForTableRow,
+                        ForTableRowAttrs,
                         ForTableSortHeader,
                         ForTableColumnResizer,
+                        ForTableColumnReorder,
+                        ForDraggable,
+                        ForDragPlaceholder,
                     ],
                     template: `
-    <div forTableHeaderRow [style.display]="'grid'" [style.grid-template-columns]="track()">
-      @for (col of orderedColumns(); track col.name()) {
-        <div
-          #headerCell="forTableHeaderCell"
-          forTableHeaderCell
-          [name]="col.name()"
-          [sticky]="col.sticky()"
-          forTableSortHeader
+    <ng-template #headerCellContent let-col let-cell="cell">
+      <ng-container
+        [ngTemplateOutlet]="col.header().template"
+        [ngTemplateOutletInjector]="cell.injector"
+      />
+      @if (col.resizable()) {
+        <button
+          forTableColumnResizer
           [column]="col.name()"
-          [sortable]="col.sortable()"
-          [direction]="directionFor(col.name())"
-          (sortChange)="sortChange.emit($event)"
-        >
-          <ng-container
-            [ngTemplateOutlet]="col.header().template"
-            [ngTemplateOutletInjector]="headerCell.injector"
-          />
-          @if (col.resizable()) {
-            <button
-              forTableColumnResizer
-              autoFit
+          [width]="columnWidths()[col.name()]"
+          [min]="col.resizeMin()"
+          [max]="col.resizeMax()"
+          [step]="col.resizeStep()"
+          [autoFit]="col.autoFit()"
+          [fitIncludesHeader]="col.fitIncludesHeader()"
+          [attr.aria-label]="col.resizeAriaLabel()"
+          (widthChange)="onColumnWidthChange(col.name(), $event)"
+          (resizeCommit)="resizeCommit.emit($event)"
+        ></button>
+      }
+    </ng-template>
+
+    @if (hasReorderable()) {
+      <div
+        forTableHeaderRow
+        forTableColumnReorder
+        [style.display]="'grid'"
+        [style.grid-template-columns]="track()"
+        (columnReorder)="columnReorder.emit($event)"
+      >
+        @for (col of orderedColumns(); track col.name()) {
+          @if (col.reorderable()) {
+            <div
+              #headerCell="forTableHeaderCell"
+              forTableHeaderCell
+              [name]="col.name()"
+              [sticky]="col.sticky()"
+              [class]="col.headerClass()"
+              forTableSortHeader
+              [column]="col.name()"
+              [sortable]="col.sortable()"
+              [direction]="directionFor(col.name())"
+              (sortChange)="sortChange.emit($event)"
+              forDraggable
+              [dragData]="col.name()"
+            >
+              <ng-container
+                [ngTemplateOutlet]="headerCellContent"
+                [ngTemplateOutletInjector]="headerCell.injector"
+                [ngTemplateOutletContext]="{ $implicit: col, cell: headerCell }"
+              />
+              @if (columnDragPlaceholder(); as placeholder) {
+                <ng-template forDragPlaceholder>
+                  <ng-container [ngTemplateOutlet]="placeholder.template" />
+                </ng-template>
+              }
+            </div>
+          } @else {
+            <div
+              #headerCell="forTableHeaderCell"
+              forTableHeaderCell
+              [name]="col.name()"
+              [sticky]="col.sticky()"
+              [class]="col.headerClass()"
+              forTableSortHeader
               [column]="col.name()"
-              [attr.aria-label]="col.resizeAriaLabel()"
-              (resizeCommit)="resizeCommit.emit($event)"
-            ></button>
+              [sortable]="col.sortable()"
+              [direction]="directionFor(col.name())"
+              (sortChange)="sortChange.emit($event)"
+            >
+              <ng-container
+                [ngTemplateOutlet]="headerCellContent"
+                [ngTemplateOutletInjector]="headerCell.injector"
+                [ngTemplateOutletContext]="{ $implicit: col, cell: headerCell }"
+              />
+            </div>
           }
-        </div>
-      }
-    </div>
+        }
+      </div>
+    } @else {
+      <div forTableHeaderRow [style.display]="'grid'" [style.grid-template-columns]="track()">
+        @for (col of orderedColumns(); track col.name()) {
+          <div
+            #headerCell="forTableHeaderCell"
+            forTableHeaderCell
+            [name]="col.name()"
+            [sticky]="col.sticky()"
+            [class]="col.headerClass()"
+            forTableSortHeader
+            [column]="col.name()"
+            [sortable]="col.sortable()"
+            [direction]="directionFor(col.name())"
+            (sortChange)="sortChange.emit($event)"
+          >
+            <ng-container
+              [ngTemplateOutlet]="headerCellContent"
+              [ngTemplateOutletInjector]="headerCell.injector"
+              [ngTemplateOutletContext]="{ $implicit: col, cell: headerCell }"
+            />
+          </div>
+        }
+      </div>
+    }
     <div
       role="rowgroup"
       [style.position]="sizerHeight() !== null ? 'relative' : null"
@@ -2231,7 +3012,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         @for (placeholder of placeholderRange(); track placeholder) {
           <div forTableRow [style.display]="'grid'" [style.grid-template-columns]="track()">
             @for (col of orderedColumns(); track col.name()) {
-              <div #cell="forTableCell" forTableCell [name]="col.name()" [sticky]="col.sticky()">
+              <div
+                #cell="forTableCell"
+                forTableCell
+                [name]="col.name()"
+                [sticky]="col.sticky()"
+                [class]="col.cellClass()"
+              >
                 @if (col.placeholderCell(); as placeholderCell) {
                   <ng-container
                     [ngTemplateOutlet]="placeholderCell.template"
@@ -2246,34 +3033,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         @for (r of renderRows(); track r.key) {
           <div
             #rowRef="forTableRow"
+            #rowEl
             forTableRow
             [value]="r.value"
             [virtualIndex]="r.virtualIndex"
             [attr.data-index]="r.virtualIndex"
+            [attr.tabindex]="rowTabIndex(r)"
+            [class]="rowClassFor(r)"
+            [forTableRowAttrs]="rowAttrsFor(r)"
             [style.display]="'grid'"
             [style.grid-template-columns]="track()"
             [style.position]="r.start !== null ? 'absolute' : null"
             [style.left]="r.start !== null ? '0' : null"
             [style.right]="r.start !== null ? '0' : null"
             [style.transform]="r.start !== null ? 'translateY(' + r.start + 'px)' : null"
+            (click)="onRowClick(r, $event)"
+            (keydown.enter)="onRowEnter(r, $event)"
+            (contextmenu)="onRowContextMenu(r, $event)"
           >
             @if (r.variant; as variant) {
-              <div
-                [attr.role]="cellRole()"
-                [attr.aria-colindex]="1"
-                [attr.aria-colspan]="orderedColumns().length"
-                [attr.data-row-variant]="''"
-                [style.grid-column]="'1 / -1'"
-              >
-                <ng-container
-                  [ngTemplateOutlet]="variant.cell().template"
-                  [ngTemplateOutletInjector]="rowRef.injector"
-                  [ngTemplateOutletContext]="{ $implicit: r.datum, index: r.index }"
-                />
-              </div>
+              @if (variant.placeholderCells()) {
+                @for (col of orderedColumns(); track col.name()) {
+                  <div
+                    #cell="forTableCell"
+                    forTableCell
+                    disabled
+                    [name]="col.name()"
+                    [sticky]="col.sticky()"
+                    [class]="col.cellClass()"
+                  >
+                    @if (col.placeholderCell(); as placeholderCell) {
+                      <ng-container
+                        [ngTemplateOutlet]="placeholderCell.template"
+                        [ngTemplateOutletInjector]="cell.injector"
+                      />
+                    }
+                  </div>
+                }
+              } @else {
+                <div
+                  [attr.role]="cellRole()"
+                  [attr.aria-colindex]="1"
+                  [attr.aria-colspan]="orderedColumns().length"
+                  [attr.data-row-variant]="''"
+                  [style.grid-column]="'1 / -1'"
+                >
+                  <ng-container
+                    [ngTemplateOutlet]="variant.cell()?.template ?? null"
+                    [ngTemplateOutletInjector]="rowRef.injector"
+                    [ngTemplateOutletContext]="{ $implicit: r.datum, index: r.index }"
+                  />
+                </div>
+              }
             } @else {
               @for (col of orderedColumns(); track col.name()) {
-                <div #cell="forTableCell" forTableCell [name]="col.name()" [sticky]="col.sticky()">
+                <div
+                  #cell="forTableCell"
+                  forTableCell
+                  [name]="col.name()"
+                  [sticky]="col.sticky()"
+                  [class]="col.cellClass()"
+                >
                   <ng-container
                     [ngTemplateOutlet]="col.dataCell().template"
                     [ngTemplateOutletInjector]="cell.injector"
@@ -2289,7 +3109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     <ng-content />
   `,
                 }]
-        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], placeholderRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderRows", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], resizeCommit: [{ type: i0.Output, args: ["resizeCommit"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ForColumnDef), { isSignal: true }] }], rowDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ForRowDef), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { rowEls: [{ type: i0.ViewChildren, args: ['rowEl', { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], placeholderRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderRows", required: false }] }], measureRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "measureRows", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], resizeCommit: [{ type: i0.Output, args: ["resizeCommit"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }], columnWidths: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidths", required: false }] }, { type: i0.Output, args: ["columnWidthsChange"] }], interactiveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveRows", required: false }] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], rowContextMenu: [{ type: i0.Output, args: ["rowContextMenu"] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], rowAttrs: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowAttrs", required: false }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ForColumnDef), { isSignal: true }] }], rowDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ForRowDef), { isSignal: true }] }], columnDragPlaceholder: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForColumnDragPlaceholder), { isSignal: true }] }] } });
 
 /**
  * Decorative per-row selection affordance inside a `[forTableRow]`. Clicking it
@@ -2412,157 +3232,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-/**
- * Opt-in **column reordering** for `ForTable`, composed over the drag-drop primitive.
- *
- * Apply on the `[forTableHeaderRow]` element. It wraps `[forDropList]` (via
- * `hostDirectives`) so the header cells become a reorderable list, then translates
- * drag-drop's generic drop into the table-friendly `columnReorder` output. Mark each
- * `[forTableHeaderCell]` as `[forDraggable]` with `[dragData]` set to the column name.
- * On a committed drop (pointer or keyboard) it emits the previous / new index and the
- * new column-name order; the consumer applies it to their own column array. **It never
- * reorders columns itself** (BYO-data).
- *
- * The wrapped list defaults to `orientation="horizontal"` (a column reorder is always along
- * the row axis), so no `orientation` binding is needed. Bind `orientation="vertical"` to
- * override for the rare case.
- *
- * In `mode="grid"` / `mode="treegrid"` the draggable header cells join the table's composite
- * roving grid as its first row, so a sortable + column-reorderable grid keeps the **single
- * tab stop** the WAI-ARIA Data Grid pattern calls for: `Tab` enters the grid once, Arrow keys
- * cross between header and body, and `Space` on a header cell lifts it for keyboard reordering.
- * It hands its drop-list roving to the grid via `FOR_DROP_LIST_ROVING_DELEGATE` and routes idle
- * header navigation through the table's grid keyboard handler.
- *
- * When a header cell is both sortable (`[forTableSortHeader]`) and reorderable, the two
- * keyboard activations split along WAI-ARIA lines so a single key never both sorts and lifts:
- * `Space` lifts the column, `Enter` toggles the sort. The split is enforced via a
- * `FOR_DRAGGABLE_LIFT_GUARD` that defers `Enter` to the sort header on cells carrying the
- * `data-sortable` marker — detected by DOM marker, so `forty-cdk/drag-drop` needs no table
- * import. A reorder-only header (no sort header) still lifts on both `Enter` and `Space`.
- *
- * @example
- * ```html
- * <div forTableHeaderRow forTableColumnReorder (columnReorder)="columns.set($event.columns)">
- *   @for (col of columns(); track col) {
- *     <div forTableHeaderCell [name]="col" forDraggable [dragData]="col">{{ col }}</div>
- *   }
- * </div>
- * ```
- */
-class ForTableColumnReorder {
-    ctx = injectTableContext('ForTableColumnReorder');
-    #list = inject(ForDropList);
-    #host = inject(ElementRef).nativeElement;
-    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    /**
-     * Fires once per committed reorder gesture (pointer drop or keyboard drop) with the
-     * previous / new column index and the full column-name order after the move.
-     */
-    columnReorder = output();
-    constructor() {
-        const destroyRef = inject(DestroyRef);
-        const sub = this.#list.dragDrop.subscribe((event) => this.#emit(event));
-        destroyRef.onDestroy(() => sub.unsubscribe());
-        if (this.#isBrowser) {
-            const onCaptureKeydown = (event) => this.#onCaptureKeydown(event);
-            this.#host.addEventListener('keydown', onCaptureKeydown, { capture: true });
-            destroyRef.onDestroy(() => this.#host.removeEventListener('keydown', onCaptureKeydown, { capture: true }));
-        }
-    }
-    /**
-     * When the header row joins the composite grid, intercepts idle (not-lifted) Arrow /
-     * Home / End / Page keys on a draggable header cell in the capture phase and routes them
-     * through the table's grid navigation, then stops propagation so the draggable's own
-     * keydown does not also navigate. Space / Enter (and every key while a keyboard drag is in
-     * progress) fall through untouched, so the draggable still owns the lift / move / drop /
-     * cancel gesture — keeping the header one navigation continuum with the body while
-     * preserving column reordering.
-     */
-    #onCaptureKeydown(event) {
-        if (!this.ctx.headerParticipatesInRoving()) {
-            return;
-        }
-        const target = event.target;
-        if (!(target instanceof HTMLElement)) {
-            return;
-        }
-        if (!this.#list.items().some((handle) => handle.host === target) ||
-            this.#list.isLifted(target)) {
-            return;
-        }
-        if (this.ctx.handleHeaderCellKeydown(event, target)) {
-            event.stopPropagation();
-        }
-    }
-    #emit(event) {
-        const names = this.#list.items().map((handle) => String(handle.data()));
-        const columns = moveItemInArray(names, event.previousIndex, event.currentIndex);
-        this.columnReorder.emit({ from: event.previousIndex, to: event.currentIndex, columns });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableColumnReorder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTableColumnReorder, isStandalone: true, selector: "[forTableColumnReorder]", outputs: { columnReorder: "columnReorder" }, providers: [
-            { provide: FOR_DROP_LIST_DEFAULT_ORIENTATION, useValue: 'horizontal' },
-            {
-                provide: FOR_DROP_LIST_ROVING_DELEGATE,
-                useFactory: () => {
-                    const ctx = injectTableContext('ForTableColumnReorder');
-                    return {
-                        itemTabindex: (el) => ctx.headerParticipatesInRoving() ? ctx.headerCellTabIndex(el) : null,
-                        isItemHighlighted: (el) => ctx.headerParticipatesInRoving() ? ctx.isCellHighlighted(el) : null,
-                    };
-                },
-            },
-            {
-                provide: FOR_DRAGGABLE_LIFT_GUARD,
-                useValue: {
-                    canLiftOnKey: (event, host) => !(event.key === 'Enter' && hostHasSortActivation(host)),
-                },
-            },
-        ], exportAs: ["forTableColumnReorder"], hostDirectives: [{ directive: i1.ForDropList, inputs: ["orientation", "orientation", "dir", "dir", "disabled", "disabled", "autoScroll", "autoScroll", "animateReorder", "animateReorder", "liveSort", "liveSort", "boundary", "boundary", "lockAxis", "lockAxis"] }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableColumnReorder, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[forTableColumnReorder]',
-                    exportAs: 'forTableColumnReorder',
-                    providers: [
-                        { provide: FOR_DROP_LIST_DEFAULT_ORIENTATION, useValue: 'horizontal' },
-                        {
-                            provide: FOR_DROP_LIST_ROVING_DELEGATE,
-                            useFactory: () => {
-                                const ctx = injectTableContext('ForTableColumnReorder');
-                                return {
-                                    itemTabindex: (el) => ctx.headerParticipatesInRoving() ? ctx.headerCellTabIndex(el) : null,
-                                    isItemHighlighted: (el) => ctx.headerParticipatesInRoving() ? ctx.isCellHighlighted(el) : null,
-                                };
-                            },
-                        },
-                        {
-                            provide: FOR_DRAGGABLE_LIFT_GUARD,
-                            useValue: {
-                                canLiftOnKey: (event, host) => !(event.key === 'Enter' && hostHasSortActivation(host)),
-                            },
-                        },
-                    ],
-                    hostDirectives: [
-                        {
-                            directive: ForDropList,
-                            inputs: [
-                                'orientation',
-                                'dir',
-                                'disabled',
-                                'autoScroll',
-                                'animateReorder',
-                                'liveSort',
-                                'boundary',
-                                'lockAxis',
-                            ],
-                        },
-                    ],
-                }]
-        }], ctorParameters: () => [], propDecorators: { columnReorder: [{ type: i0.Output, args: ["columnReorder"] }] } });
-
 const POINTER_ARM_THRESHOLD_PX = 5;
 const LIFTED_NAV_KEYS = new Set([
     'ArrowDown',
@@ -2978,5 +3647,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOR_TABLE_CONTEXT, ForColumnDef, ForDataCell, ForHeaderCell, ForPlaceholderCell, ForRowCell, ForRowDef, ForTable, ForTableBody, ForTableCell, ForTableColumnLabel, ForTableColumnReorder, ForTableColumnResizer, ForTableHeaderCell, ForTableHeaderRow, ForTableRow, ForTableRowReorder, ForTableRowSelector, ForTableSelectAll, ForTableSortHeader };
+export { FOR_TABLE_CONTEXT, ForColumnDef, ForColumnDragPlaceholder, ForDataCell, ForHeaderCell, ForPlaceholderCell, ForRowCell, ForRowDef, ForTable, ForTableBody, ForTableCell, ForTableColumnLabel, ForTableColumnReorder, ForTableColumnResizer, ForTableHeaderCell, ForTableHeaderRow, ForTableRow, ForTableRowReorder, ForTableRowSelector, ForTableSelectAll, ForTableSortHeader };
 //# sourceMappingURL=forty-cdk-table.mjs.map