@rozie-ui/data-table-solid 0.2.6 → 0.3.2

package/src/DataTable.tsx

@@ -3,6 +3,10 @@ import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, s
 import { Key } from '@solid-primitives/keyed';
 import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from '@rozie/runtime-solid';
 import Popover from '@rozie-ui/popover-solid';
+import { isSafeKey, wrapAggregationFn, indexDefsById, collectGroupableLeafDefs } from './helpers/columnDefUtils';
+import { applyUpdater, clamp, focusables } from './helpers/indexMath';
+import { escapeTsvField, parseTsv, tileGridToBox, tileIndex } from './helpers/tsvGrid';
+import { replaceRowValue, indexOfRowIn, replaceRowValues } from './helpers/rowValueUtils';
 import { createTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, getExpandedRowModel, getGroupedRowModel,
 // Faceted filtering (phase 50 reqs 8-9, D-03). All three are supplied UNCONDITIONALLY
 // (mirrors the expand/group models) — inert until a consumer READS a column facet via the
@@ -37,6 +41,13 @@ __rozieInjectStyle('DataTable-d5dcab4c', `.rozie-data-table[data-rozie-s-d5dcab4
   font: var(--rdt-font, 14px system-ui, sans-serif);
   color: var(--rdt-color, inherit);
 }
+.rozie-data-table.rdt-col-windowed[data-rozie-s-d5dcab4c] {
+  table-layout: fixed;
+}
+.rozie-data-table.rdt-col-windowed[data-rozie-s-d5dcab4c] .rdt-th[data-rozie-s-d5dcab4c],
+.rozie-data-table.rdt-col-windowed[data-rozie-s-d5dcab4c] .rdt-td[data-rozie-s-d5dcab4c] {
+  box-sizing: border-box;
+}
 .rdt-sr-live[data-rozie-s-d5dcab4c] {
   position: absolute;
   width: 1px;
@@ -482,13 +493,17 @@ interface DataTableProps {
    */
   undoLimit?: number;
   /**
-   * Opt-in vertical **row windowing**. When `true`, only the visible slice of rows renders inside a bounded `rdt-scroll` container (with leading/trailing spacer rows preserving total scroll height), windowing over the full filtered + sorted (pre-pagination) model and suppressing the client pagination chrome. Default `false` is byte-identical to a non-virtual table.
+   * Opt-in windowing grammar: `false` (default, off — byte-identical to a non-virtual table) | `true` or `'rows'` (vertical row windowing; `true` is byte-behavior-identical to every existing consumer, zero churn) | `'columns'` (horizontal column windowing) | `'both'` (both axes windowed). Row windowing renders only the visible slice of rows inside a bounded `rdt-scroll` container (with leading/trailing spacer rows preserving total scroll height), windowing over the full filtered + sorted (pre-pagination) model and suppressing the client pagination chrome. Column windowing renders only the visible slice of leaf columns inside the same `rdt-scroll` container. An unrecognised string behaves as `false`.
    */
-  virtual?: boolean;
+  virtual?: boolean | string;
   /**
-   * Estimated row height (px) seeding the windowing engine before `measureElement` refines actual heights. Only consulted when `virtual` is on.
+   * Estimated row height (px) — the first-paint seed for the windowing engine before any row has been measured. Only consulted when rows are windowed. When `autoMeasure` is `true`, later renders progressively refine the estimate from measured content; when `autoMeasure` is `false` this remains the explicit override for every render.
    */
   estimateRowHeight?: number;
+  /**
+   * Opt-in content-driven row-size estimation. When `true`, the windowing engine feeds `estimateSize()` a running mean of measured row heights instead of the fixed `estimateRowHeight` seed, so `getTotalSize()` converges to the true content total on a large table with variable-height rows. Falls back to `estimateRowHeight` before any row has been measured. Default `false` keeps the estimate fixed at `estimateRowHeight` for every render (today's behavior).
+   */
+  autoMeasure?: boolean;
   /**
    * A CSS length string bounding the `rdt-scroll` container when `virtual` is on (e.g. `'400px'`). Mirrored to the `--rozie-data-table-max-height` custom property; the prop wins, the token is the fallback.
    */
@@ -560,8 +575,8 @@ export interface DataTableHandle {
 }
 
 export default function DataTable(_props: DataTableProps): JSX.Element {
-  const _merged = mergeProps({ columns: (() => [])() as any[], selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getSubRows: null, groupable: false, stickyHeader: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, virtual: false, estimateRowHeight: 40, maxHeight: '' }, _props);
-  const [local, attrs] = splitProps(_merged, ['data', 'columns', 'selectionMode', 'sorting', 'globalFilter', 'columnFilters', 'pagination', 'manual', 'rowCount', 'pageCount', 'expandable', 'expanded', 'getSubRows', 'groupable', 'grouping', 'rowSelection', 'columnVisibility', 'columnSizing', 'columnOrder', 'columnPinning', 'stickyHeader', 'interactionMode', 'singleClickEdit', 'undoable', 'undoLimit', 'virtual', 'estimateRowHeight', 'maxHeight', 'children', 'ref', 'onSortChange', 'onExpandChange', 'onGroupChange', 'onFilterChange', 'onPageChange', 'onSelectionChange', 'onVisibilityChange', 'onResizeChange', 'onReorderChange', 'onPinChange', 'onHistoryChange', 'onActivecellChange', 'onRangeChange', 'onCellEditCommit', 'onRowEditCommit']);
+  const _merged = mergeProps({ columns: (() => [])() as any[], selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getSubRows: null, groupable: false, stickyHeader: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, virtual: false, estimateRowHeight: 40, autoMeasure: false, maxHeight: '' }, _props);
+  const [local, attrs] = splitProps(_merged, ['data', 'columns', 'selectionMode', 'sorting', 'globalFilter', 'columnFilters', 'pagination', 'manual', 'rowCount', 'pageCount', 'expandable', 'expanded', 'getSubRows', 'groupable', 'grouping', 'rowSelection', 'columnVisibility', 'columnSizing', 'columnOrder', 'columnPinning', 'stickyHeader', 'interactionMode', 'singleClickEdit', 'undoable', 'undoLimit', 'virtual', 'estimateRowHeight', 'autoMeasure', 'maxHeight', 'children', 'ref', 'onSortChange', 'onExpandChange', 'onGroupChange', 'onFilterChange', 'onPageChange', 'onSelectionChange', 'onVisibilityChange', 'onResizeChange', 'onReorderChange', 'onPinChange', 'onHistoryChange', 'onActivecellChange', 'onRangeChange', 'onCellEditCommit', 'onRowEditCommit']);
   const resolved = () => local.children;
   onMount(() => { local.ref?.({ sortColumn, clearSorting, toggleRowExpanded, expandAll, collapseAll, getExpandedRows, applyGrouping, clearGrouping, getFacetedUniqueValues, getFacetedMinMaxValues, getColumnDefs, toggleAllRows, clearSelection, getSelectedRows, setPage, setRowsPerPage, toggleColumnVisibility, applyColumnOrder, resetColumnSizing, pinColumn, focusCell, getActiveCell, clearActiveCell, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory }); });
 
@@ -751,10 +766,15 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       // into the virtualizer + reconcile IMPERATIVELY here (the table.setOptions re-feed path),
       // NEVER in a render helper (Pitfall 1). Pass the COMPLETE options set (virtual-core's
       // setOptions replaces, not merges). Guarded so the off path executes no virtual-core code.
-      if (local.virtual && virtualizer) {
+      if (rowsWindowed() && virtualizer) {
         virtualizer.setOptions(virtualizerOptions());
         virtualizer._willUpdate();
       }
+      // Phase 87 87-04: re-feed the column virtualizer's count/size on the SAME re-derive cycle
+      // (a column-visibility/order/pinning change is already in the $watch list below and re-pulls
+      // through here) — guarded internally on colsWindowed() && colVirtualizer, so this is a no-op
+      // on every other path.
+      remeasureColumnWindow();
       // D-05: on every data change (re-sort/filter/paginate/page-size — all re-pull here),
       // clamp the active cell to the new bounds (same indices, clamped if the grid shrank;
       // no row-id following, no top-bounce). isGrid()-gated so 'table' mode is untouched.
@@ -823,49 +843,91 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // cell IS the first Tab-in target (matching the Wave-0 probe's "no auto-focus on
     // mount"); the consumer drives focus by Tabbing/clicking in, never the component.
 
-    // ── Vertical windowing: construct the virtualizer (req-1/2 — ONLY when virtual) ───────
-    // Built HERE (post-mount) so getScrollElement resolves the rendered .rdt-scroll div and
-    // getPrePaginationRowModel reads the live table. ENTIRELY inside the $props.virtual guard:
-    // when off, NO virtual-core runtime code executes (byte-identical-off). _didMount() registers
-    // the scroll-element ResizeObserver and returns the teardown stored for $onUnmount.
-    if (local.virtual) {
+    // ── Windowing: capture the scroll element + construct the row virtualizer (req-1/2 — the
+    // row virtual-core instance ONLY when rows are windowed; the scroll-element capture whenever
+    // EITHER axis is windowed, since both axes observe the SAME .rdt-scroll element — D-03). Built
+    // HERE (post-mount) so getScrollElement resolves the rendered .rdt-scroll div and
+    // getPrePaginationRowModel reads the live table. ENTIRELY inside the isWindowed()/rowsWindowed()
+    // guards: when both axes are off, NO virtual-core runtime code executes (byte-identical-off).
+    // _didMount() registers the scroll-element ResizeObserver and returns the teardown stored for
+    // $onUnmount.
+    if (isWindowed()) {
       gridScrollEl = __rozieRootRef! ? __rozieRootRef!.querySelector('.rdt-scroll') : null;
+    }
+    if (rowsWindowed()) {
       virtualizer = new Virtualizer(virtualizerOptions());
       virtualizerCleanup = virtualizer._didMount();
-      // FINE-GRAINED FIRST-WINDOW KICK (Solid/Svelte): the windowed <For>/{#each} accessor was first
-      // evaluated at initial render — while `virtualizer` was still null — and (because windowedRows()
-      // reads $data.windowVer up top) subscribed to windowVer then returned []. `virtualizer` is a
-      // non-reactive `let`, so its assignment above does NOT notify the accessor; we must bump the
-      // SIGNAL it subscribed to. _didMount() computes the first window synchronously but its onChange
-      // only fires on SUBSEQUENT scroll/resize, so without this explicit bump the first window would
-      // never paint on the fine-grained targets. Idempotent + harmless on the coarse targets (they
-      // re-render wholesale anyway). One bump = one re-run that now sees the non-null virtualizer and
-      // pulls getVirtualItems().
+    }
+    // Phase 87 87-04: construct the SECOND, horizontal Virtualizer instance when the COLUMN
+    // axis is windowed — entirely inside its own colsWindowed() guard, byte-identical-off for
+    // 'rows'/true/false.
+    if (colsWindowed()) {
+      colVirtualizer = new Virtualizer(columnVirtualizerOptions());
+      colVirtualizerCleanup = colVirtualizer._didMount();
+    }
+    // FINE-GRAINED FIRST-WINDOW KICK (Solid/Svelte), either axis: the windowed <For>/{#each}
+    // accessor was first evaluated at initial render — while `virtualizer`/`colVirtualizer` were
+    // still null — and (because windowedRows()/windowedColIndices() read $data.windowVer up top)
+    // subscribed to windowVer then returned []/the full set. Both `let`s are non-reactive, so
+    // their assignment above does NOT notify the accessor; we must bump the SIGNAL it subscribed
+    // to. _didMount() computes the first window synchronously but its onChange only fires on
+    // SUBSEQUENT scroll/resize, so without this explicit bump the first window would never paint
+    // on the fine-grained targets. Idempotent + harmless on the coarse targets (they re-render
+    // wholesale anyway). ONE bump here (not one per axis, Rule 1 — see the ROZ138 note below)
+    // covers both: windowedRows()/windowedColIndices() each simply re-derive against their own
+    // now-non-null virtualizer instance off the SAME counter (87-02 checkpoint decision (b): no
+    // separate $data.colWindowVer). Gated on isWindowed() (either axis) rather than two separate
+    // per-axis bumps: a second `$data.windowVer = $data.windowVer + 1` write later in this SAME
+    // $onMount body would dominate-flag ROZ138 (React stale-read) on its own right-hand-side read
+    // of the counter it had just written a few lines above — a false positive (this increment
+    // idiom lowers to a functional React setState update and is safe regardless of ordering, the
+    // same reasoning virtualizerOptions()'s onChange documents), but collapsing to one bump avoids
+    // manufacturing the false-positive warning at all rather than accepting it.
+    if (isWindowed()) {
       setWindowVer(windowVer() + 1);
-      // After the first window commits (next frame), refine heights + fire the dev-mode warns
-      // ONCE. Entirely inside the $props.virtual guard so the virtual=false emitted path adds NO
-      // code and these warns can never fire there (req-1 byte-identical-off preserved).
+    }
+    // After the first window commits (next frame), refine heights + fire the dev-mode warns ONCE.
+    // Entirely inside the isWindowed() guard so the off (neither axis windowed) emitted path adds
+    // NO code and these warns can never fire there (req-1 byte-identical-off preserved). The
+    // row-specific measurement + warns stay further guarded by rowsWindowed() (byte-identical to
+    // before this restructure); the column-axis warn (Phase 87 D-07(a)) is guarded by
+    // colsWindowed() so it can fire ONLY on the 'columns'/'both' path, never on 'rows'/true/false.
+    if (isWindowed()) {
       const afterFirstFrame = () => {
-        // D-10: measure the rendered rows.
-        remeasureWindow();
-        // D-08/A1: a dev-mode runtime warn when the scroll container has no bounded height (the
-        // bound may come from consumer CSS the compiler can't see — no compile diagnostic). No
-        // process.env guard (not bundler-portable); always-warn-on-misconfig is acceptable.
-        const h = gridScrollEl ? gridScrollEl.clientHeight : 0;
-        if (!h) {
-          console.warn('[rozie-data-table] virtual is on but the scroll container has no bounded height; set maxHeight or --rozie-data-table-max-height');
+        if (rowsWindowed()) {
+          // D-10: measure the rendered rows.
+          remeasureWindow();
+          // D-08/A1: a dev-mode runtime warn when the scroll container has no bounded height (the
+          // bound may come from consumer CSS the compiler can't see — no compile diagnostic). No
+          // process.env guard (not bundler-portable); always-warn-on-misconfig is acceptable.
+          const h = gridScrollEl ? gridScrollEl.clientHeight : 0;
+          if (!h) {
+            console.warn('[rozie-data-table] virtual is on but the scroll container has no bounded height; set maxHeight or --rozie-data-table-max-height');
+          }
+          // D-07 (RESOLVED — runtime warn, not a compile diagnostic): warn ONCE when the consumer
+          // CONFIGURED client pagination alongside virtual, in the non-manual case (the valid
+          // virtual+manual combo per D-09 is silent). The pagination prop carries a non-null default
+          // ({ pageIndex: 0, pageSize: 10 }) so it is never strictly null — "configured" is therefore
+          // detected as a pagination that DIFFERS from that default (a consumer who set a real page
+          // size / index). The uncontrolled default ({0,10}) does NOT trip the warn. Behavior + the
+          // virtual=false path are untouched (rowsWindowed()-guarded, as before this restructure).
+          const pg = pagination();
+          const pgConfigured = pg != null && !(pg.pageIndex === 0 && pg.pageSize === 10);
+          if (local.manual !== true && pgConfigured) {
+            console.warn('[rozie-data-table] virtual+pagination: client pagination is configured but virtual windowing replaces it — the pagination chrome is auto-suppressed. Remove the pagination prop or set manual to silence this.');
+          }
         }
-        // D-07 (RESOLVED — runtime warn, not a compile diagnostic): warn ONCE when the consumer
-        // CONFIGURED client pagination alongside virtual, in the non-manual case (the valid
-        // virtual+manual combo per D-09 is silent). The pagination prop carries a non-null default
-        // ({ pageIndex: 0, pageSize: 10 }) so it is never strictly null — "configured" is therefore
-        // detected as a pagination that DIFFERS from that default (a consumer who set a real page
-        // size / index). The uncontrolled default ({0,10}) does NOT trip the warn. Behavior + the
-        // virtual=false path are untouched (this lives entirely inside the $props.virtual guard).
-        const pg = pagination();
-        const pgConfigured = pg != null && !(pg.pageIndex === 0 && pg.pageSize === 10);
-        if (local.manual !== true && pgConfigured) {
-          console.warn('[rozie-data-table] virtual+pagination: client pagination is configured but virtual windowing replaces it — the pagination chrome is auto-suppressed. Remove the pagination prop or set manual to silence this.');
+        // Phase 87 Task 1(a) (D-07/D-08 precedent, APPROVED): a dev-mode runtime warn when the
+        // column axis is windowed but the scroll container has no bounded width — the horizontal
+        // failure mode is worse than the vertical one (an unbounded width renders every column
+        // with no scrollbar, so the feature silently does nothing and there is no compile
+        // diagnostic possible, since the bound may come from consumer CSS). Guarded by
+        // colsWindowed() so it can NEVER fire on the 'rows'/true/false path.
+        if (colsWindowed()) {
+          const w = gridScrollEl ? gridScrollEl.clientWidth : 0;
+          if (!w) {
+            console.warn('[rozie-data-table] virtual is on for columns but the scroll container has no bounded width; set a CSS width on an ancestor so the column window can be measured');
+          }
         }
       };
       if (typeof requestAnimationFrame === 'function') requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));else setTimeout(afterFirstFrame, 0);
@@ -880,6 +942,17 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   });
   onCleanup(() => {
     if (virtualizerCleanup) virtualizerCleanup();
+    // Phase 87 87-04: tear down the column virtualizer's scroll-element ResizeObserver too.
+    // No-op when column windowing was off (cleanup stays null).
+    if (colVirtualizerCleanup) colVirtualizerCleanup();
+    // Gap-closure 87-09: disconnect the RTL dir-attribute MutationObserver (ensureColRtlWatch(),
+    // windowing.rzts). No-op if column windowing was never on (the observer was never attached).
+    teardownColRtlWatch();
+    // Gap-closure 87-13 (CR-01): cancel a deferred remeasure sweep still pending at unmount.
+    // Must run here — remeasureWindow()'s `!virtualizer || !gridRoot` guard never fires, since
+    // neither ref is nulled — or the pass reaches 87-07's refineRowEstimate() and writes
+    // $data.windowVer against a torn-down instance.
+    teardownRemeasure();
     // CR-04: remove any live fill-drag document listeners if we unmount mid-drag.
     teardownFillDrag();
     // §6 (260709-3qt): remove any live drag-select document listeners on a mid-drag unmount.
@@ -938,6 +1011,13 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   let virtualizer: any = null;
   let virtualizerCleanup: any = null;
   let gridScrollEl: any = null;
+  // ── Horizontal (column-axis) windowing instance state (Phase 87 87-04) ─────────────────
+  // The SECOND, independent virtual-core instance (AXIS MECHANISM, windowing.rzts): mutable
+  // top-level `let`s (the `virtualizer` precedent above — React hoists to useRef). NULL until
+  // $onMount, and ONLY constructed when colsWindowed(). Shares gridScrollEl (the SAME
+  // .rdt-scroll element) with the row instance — D-03.
+  let colVirtualizer: any = null;
+  let colVirtualizerCleanup: any = null;
   // CR-01 remeasure scheduling state. remeasurePending dedupes the deferred sweep — at most ONE
   // rAF is in flight, so a burst of onChange ticks (a fast scroll) collapses to a single measure
   // pass per frame instead of piling up rAF callbacks that fire mid-gesture. The piled-up
@@ -948,6 +1028,17 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // onChange re-measures the now-stable window. Scroll-driven recycling (the CR-01 case, measured
   // once motion settles between scroll steps) is unaffected.
   let remeasurePending = false;
+  // Gap-closure 87-13: the deferred sweep's own rAF handle, plus a disposed latch. Until 87-07 a
+  // post-unmount sweep was inert — it re-measured a detached tree and wrote nothing. 87-07's D-15
+  // re-feed changed that: remeasureWindow() now reaches refineRowEstimate(), which calls
+  // virtualizer.setOptions()/_willUpdate(), mutates gridScrollEl.scrollTop, and WRITES
+  // $data.windowVer. remeasureWindow()'s existing `!virtualizer || !gridRoot` guard cannot catch
+  // this — neither ref is ever nulled after $onMount assigns it — so a scroll/resize burst that
+  // leaves a pass pending across unmount (a route transition mid-scroll) lands a state write on a
+  // torn-down instance. Handle init is `null`, never 0: an Angular leaf types this as the DOM
+  // handle and TS2322s on a numeric seed.
+  let remeasureRaf: any = null;
+  let remeasureDisposed = false;
 
   // ── Grid interaction-mode constants + DOM root (phase 49, REQ-2/6) ────────────────────
   // Fixed PageUp/PageDown row step (D-06). Phase 53 swaps this for the visible-window size
@@ -1109,35 +1200,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function currentData(): any {
     return data() != null ? data() : dataDefault();
   }
-
-  // Prototype-safe id-keyed column resolution (T-48-PP): the `:columns` config array is
-  // applied FIRST (lower precedence), then the <Column> registry OVERRIDES by id (LWW).
-  // byId is a null-prototype object so a consumer column id of "__proto__"/"constructor"
-  // cannot pollute Object.prototype. Returns the table-core ColumnDef[]. (No per-column
-  // render callbacks — cells render via the single #cell/#header scoped slot on this
-  // component, dispatched by columnId; <Column> carries metadata only.)
-  function isSafeKey(k: any) {
-    return k !== '__proto__' && k !== 'constructor' && k !== 'prototype';
-  }
-  // wrapAggregationFn (phase 50 req-5, D-05, threat T-50-04): resolve a per-column
-  // aggregationFn straight onto the ColumnDef (no component-side switch — RESEARCH
-  // anti-pattern). A built-in NAME string ('sum'/'min'/'max'/'extent'/'mean'/'median'/
-  // 'unique'/'uniqueCount'/'count') passes through verbatim — table-core resolves it from its
-  // built-in `aggregationFns` map. A CUSTOM function `(columnId, leafRows, childRows) => any`
-  // is DEFENSIVELY WRAPPED (the runValidator precedent): a consumer fn runs per group, so a
-  // throw is coerced to `undefined` and can never crash getGroupedRowModel (DoS guard).
-  // Anything else → undefined (no aggregation; the cell renders as a placeholder).
-  function wrapAggregationFn(fn: any) {
-    if (typeof fn === 'string') return fn;
-    if (typeof fn !== 'function') return undefined;
-    return (columnId: any, leafRows: any, childRows: any) => {
-      try {
-        return fn(columnId, leafRows, childRows);
-      } catch (err: any) {
-        return undefined;
-      }
-    };
-  }
   // Build the table-core ColumnDef for ONE config-array entry. A LEAF entry
   // ({ id?, field, header?, … }) maps to an accessor ColumnDef; a GROUP entry
   // ({ id?, header, columns: [...] }) maps to a multi-level header GROUP column
@@ -1208,10 +1270,54 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       }
     };
   }
+  // ══ D-23 (gap-closure, Phase 87 follow-up) — columnDefs() memoization ═══════════════════
+  // ROOT CAUSE (confirmed via CPU profiling the D-13 [vue] fill-drag auto-scroll failure):
+  // defFor(colId) (columnChrome.rzts) — the sole resolver behind editMetaOf/columnEditable/
+  // editorTypeOf/isEditing, all called PER CELL, PER RENDER (isEditing's own header comment:
+  // "Called per-cell in both <td> bodies") — called columnDefs() with ZERO caching. columnDefs()
+  // rebuilds the FULL column-def array (buildConfigDef for every entry in $props.columns,
+  // including recursive group traversal) from scratch on every single invocation. With N
+  // columns and M rendered rows that is an O(N x M x N) = O(N^2 x M) cost PER RENDER COMMIT —
+  // on this plan's 60-column fixture, up to ~1200 cells x 60 rebuilt defs = ~72,000
+  // buildConfigDef calls per commit, repeated on every windowVer-driven re-render during a
+  // sustained scroll gesture (the fill-drag edge-auto-scroll rAF loop bumps windowVer on
+  // every frame). A CPU profile of the failing case showed buildConfigDef consuming ~39% of
+  // ALL wall-clock time during the gesture, with a FURTHER ~27% in Vue's own reactive-Proxy
+  // `get` trap — $props.columns/$data.colReg are reactive on Vue, so every one of the
+  // ~15 property reads buildConfigDef performs per column pays Vue's track()/Reflect.get
+  // overhead, an expense React's plain (non-Proxy) props do not pay. The SAME O(N^2 x M)
+  // algorithmic cost exists on all six targets (this is shared-engine code, dissolved
+  // identically everywhere) — Vue's per-access reactivity overhead is what tips an already
+  // wasteful recompute over the fixed real-time budget used by this test's rAF-driven
+  // auto-scroll hold, not a Vue-specific logic defect. Fixing the recompute (not the timing)
+  // removes the accidental n^2 blowup for every target, and Vue-specifically restores enough
+  // per-frame headroom to keep pace with the auto-scroll loop.
+  //
+  // FIX: cache the resolved array, keyed on the REFERENCE identity of $props.columns and
+  // $data.colReg — the exact two dependencies the reFeed() $watch (DataTable.rozie) already
+  // treats as "changed only when the reference changes" (columns is consumer-memoized like
+  // $props.data/$props.sorting; colReg is reassigned via `{ ...colReg, [key]: spec }` on every
+  // real mutation, NEVER written in place — see DataTable.rozie's own colReg-mutation comment).
+  // A cache hit is an O(1) reference-equality check; a cache miss re-runs the exact same
+  // computation as before (byte-identical output either way — this is a pure memoization, not
+  // a behavior change).
+  let columnDefsCache: any[] | null = null;
+  let columnDefsCacheColumnsRef: any = undefined;
+  let columnDefsCacheColRegRef: any = undefined;
+  // B1 (quick 260906-afh) — the def-lookup index, populated INSIDE this SAME memo block on
+  // a cache MISS only (never rebuilt per call — a per-call recursive scan would restore the
+  // O(N^2 x M) blowup D-23 removed, T-AFH-03). A top-level `let` lowers to a per-instance
+  // `useRef` on React (verified in the emitted leaf), so this is instance-scoped like
+  // columnDefsCache above.
+  let columnDefsIndexCache: any = null;
   function columnDefs() {
+    const cfg = local.columns || [];
+    const reg = colReg() || {};
+    if (columnDefsCache && local.columns === columnDefsCacheColumnsRef && colReg() === columnDefsCacheColRegRef) {
+      return columnDefsCache;
+    }
     const byId = Object.create(null);
     const order = [];
-    const cfg = local.columns || [];
     for (const c of cfg as any) {
       const def = buildConfigDef(c);
       if (!def) continue;
@@ -1219,7 +1325,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       if (!(id in byId)) order.push(id);
       byId[id] = def;
     }
-    const reg = colReg() || {};
     for (const id in reg) {
       if (!isSafeKey(id)) continue;
       const spec = reg[id];
@@ -1250,9 +1355,23 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     }
     const out = [];
     for (const id of order as any) if (byId[id]) out.push(byId[id]);
+    columnDefsCache = out;
+    columnDefsCacheColumnsRef = local.columns;
+    columnDefsCacheColRegRef = colReg();
+    columnDefsIndexCache = indexDefsById(out);
     return out;
   }
 
+  // defIndex: the def-lookup map for the CURRENT columnDefs() array. Calling columnDefs()
+  // first is deliberate — either an O(1) reference-equality cache hit (columnDefsIndexCache
+  // is already fresh) or a miss that repopulates BOTH slots together, so the index can never
+  // go stale relative to the array. Falls back to an empty null-prototype map (never null/
+  // undefined) so a caller can read it unconditionally.
+  function defIndex() {
+    columnDefs();
+    return columnDefsIndexCache || Object.create(null);
+  }
+
   // The constant id of the auto-injected leading checkbox column (D-04). Distinct from
   // any consumer column id (the registry/config guard never produces a leading "__").
   const SELECT_COL_ID = '__rdt_select';
@@ -1334,9 +1453,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     _props.onSortChange?.(next);
     programmatic--;
   }
-  function applyUpdater(updater: any, current: any) {
-    return typeof updater === 'function' ? updater(current) : updater;
-  }
 
   // ── expanded slice: STATIC-KEY fresh-value echo-guarded write funnel (A4) ──────────
   // table-core hands an Updater<ExpandedState> = value | (old)=>new; onExpandedChange
@@ -1732,13 +1848,159 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // windowSource() (the row source), pinnedEditIndex()/pinnedMeasurement() (the D-05 pin hook),
   // scheduleRemeasure(), and the gridScrollEl/virtualizer/virtual-core-fn references.
 
+  // ══ D-05 predicate layer (Phase 87 87-02) — resolves the windowing prop into an axis state,
+  // replacing every bare truthiness read of $props.virtual (which is unsafe once the prop widens
+  // to a string grammar in 87-03: 'columns' is truthy but does NOT mean "windows rows"). Modeled on
+  // resolveAppendTo() in CommandPalette.rozie (the D-01 value-grammar precedent): branch on
+  // typeof === 'string', switch on the known string values, fall back to the boolean cases. THIS
+  // plan still declares `virtual: Boolean` (87-03 widens the declaration to [Boolean, String]), so
+  // resolveVirtual() can currently only return 'off' or 'rows' and colsWindowed() is constantly
+  // false — inert until 87-03/87-04 land the column axis.
+  //
+  // Declared BEFORE windowSource() (below): windowSource() calls rowsWindowed(), and the React
+  // emitter lowers each of these to a useCallback whose dependency array is evaluated eagerly at
+  // the declaration site — a forward reference here is a genuine TDZ (TS2448), not just a style
+  // preference (found running the strict react typecheck gate this task, Rule 1).
+  function resolveVirtual() {
+    const v = local.virtual;
+    if (typeof v === 'string') {
+      if (v === 'rows') return 'rows';
+      if (v === 'columns') return 'columns';
+      if (v === 'both') return 'both';
+      return 'off';
+    }
+    return v === true ? 'rows' : 'off';
+  }
+  // rowsWindowed(): the windowing.rzts host-contract symbol (D-05). Byte-behaviorally identical to
+  // today's `$props.virtual` truthiness — this plan changes NO user-visible behavior.
+  function rowsWindowed() {
+    const s = resolveVirtual();
+    return s === 'rows' || s === 'both';
+  }
+  function colsWindowed() {
+    const s = resolveVirtual();
+    return s === 'columns' || s === 'both';
+  }
+  function isWindowed() {
+    return rowsWindowed() || colsWindowed();
+  }
+
+  // autoMeasureOn() (Phase 87 87-07, D-18): the windowing.rzts host-contract gate for the
+  // running-mean row-size estimator. Real body here: $props.autoMeasure === true. listbox/
+  // combobox define this as a permanent `() => false` one-liner (D-20) so estimateRowSize()'s
+  // accumulator branch is dead code for them.
+  function autoMeasureOn() {
+    return local.autoMeasure === true;
+  }
+
+  // D-10 column-axis host-contract symbols. columnCount()/columnSize() got REAL bodies in
+  // 87-04 (the tracer); forcedColumns() stays an empty-array stub until 87-05 gives it the
+  // pinned + active-cell + editing-column union. Explicit return-type annotations (columnSize /
+  // forcedColumns) copy the pinMeasurement() trick (windowing.rzts) so the strict bundled-leaf
+  // tsc does not flow-narrow a no-op host's return to `never`.
+  //
+  // columnCount(): the leaf-column count the column virtualizer windows over — visibleColCount()
+  // (gridFocusNav.rzts), the SAME index space colIndexOf()/data-col-index already address (D-08).
+  function columnCount(): number {
+    return visibleColCount();
+  }
+  // columnSize(i): the authoritative width of absolute leaf column i (D-06). Reads table-core's
+  // OWN getVisibleLeafColumns() directly — NOT the host's allLeafColumns() wrapper
+  // (columnChrome.rzts), which returns plain `{ id, label, visible }` POJOs with no getSize()
+  // and also EXCLUDES the auto-injected chrome columns (select/expander), breaking the index
+  // alignment with columnCount()/colIndexOf(). getVisibleLeafColumns() is the array
+  // row.getVisibleCells() itself is built from, so its index space matches exactly. Falls back
+  // to table-core's own default column width (150) when the index is out of range.
+  function columnSize(i: number): number {
+    if (!table || !table.getVisibleLeafColumns) return 150;
+    const cols = table.getVisibleLeafColumns();
+    const c = cols[i];
+    return c && typeof c.getSize === 'function' ? c.getSize() : 150;
+  }
+  // forcedColumns() (Phase 87 87-05, D-10): the column-axis mirror of pinnedEditIndex()/
+  // pinnedMeasurement() (the row axis's D-05 pin-extension hook) — unions pinned + active-cell +
+  // editing column indices into the window slice so none of them ever recycle out from under the
+  // user. Reads table.getVisibleLeafColumns() DIRECTLY (the SAME array columnCount()/columnSize()
+  // index against, and the array row.getVisibleCells() is itself built from) — NOT
+  // allLeafColumns() (columnChrome.rzts), which excludes the auto-injected chrome columns and
+  // returns plain POJOs with no getSize(), breaking the index alignment (the exact columnSize()
+  // Rule-1 fix from 87-04, mirrored here rather than repeated).
+  //
+  // The fill-handle corner is DELIBERATELY not forced (D-10 explicit) — no call to
+  // isFillHandleCell here. The whole selected RANGE is not forced either: a range's moving
+  // corner tracks into $data.activeColIndex (extendRange/setRangeFocus), so even a 200-column
+  // range forces at most the ONE active-cell column via the branch below, never the full span —
+  // forcing the whole range would defeat the feature precisely where it is most wanted (D-10).
+  function forcedColumns(): number[] {
+    if (!colsWindowed()) return [];
+    const out = [];
+    if (table && table.getVisibleLeafColumns) {
+      const cols = table.getVisibleLeafColumns();
+      for (let i = 0; i < cols.length; i++) {
+        const c = cols[i];
+        if (c && c.getIsPinned && c.getIsPinned()) out.push(i);
+      }
+    }
+    // Active cell's column (D-10): required or focusActiveCell()'s [data-col-index="N"]
+    // querySelector cannot resolve for an off-window active cell. Body cells only — a header-
+    // active cell has no column-axis rendering dependency here (headers window separately).
+    if (!activeIsHeader() && activeColIndex() >= 0 && out.indexOf(activeColIndex()) === -1) {
+      out.push(activeColIndex());
+    }
+    // Editing column (D-10): required or an open editor unmounts mid-keystroke when a
+    // horizontal scroll recycles it — the exact failure D-02 was built to fix on the row axis
+    // (T-87-05-01, the phase's one HIGH-severity threat). Single-cell edit mode only
+    // ($data.editingRow/editingCol, mirroring editingColumnId()'s own index pair) — full-row
+    // edit mode (editingRowIndex) has no single "the editing column" to force.
+    if (editingRow() >= 0 && editingCol() >= 0 && out.indexOf(editingCol()) === -1) {
+      out.push(editingCol());
+    }
+    return out;
+  }
+
+  // windowedCells(row) (D-09): the TEMPLATE-ONLY windowed slice of a row's visible cells — wraps
+  // visibleCellsFor(row) (columnChrome.rzts) WITHOUT modifying it. Degrades to the full,
+  // unsliced set when columns are not windowed (byte-identical to today). visibleCellsFor()
+  // itself must never be sliced: colIndexOf/visibleColCount/columnIdAt/cellValueAt/beginEdit all
+  // index into its FULL result (the A2 invariant, 87-02), and slicing it would silently break
+  // all five with no compile error.
+  function windowedCells(row: any) {
+    // subscribe-first (the windowedRows() discipline) so the fine-grained targets' body <td>
+    // r-for re-derives when the column window moves.
+    void windowVer();
+    const cells = visibleCellsFor(row);
+    if (!colsWindowed()) return cells;
+    const idx = windowedColIndices();
+    const out = [];
+    for (let i = 0; i < idx.length; i++) {
+      // WR-01 shrink-window guard, one axis over: drop any index that outruns the row's
+      // current cell list (a brief stale-count window analogous to windowedRows()'s WR-01).
+      const cell = cells[idx[i]];
+      if (cell) out.push(cell);
+    }
+    return out;
+  }
+
+  // remeasureColumnWindow() (Phase 87 87-04) is declared in DataTable.rozie's OWN script, NOT
+  // here — even though it is conceptually this file's D-10 host-shell twin of remeasureWindow()
+  // above. Reason (Rule 1, found via the react typecheck gate): remeasureColumnWindow() must call
+  // columnVirtualizerOptions() (headless-core windowing.rzts). inlineScriptPartials() groups a
+  // RELATIVE partial import (this file) BEFORE a bare-package-specifier partial import
+  // (@rozie-ui/headless-core/windowing.rzts) in the merged per-target output, regardless of which
+  // import statement appears first in DataTable.rozie's own script (verified: columnVirtualizerOptions
+  // emits as a `useCallback` LATER in the react output than every symbol this file exports). A
+  // function declared HERE calling INTO windowing.rzts is therefore a forward reference — the
+  // exact TS2448 TDZ class the 87-02 predicate-layer reordering already fixed once. DataTable.rozie's
+  // OWN top-level script code lands AFTER both partial groups, so remeasureColumnWindow() is safe
+  // declared there instead (see the comment beside windowedHeaderRow()/windowedColSpan()).
+
   // windowSource(): the rows fed to the virtualizer AND held in $data.rows — the windowing.rzts
   // host-contract source. When virtual, the FULL filtered+sorted PRE-PAGINATION model
   // (A2-verified table.getPrePaginationRowModel()) so windowing REPLACES client pagination (req-9);
   // else the normal (paginated) row model — the non-virtual path is byte-unchanged.
   function windowSource() {
     if (!table) return [];
-    if (local.virtual) return table.getPrePaginationRowModel().rows;
+    if (rowsWindowed()) return table.getPrePaginationRowModel().rows;
     return table.getRowModel().rows;
   }
 
@@ -1761,6 +2023,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // Each pass only OBSERVES + measures the live window; measureElement is idempotent on an
   // already-observed node, so running both is cheap and loop-free.
   function scheduleRemeasure() {
+    // 87-13: never arm a new sweep after teardown — an onChange can still fire from a
+    // virtualizer whose own ResizeObserver cleanup has run but whose queued tick was already
+    // in flight.
+    if (remeasureDisposed) return;
     if (remeasurePending) return;
     remeasurePending = true;
     let ranMicro = false;
@@ -1768,6 +2034,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       remeasureWindow();
     };
     const rafPass = () => {
+      remeasureRaf = null;
       remeasurePending = false;
       remeasureWindow();
     };
@@ -1775,7 +2042,25 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       ranMicro = true;
       queueMicrotask(microPass);
     }
-    if (typeof requestAnimationFrame === 'function') requestAnimationFrame(rafPass);else if (ranMicro) remeasurePending = false;else setTimeout(rafPass, 0);
+    // 87-13: retain the handle so teardownRemeasure() can cancel a pass that is still pending
+    // at unmount. Without this the callback survives teardown and writes $data.windowVer.
+    if (typeof requestAnimationFrame === 'function') remeasureRaf = requestAnimationFrame(rafPass);else if (ranMicro) remeasurePending = false;else remeasureRaf = setTimeout(rafPass, 0);
+  }
+
+  // 87-13 (CR-01): idempotent teardown for the deferred sweep — the same discipline
+  // teardownFillDrag()/teardownRangeDrag() already follow. Cancels a pending pass and latches
+  // `remeasureDisposed` so the microtask twin (which carries no cancellable handle) and any
+  // in-flight onChange both bail instead of writing to a torn-down instance.
+  function teardownRemeasure() {
+    remeasureDisposed = true;
+    if (remeasureRaf != null) {
+      // Discriminate on requestAnimationFrame — the SAME predicate scheduleRemeasure() branched
+      // on when it produced this handle. Testing cancelAnimationFrame instead would hand a
+      // setTimeout id to cancelAnimationFrame in any env where the two disagree.
+      if (typeof requestAnimationFrame === 'function') cancelAnimationFrame(remeasureRaf);else clearTimeout(remeasureRaf);
+      remeasureRaf = null;
+    }
+    remeasurePending = false;
   }
 
   // pinnedEditIndex(): the FULL-MODEL row index of the row currently in edit (D-02 pin-row),
@@ -1810,6 +2095,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // idempotent on an already-observed node (the `prevNode !== node` guard), so re-sweeping the
   // visible window each commit is cheap and loop-free.
   function remeasureWindow() {
+    // 87-13 (CR-01): the disposed latch, checked BEFORE the ref guard below. That guard cannot
+    // cover unmount — virtualizer/gridRoot are assigned in $onMount and never nulled — so this
+    // is the only thing standing between a pass queued pre-unmount and refineRowEstimate()'s
+    // setOptions/scrollTop/$data.windowVer writes against a torn-down instance.
+    if (remeasureDisposed) return;
     if (!virtualizer || !gridRoot) return;
     // Bail ONLY while a PROGRAMMATIC scroll is in flight: virtualizer.scrollState is non-null
     // exclusively during scrollToIndex / scrollToOffset (the D-12 scroll-then-focus seam) and
@@ -1821,6 +2111,14 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     if (virtualizer.scrollState) return;
     const trs = gridRoot.querySelectorAll('tbody.rdt-tbody > tr[data-index]');
     for (const tr of trs as any) virtualizer.measureElement(tr);
+    // D-15 (Phase 87 87-07): trigger the shared engine's post-measurement fold + hysteresis
+    // re-feed via the afterRowRemeasure mutable-let hook (DataTable.rozie's own script,
+    // assigned to windowing.rzts's refineRowEstimate()) — NEVER a direct call from this file
+    // into windowing.rzts (see windowing.rzts's HOST CONTRACT comment for the forward-
+    // reference TDZ this indirection avoids, the same class remeasureColumnWindow()'s comment
+    // documents for columnVirtualizerOptions()). Inert (no-op) until the host assigns it; the
+    // off/pre-mount path never reaches this line since virtualizer is null there.
+    if (afterRowRemeasure) afterRowRemeasure();
   }
 
   // D-04: this shell exports ONLY the impure, data-table-specific host pieces. The pure windowing
@@ -1851,6 +2149,61 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   //                             defaulting to no-op): the DataTable host passes its edit-pinning hooks;
   //                             listbox passes nothing. Routing pinning through this host hook (NOT
   //                             inlining it) keeps DataTable's B13 edit-pinning behavior byte-identical.
+  //   - rowsWindowed(): boolean  — is the ROW axis windowed. REQUIRED, no default — replaces every bare
+  //                             truthiness read of the host's windowing prop (D-05); `windowedRows()` /
+  //                             `padTop()` / `padBottom()` / `rowIsOutsideWindow()` below call it by
+  //                             convention exactly as they already call `pinnedEditIndex()`.
+  //   - colsWindowed(): boolean  — is the COLUMN axis windowed. REQUIRED, no default. `false` for every
+  //                             host until it defines the real column-axis mechanism (87-04+).
+  //   - columnCount(): number    — the leaf-column count the column virtualizer windows over. REQUIRED,
+  //                             no default.
+  //   - columnSize(i: number): number — the authoritative width of absolute leaf column `i`, sourced
+  //                             from table-core's `getSize()` under D-06. REQUIRED, no default.
+  //   - forcedColumns(): number[] — the D-10 OPTIONAL column-axis mirror of `pinnedEditIndex()`: the
+  //                             DataTable host unions pinned + active-cell + editing column indices into
+  //                             the column-window slice; listbox/combobox pass an empty array (host-
+  //                             provided, defaulting to `[]`).
+  //   - colVirtualizer           — the host's SECOND virtual-core instance, windowing the COLUMN axis
+  //                             (see the AXIS MECHANISM note below). Host-provided, defaulting to `null`.
+  //   - autoMeasureOn(): boolean — the D-18 REQUIRED content-driven-estimate gate (Phase 87 87-07):
+  //                             data-table's real body reads `$props.autoMeasure === true`; listbox/
+  //                             combobox/command-palette return `false` so the accumulator branch
+  //                             estimateRowSize() gates on is dead code for them (D-20).
+  //   - afterRowRemeasure        — OPTIONAL host-owned mutable `let` (defaults to a no-op / undefined),
+  //                             assigned to refineRowEstimate() (below) by the host. The DataTable
+  //                             host's remeasureWindow() (virtualization.rzts) calls it AFTER its
+  //                             measureElement sweep so the fold + hysteresis re-feed run on every
+  //                             window commit. Routed through a mutable `let` rather than a direct
+  //                             call FROM virtualization.rzts INTO this file: a relative-partial CONST
+  //                             calling a bare-specifier-partial CONST is the exact forward-reference
+  //                             TDZ class remeasureColumnWindow()'s own DataTable.rozie comment
+  //                             documents for columnVirtualizerOptions() (inlineScriptPartials()
+  //                             groups the relative partial BEFORE the bare-specifier partial in the
+  //                             merged per-target output, regardless of source import order). A
+  //                             mutable `let` hoists to `useRef` on React and is excluded from a
+  //                             useCallback's dependency array, sidestepping the hazard entirely — the
+  //                             SAME mechanism `refreshRowModel` already relies on.
+  //
+  // AXIS MECHANISM (OQ1 / Assumption A1 — resolved from the installed source in 87-02;
+  // LANDED in 87-04: `columnVirtualizerOptions()` below IS the second, horizontal instance this
+  // note originally only documented). `horizontal` is a PER-INSTANCE field of `VirtualizerOptions`
+  // (`node_modules/@tanstack/virtual-core/dist/esm/index.d.ts:67`, installed version 3.17.1 per
+  // `package.json`), and every axis-sensitive internal read consults `instance.options.horizontal` —
+  // `measureElement`'s inlineSize/blockSize + offsetWidth/offsetHeight branch
+  // (`dist/esm/index.js:137,150`), `observeElementOffset`'s scrollLeft/scrollTop branch
+  // (`dist/esm/index.js:118-121`), `getMaxScrollOffset`'s scrollWidth/scrollHeight branch
+  // (`dist/esm/index.js:907-915`), and `scrollWithAdjustments`'s left/top branch
+  // (`dist/esm/index.js:152-161`). So ONE `Virtualizer` instance windows exactly ONE axis: the column
+  // axis needs its own SECOND, independent `Virtualizer` instance constructed with `horizontal: true`,
+  // sharing the SAME `getScrollElement()` (the `rdt-scroll` wrapper) the row instance already uses.
+  // Two options the row axis does not set that the column instance will need: `isRtl?: boolean`
+  // (data-table ships an RTL grid path) and `overscan?: number` (D-07 gives the column axis its own
+  // hardcoded constant, separate from the row axis's `overscan: 8` below).
+  //
+  // isRtl WIRING (gap-closure 87-09, LANDED — see `ensureColRtlWatch()`/`isColRtl()` below,
+  // immediately ahead of `columnVirtualizerOptions()`): data-table has no construction-time RTL
+  // signal (no `dir`/`rtl` prop), and `dir` can be set on `gridScrollEl` at ANY point relative to
+  // mount. `isRtl` is therefore computed LIVE via `getComputedStyle`, not baked in once.
 
   // getItemKey reads the LIVE source (never a frozen mount-render $data.rows closure — the F6
   // React stale-closure lesson) so virtual-core's measurement cache keys by stable full-model row
@@ -1860,17 +2213,316 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     return src && src[i] ? src[i].id : undefined;
   }
 
+  // COL_OVERSCAN (D-07): the column axis's own hardcoded overscan constant, separate from the
+  // row axis's `overscan: 8` below. Columns are far wider than rows are tall, so one number
+  // cannot serve both axes; no prop is exposed because no consumer has asked to tune the row
+  // overscan across the four phases it has shipped. Unused until 87-04 constructs the second,
+  // horizontal Virtualizer instance (see the AXIS MECHANISM note above).
+  const COL_OVERSCAN = 3;
+
+  // columnVirtualizerOptions() (Phase 87 87-04): the SECOND, horizontal Virtualizer instance's
+  // full options set — the AXIS MECHANISM note's second instance, landed. Mirrors
+  // virtualizerOptions() exactly except: count/estimateSize read the COLUMN host symbols,
+  // horizontal:true selects the axis, overscan is the column axis's OWN constant (D-07), and
+  // there is NO getItemKey — columns have no stable per-column id in the virtual-core sense, so
+  // they key by index (virtual-core's default). onChange bumps the SAME $data.windowVer counter
+  // the row axis uses (87-02 checkpoint decision (b): no separate $data.colWindowVer) but does
+  // NOT call scheduleRemeasure(): under D-06 column widths come from table-core's getSize()
+  // oracle and are NEVER measured from the DOM, so a horizontal scroll has nothing new to
+  // observe (unlike the row axis's CR-01 recycled-row remeasure sweep).
+  // ══ Gap-closure 87-09 (dir="rtl" column windowing) ═══════════════════════════════════════
+  // virtual-core reads `instance.options.isRtl` FRESH on every native 'scroll' event — the
+  // negation lives inside `observeElementOffset`'s internal per-event closure
+  // (`dist/esm/index.js:119-120`: `el.scrollLeft * (isRtl && -1 || 1)`), called anew each time
+  // the browser fires 'scroll'. But `instance.options` itself is only a plain VALUE snapshot
+  // taken by the LAST `setOptions()` call (`dist/esm/index.js:277-280`:
+  // `for (const key in opts2) merged[key] = opts2[key]` copies the boolean, not a live binding
+  // or getter) — so a static `isRtl` computed ONCE at `colVirtualizer` construction would only
+  // ever reflect direction AT THAT INSTANT. `dir` can be set on `gridScrollEl` at any point
+  // relative to mount (data-table has no construction-time RTL prop), so a MutationObserver on
+  // `gridScrollEl`'s own `dir` attribute re-feeds `colVirtualizer`'s options — a cheap
+  // object-merge via `setOptions()`, deliberately NOT a forced `_willUpdate()` recompute, since
+  // nothing needs to repaint until the next real scroll — the moment direction flips. By the
+  // time the NEXT native 'scroll' event's own offset read runs, `instance.options.isRtl`
+  // already reflects the correction. Ordering is spec-guaranteed, not a race: MutationObserver
+  // callbacks run on the microtask queue, which the HTML event loop always drains before the
+  // next task — and a native 'scroll' event dispatched after a programmatic `scrollLeft` write
+  // is itself a subsequent task, not a microtask racing the same tick.
+  //
+  // F6 STALE-CLOSURE HAZARD (found + fixed this task, React only): calling
+  // columnVirtualizerOptions() FRESH from inside the MutationObserver's callback would
+  // re-derive `count`/`estimateSize` via columnCount() (virtualization.rzts's
+  // visibleColCount(), which reads `$data.rows`). The MutationObserver is attached ONCE,
+  // inside ensureColRtlWatch() at colVirtualizer CONSTRUCTION time ($onMount) — a closure
+  // FROZEN to that render's scope on React, where `$data.rows` is a useState value.
+  // $onMount's row-model seed (refreshRowModel()) resolves via an ASYNC setState, so AT THE
+  // EXACT INSTANT colVirtualizer is constructed, `rows` may still be `[]` in THAT render's
+  // closure — and unlike a `let`-hoisted ref (virtualizer, table, gridScrollEl — always read
+  // via `.current`, always live no matter which render's closure holds the reference),
+  // `$data.rows` is genuine React state: a plain local binding recreated fresh EVERY render,
+  // so a function captured from an OLDER render reads that OLDER render's snapshot FOREVER,
+  // no matter how many later renders populate it. Confirmed empirically: calling
+  // columnVirtualizerOptions() from the frozen callback read `count` back as 0 (not 60),
+  // collapsing getVirtualItems() to []. This is the exact class of bug `virtualItemKey`'s own
+  // header comment already documents ("never a frozen mount-render $data.rows closure") — and
+  // a MUTABLE-LET INDIRECTION (the `afterRowRemeasure` shape, 87-07) does NOT fix it here,
+  // because the hazard lives INSIDE columnVirtualizerOptions()'s own dependency chain
+  // ($data.rows), not in "which function identity gets called" — wrapping a stale call in
+  // another layer of ref does not make an inner React-state read fresh.
+  //
+  // FIX: never call columnVirtualizerOptions() again from this callback at all. Read
+  // `colVirtualizer.options` — virtual-core's OWN internal state, mutated in place on every
+  // setOptions() call regardless of which render's closure triggered it (a REAL object
+  // reference the SAME way `virtualizer`/`table` are, not React state) — and merge in ONLY
+  // the corrected `isRtl`. `count`/`estimateSize`/etc. keep whatever value the LAST correct
+  // setOptions() call gave them (from construction, or from remeasureColumnWindow()'s own
+  // FRESH-per-render re-feed via the $watch-driven refreshRowModel cycle) — untouched,
+  // because this dir-flip has nothing to do with row/column count. isColRtl() itself reads
+  // only `gridScrollEl` (also a ref) and does a live DOM getComputedStyle read — no React
+  // state involved, so it is never stale regardless of which render's closure calls it.
+  let colRtlObserver: any = null;
+  let colRtlObserverEl: any = null;
+
+  // isColRtl(): getComputedStyle (not a raw `.getAttribute('dir')` read) so an ANCESTOR's `dir`
+  // or a CSS `direction: rtl` rule is honored the same way the browser's own bidi layout honors
+  // it, not merely a literal attribute on gridScrollEl itself.
+  function isColRtl(): boolean {
+    if (!gridScrollEl || typeof getComputedStyle !== 'function') return false;
+    return getComputedStyle(gridScrollEl).direction === 'rtl';
+  }
+
+  // ensureColRtlWatch(): idempotent — a no-op once already attached to the CURRENT gridScrollEl
+  // (a stable ref for the component's lifetime once mounted). Self-attaching from inside
+  // columnVirtualizerOptions() means no new host-contract symbol is needed: listbox/combobox/
+  // command-palette never call columnVirtualizerOptions() at all (colsWindowed() is permanently
+  // false for them, D-20), so this code path — and the observer it creates — never exists there.
+  function ensureColRtlWatch(): void {
+    if (!gridScrollEl || colRtlObserverEl === gridScrollEl || typeof MutationObserver !== 'function') return;
+    if (colRtlObserver) colRtlObserver.disconnect();
+    colRtlObserver = new MutationObserver(() => {
+      if (colVirtualizer) colVirtualizer.setOptions({
+        ...colVirtualizer.options,
+        isRtl: isColRtl()
+      });
+    });
+    colRtlObserver.observe(gridScrollEl, {
+      attributes: true,
+      attributeFilter: ['dir']
+    });
+    colRtlObserverEl = gridScrollEl;
+  }
+
+  // teardownColRtlWatch(): exported so the DataTable host disconnects the observer alongside
+  // colVirtualizerCleanup() in $onUnmount — mirrors virtual-core's own _didMount()/teardown
+  // discipline for the ResizeObserver it manages internally. No-op if never attached.
+  function teardownColRtlWatch(): void {
+    if (colRtlObserver) colRtlObserver.disconnect();
+    colRtlObserver = null;
+    colRtlObserverEl = null;
+  }
+  function columnVirtualizerOptions(): any {
+    ensureColRtlWatch();
+    return {
+      count: columnCount(),
+      getScrollElement: () => gridScrollEl,
+      estimateSize: (i: any) => columnSize(i),
+      horizontal: true,
+      isRtl: isColRtl(),
+      observeElementRect,
+      observeElementOffset,
+      scrollToFn: elementScroll,
+      measureElement,
+      overscan: COL_OVERSCAN,
+      onChange: () => {
+        setWindowVer(windowVer() + 1);
+      }
+    };
+  }
+
+  // ══ Phase 87 87-07 (D-15/D-18) — content-driven auto-measure: the shared engine's FIRST
+  // mutable top-level state. Hoisted to `useRef` PER-INSTANCE by the React emitter's
+  // hoistModuleLet — the SAME mechanism already load-bearing for `table`, `virtualizer`,
+  // `remeasurePending`, and `gridScrollEl` in the DataTable host (Task 1's confirmed
+  // precedent), so two DataTable instances on one page never share an accumulator
+  // (T-87-07-04). measuredRowTotal/measuredRowCount together give the running MEAN of every
+  // row folded in so far; lastFedRowEstimate is the estimate value most recently pushed into
+  // virtual-core (the hysteresis comparison baseline). ══
+  let measuredRowTotal = 0;
+  let measuredRowCount = 0;
+  let lastFedRowEstimate = 0;
+  // foldedRowHeights: dedupe map (full-model row index -> its last-folded height) so a row
+  // measured TWICE (e.g. scrolled back into view) UPDATES the running mean rather than being
+  // added a second time (T-87-07-03) — a skewed mean produces a lying scrollbar, the exact
+  // defect this feature exists to remove.
+  let foldedRowHeights: Record<number, number> = {};
+
+  // ══ Gap-closure 87-10 — windowVerBumpPending / bumpWindowVer(): coalesce EVERY $data.windowVer
+  // write behind a SINGLE microtask-deferred increment, regardless of how many callers request
+  // one within the same synchronous JS task. ══
+  //
+  // ROOT CAUSE (framework-agnostic; the Solid-specific symptom this closes only EXPOSES it) —
+  // confirmed by instrumenting the installed @tanstack/virtual-core@3.17.1 source directly
+  // (dist/esm/index.js), not by reasoning abstractly: virtual-core's resizeItem() calls
+  // `this.notify(false)` — synchronously invoking `virtualizerOptions().onChange` below — EVERY
+  // TIME a measured row's real size differs from its cached one (`delta !== 0`), independent of
+  // framework (dist/esm/index.js:836-874). remeasureWindow()'s CR-01 sweep
+  // (packages/ui/data-table/src/virtualization.rzts) measures EVERY currently-rendered `<tr>` in
+  // ONE for-loop BEFORE calling afterRowRemeasure() (refineRowEstimate() below) — so a single
+  // synchronous JS task (e.g. the very first measurement pass, which transitions N never-before-
+  // measured rows from the flat seed to their real heights) can fire onChange, and therefore an
+  // UNCOALESCED `$data.windowVer = $data.windowVer + 1`, MANY times in a row — well BEFORE
+  // refineRowEstimate()'s own fold-then-re-feed (which runs only AFTER that loop finishes) has
+  // folded those same measurements into the running mean or re-fed the converged estimate into
+  // virtual-core via setOptions(). A live trace of this exact sequence (instrumented resizeItem/
+  // getMeasurements calls, DataTableColumnVirtualDemo, autoMeasure on) showed Vue batching 3
+  // resizeItem calls before its ONE downstream re-render reads getMeasurements() — already
+  // reflecting the fully-folded, re-fed state — versus Solid re-running its padTop()/padBottom()
+  // effects SYNCHRONOUSLY and IMMEDIATELY on EVERY individual windowVer write (11 interleaved
+  // resize-then-immediate-recompute pairs, each recompute happening mid-sweep, before
+  // refineRowEstimate() had run even once). React/Vue/Svelte/Angular/Lit all batch their own
+  // reactivity to at least a microtask boundary, so their downstream reads land AFTER the whole
+  // synchronous burst (measurement sweep + fold + re-feed) completes — accidentally correct, not
+  // correct by construction. Solid does not auto-batch a signal write made from outside a
+  // Solid-owned event/effect context, so it is the one target where the mid-burst TORN read is
+  // externally observable. Because `setOptions()` + `_willUpdate()` alone do NOT invalidate
+  // virtual-core's own `getMeasurements()` memo (keyed on itemSizeCacheVersion /
+  // getMeasurementOptions() — never on the estimateSize FUNCTION reference itself; confirmed from
+  // the same installed source, dist/esm/index.js:585-587,624), Solid's LAST such mid-sweep
+  // recompute is also the LAST time getMeasurements() is ever invoked for that sweep once no
+  // further row happens to differ from its cache — so the DOM stays frozen on that stale,
+  // pre-fold/pre-re-feed snapshot indefinitely, even though the accumulator itself has already
+  // converged correctly (T-87-07's own confirmed finding).
+  //
+  // FIX: coalesce every requester of a windowVer bump — virtual-core's own onChange AND
+  // refineRowEstimate()'s explicit re-feed bump — behind ONE microtask-deferred write, the SAME
+  // idiom scheduleRemeasure() already uses in virtualization.rzts. This makes the render happen
+  // EXACTLY ONCE, strictly AFTER the entire synchronous burst (including refineRowEstimate()'s
+  // fold + re-feed) on EVERY target, by construction rather than by incidental host-framework
+  // batching. Scoped to the ROW axis only: colVirtualizer never calls resizeItem() at all (D-06 —
+  // column widths come from table-core's getSize() oracle, never measured from the DOM), so
+  // columnVirtualizerOptions()'s onChange cannot hit this burst class and is left untouched.
+  let windowVerBumpPending = false;
+  function bumpWindowVer(): void {
+    if (windowVerBumpPending) return;
+    windowVerBumpPending = true;
+    const flush = () => {
+      windowVerBumpPending = false;
+      setWindowVer(windowVer() + 1);
+    };
+    // Mirrors scheduleRemeasure()'s own defensive queueMicrotask-with-setTimeout-fallback
+    // (virtualization.rzts) for environments where queueMicrotask is unavailable.
+    if (typeof queueMicrotask !== 'undefined') queueMicrotask(flush);else setTimeout(flush, 0);
+  }
+
+  // ESTIMATE_REFEED_DELTA_PX (D-15): the hysteresis threshold gating a re-feed into
+  // virtual-core. Without it, a mean nudging by a fraction of a pixel on every fold would
+  // re-feed on every window commit — the T-87-07-01 DoS control, paired with virtual-core's
+  // own measureElement/resizeItem idempotence (see refineRowEstimate() below).
+  const ESTIMATE_REFEED_DELTA_PX = 4;
+
+  // estimateRowSize(i) (D-15/D-17): the estimateSize() resolver. MUST check !autoMeasureOn()
+  // FIRST so the off path touches zero accumulator state and returns $props.estimateRowHeight
+  // verbatim (D-17's byte-behavioral no-op). The zero-measurements case (first paint,
+  // regardless of autoMeasure) still returns the seed — the very first render has nothing
+  // measured yet either way (D-15).
+  function estimateRowSize(i: number): number {
+    if (!autoMeasureOn()) return local.estimateRowHeight;
+    if (measuredRowCount === 0) return local.estimateRowHeight;
+    return Math.round(measuredRowTotal / measuredRowCount);
+  }
+
+  // foldMeasuredRow(index, height): fold ONE measured row's height into the running-mean
+  // accumulator, UPDATING (not double-adding) an already-folded index (T-87-07-03).
+  function foldMeasuredRow(index: number, height: number): void {
+    const prev = foldedRowHeights[index];
+    if (prev === height) return;
+    if (prev == null) {
+      measuredRowTotal = measuredRowTotal + height;
+      measuredRowCount = measuredRowCount + 1;
+    } else {
+      measuredRowTotal = measuredRowTotal - prev + height;
+    }
+    foldedRowHeights[index] = height;
+  }
+
+  // refineRowEstimate() (D-15/D-16, Phase 87 87-07): the shared engine's post-measurement
+  // orchestration, called via the host's afterRowRemeasure hook (see the HOST CONTRACT note
+  // above for why this is never called directly FROM virtualization.rzts). Folds every
+  // CURRENTLY RENDERED row's REAL measurement (from virtual-core's own getMeasurements() —
+  // never a DOM read), then hysteresis-gates a re-feed into virtual-core, reusing the EXACT
+  // `virtualizer.scrollState` bail remeasureWindow() already applies (T-87-07-02) rather than
+  // inventing a second gating mechanism, and finally (Task 3, D-16) anchor-corrects scrollTop
+  // around the re-feed so the row under the user's eye does not visibly lurch. Entirely a
+  // no-op when !autoMeasureOn() — the off path never folds a measurement, touches
+  // lastFedRowEstimate, or adjusts scrollTop (D-17).
+  function refineRowEstimate(): void {
+    if (!autoMeasureOn() || !virtualizer) return;
+    const items = virtualizer.getVirtualItems();
+    const measurements = virtualizer.getMeasurements();
+    for (let i = 0; i < items.length; i++) {
+      const idx = items[i].index;
+      const m = measurements && measurements[idx];
+      if (m) foldMeasuredRow(idx, m.size);
+    }
+    // T-87-07-02: never re-feed while a PROGRAMMATIC scroll is in flight — the exact bail
+    // remeasureWindow() already applies (virtualizer.scrollState is non-null only during
+    // scrollToIndex/scrollToOffset).
+    if (virtualizer.scrollState) return;
+    const est = estimateRowSize(0);
+    if (Math.abs(est - lastFedRowEstimate) < ESTIMATE_REFEED_DELTA_PX) return;
+    // D-16 anchor capture: the topmost rendered row's full-model index + its CURRENT offset,
+    // taken from virtual-core's own measurements (never a getBoundingClientRect() layout read
+    // — slower, and inconsistent with the measurements the spacer math already uses) — taken
+    // BEFORE the re-feed so the correction below can compute exactly the delta the re-feed
+    // itself introduces. Not restricted to scroll offset 0 (D-16 explicit): a table restored
+    // mid-scroll, or whose content changes height after scrolling, must refine too.
+    const anchorIndex = items.length ? items[0].index : -1;
+    const anchorStart = items.length ? items[0].start : 0;
+    virtualizer.setOptions(virtualizerOptions());
+    virtualizer._willUpdate();
+    lastFedRowEstimate = est;
+    // D-16 anchor correction: read the SAME index's fresh measurement post-re-feed and adjust
+    // scrollTop by the delta so the row under the user's eye stays visually put. Guarded by
+    // the SAME path the re-feed itself is gated on (autoMeasureOn() && scrollState === null,
+    // both already checked above), so it can never fight a programmatic scroll (T-87-07-02).
+    if (anchorIndex >= 0 && gridScrollEl) {
+      const freshMeasurements = virtualizer.getMeasurements();
+      const fresh = freshMeasurements && freshMeasurements[anchorIndex];
+      if (fresh) {
+        const delta = fresh.start - anchorStart;
+        if (delta !== 0) gridScrollEl.scrollTop = gridScrollEl.scrollTop + delta;
+      }
+    }
+    // Explicit windowVer bump (87-07, Rule 1): virtual-core's own setOptions()+_willUpdate()
+    // re-feed above does NOT itself invoke notify()/onChange (confirmed from the installed
+    // source: _willUpdate() is a no-op once `scrollElement` is already set, dist/esm/
+    // index.js:389-393), so a re-feed needs its own explicit trigger to make the spacer
+    // re-derivation happen at all. Routed through bumpWindowVer() (87-10, see its own comment
+    // above) rather than a raw `$data.windowVer = $data.windowVer + 1` — coalescing this bump
+    // with any onChange-triggered ones already pending from the SAME synchronous sweep is what
+    // makes the eventual render land strictly AFTER this fold + re-feed has fully landed, on
+    // every target (the 87-10 fix for the confirmed Solid-specific rendering gap).
+    bumpWindowVer();
+  }
+
   // The FULL virtualizer options. virtual-core's setOptions REPLACES options with
   // `{ ...defaults, ...opts }` (it does NOT merge with prior options — verified in the 3.17.1
   // source), so the re-feed MUST pass the complete set, exactly like every TanStack adapter.
   // Returned `any` (the currentState() precedent) so the strict bundled-leaf tsc does not choke
-  // on virtual-core's generic option inference. onChange uses the `$data.x = $data.x + 1`
-  // increment the React emitter lowers to functional setState — correct even from a mount closure.
+  // on virtual-core's generic option inference. onChange's windowVer write is routed through
+  // bumpWindowVer() (87-10) rather than a raw `$data.x = $data.x + 1` — resizeItem() can call
+  // this onChange MANY times in a single synchronous sweep (once per row whose real measured
+  // size differs from its cache, e.g. every never-before-measured row in the FIRST window),
+  // and coalescing those into one microtask-deferred write is what keeps every target's render
+  // landing strictly AFTER the whole sweep (see bumpWindowVer()'s own comment for the confirmed
+  // Solid-specific rendering gap this closes). The React emitter still lowers the underlying
+  // `$data.windowVer = $data.windowVer + 1` to functional setState — correct even deferred to a
+  // microtask, exactly as it was correct from a mount closure before.
   function virtualizerOptions(): any {
     return {
       count: windowSource().length,
       getScrollElement: () => gridScrollEl,
-      estimateSize: () => local.estimateRowHeight,
+      estimateSize: (i: any) => estimateRowSize(i),
       observeElementRect,
       observeElementOffset,
       scrollToFn: elementScroll,
@@ -1878,7 +2530,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       overscan: 8,
       getItemKey: virtualItemKey,
       onChange: () => {
-        setWindowVer(windowVer() + 1);
+        bumpWindowVer();
         // CR-01: re-observe the freshly-committed window so RECYCLED rows get measured.
         // virtual-core only observe()s a node you explicitly hand to measureElement (it does
         // NOT auto-discover rendered rows — measureElement is the SOLE caller of
@@ -1933,14 +2585,23 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     void windowVer();
     void editVer();
     if (!virtualizer) {
-      // Virtual OFF → full set (the r-else table never calls this, but keep it total). Virtual ON
-      // but the virtualizer is not yet constructed (pre-$onMount first paint) → render NOTHING so
-      // the template never dereferences a null `vi` (the windowed bindings read wr.vi.index); the
-      // rows appear on the first onChange after _didMount.
-      if (!local.virtual) {
+      // Rows OFF (Phase 87 D-04: this now includes the colsWindowed()-only path, since the
+      // wrapper template is entered whenever isWindowed(), not just rowsWindowed() — the row
+      // virtualizer is never constructed when only the column axis is windowed, D-04) → the FULL
+      // set, with a SYNTHETIC `vi.index` set to each row's array position (matching rowIndexOf's
+      // own `$data.rows.indexOf(row)` semantics exactly, since $data.rows IS windowSource()'s
+      // output here). Every windowed body binding reads wr.vi.index (data-row, aria-rowindex,
+      // colIndexOf, isEditing, the fill handle) — a bare `null` there is a hard crash the moment
+      // this branch is reached with the wrapper mounted, which colsWindowed()-only now does.
+      // Row-virtual ON but the virtualizer is not yet constructed (pre-$onMount first paint) →
+      // render NOTHING so the template never dereferences a not-yet-real `vi`; the rows appear on
+      // the first onChange after _didMount.
+      if (!rowsWindowed()) {
         const rowList = rows() || [];
-        return rowList.map((r: any) => ({
-          vi: null,
+        return rowList.map((r: any, i: any) => ({
+          vi: {
+            index: i
+          },
           row: r
         }));
       }
@@ -1997,7 +2658,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // and re-derives on the pin/unpin transition (the D-02 spacer subtraction below).
     void windowVer();
     void editVer();
-    if (!local.virtual || !virtualizer) return 0;
+    if (!rowsWindowed() || !virtualizer) return 0;
     const items = virtualizer.getVirtualItems();
     let pad = items.length ? items[0].start : 0;
     // D-02 spacer subtraction: when the pinned editing row sits ABOVE the window it is rendered
@@ -2017,7 +2678,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // on pin/unpin.
     void windowVer();
     void editVer();
-    if (!local.virtual || !virtualizer) return 0;
+    if (!rowsWindowed() || !virtualizer) return 0;
     const items = virtualizer.getVirtualItems();
     if (!items.length) return 0;
     let pad = virtualizer.getTotalSize() - items[items.length - 1].end;
@@ -2049,12 +2710,140 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // rowIsOutsideWindow(r): is the full-model row index r absent from the currently rendered
   // window? Used by the scroll-then-focus seam (req-5 — scroll a far row in before focusing).
   function rowIsOutsideWindow(r: any) {
-    if (!local.virtual || !virtualizer) return false;
+    if (!rowsWindowed() || !virtualizer) return false;
     const items = virtualizer.getVirtualItems();
     for (const it of items as any) if (it.index === r) return false;
     return true;
   }
 
+  // ══ Phase 87 87-04 — the column-axis analogs of windowedRows()/padTop()/padBottom()/
+  // rowIsOutsideWindow() above. The column axis has no "row-shaped" identity to carry alongside
+  // a VirtualItem (a column is not a full-model object the way a row is), so windowedColIndices()
+  // returns bare ABSOLUTE leaf-column indices; the template resolves each index back to a header/
+  // cell through the host's own header-group / visibleCellsFor lookups (D-08/D-09). ══
+
+  // windowedColIndices(): the ordered array of ABSOLUTE leaf-column indices to render.
+  function windowedColIndices() {
+    // SUBSCRIBE FIRST (the windowedRows() discipline): colVirtualizer is a non-reactive `let`,
+    // null at first render, so a $data.windowVer read placed BELOW the guards below would mean
+    // Solid's <For> / Svelte's {#each} accessors never subscribe — the column window would stay
+    // blank forever on exactly those two targets. Also subscribe to editVer (mirrors the row
+    // axis's pin/unpin re-derive — the D-10 forced-column union lands on top of this in 87-05).
+    void windowVer();
+    void editVer();
+    if (!colsWindowed()) {
+      // Columns OFF (or rows-only windowed) → every absolute index, the degrade-to-full-set
+      // path that keeps the caller (windowedCells / the header loop) axis-agnostic.
+      const n = columnCount();
+      const out = [];
+      for (let i = 0; i < n; i++) out.push(i);
+      return out;
+    }
+    // Columns windowed but the column virtualizer is not yet constructed (pre-$onMount first
+    // paint) → render NOTHING, matching windowedRows()'s pre-mount behavior.
+    if (!colVirtualizer) return [];
+    const items = colVirtualizer.getVirtualItems();
+    const idx = items.map((it: any) => it.index);
+    // D-10 forced-column union (host hook — empty array until 87-05 gives it a real body):
+    // dedupe-then-append any forced index not already in the virtualized window.
+    const forced = forcedColumns();
+    for (let i = 0; i < forced.length; i++) {
+      if (idx.indexOf(forced[i]) === -1) idx.push(forced[i]);
+    }
+    // Sorted ascending: the body <td> sequence and the header <th> sequence both follow visual
+    // left-to-right order, and the virtual items + forced union are not guaranteed sorted.
+    idx.sort((a: any, b: any) => a - b);
+    return idx;
+  }
+
+  // colPadLeft() / colPadRight() (D-06): the horizontal spacer <td>/<th> widths — the leading
+  // spacer occupies items[0].start, the trailing spacer the gap between the last rendered
+  // item's end and getTotalSize(). Mirrors padTop()/padBottom() exactly, INCLUDING the D-02-style
+  // pin subtraction (87-05): forcedColumns() can return MULTIPLE forced indices (pinned + active +
+  // editing, not just one pin), so each forced index outside the virtual window is checked
+  // individually. A forced column rendered outside the window contributes its OWN real width to
+  // the row (via its <th>/<td>'s own inline width under table-layout:fixed), so that width must
+  // come OUT of the spacer or the row's total overshoots getTotalSize() and the horizontal
+  // scrollbar lengthens on every such scroll. WR-01: decide before/after the window by comparing
+  // the forced INDEX against the window's first/last item INDEX, never by start-OFFSET —
+  // measurement drift makes the offset comparison wrong for the variable-width case (mirrors
+  // padBottom()'s existing WR-01 discipline). A forced column's width is columnSize(i) (the
+  // table-core size oracle, D-06's authoritative source), never a DOM measurement.
+  function colPadLeft() {
+    void windowVer();
+    void editVer();
+    if (!colsWindowed() || !colVirtualizer) return 0;
+    const items = colVirtualizer.getVirtualItems();
+    let pad = items.length ? items[0].start : 0;
+    if (items.length) {
+      const firstIdx = items[0].index;
+      const forced = forcedColumns();
+      for (let i = 0; i < forced.length; i++) {
+        if (forced[i] < firstIdx) pad = pad - columnSize(forced[i]);
+      }
+    }
+    return pad < 0 ? 0 : pad;
+  }
+  function colPadRight() {
+    void windowVer();
+    void editVer();
+    if (!colsWindowed() || !colVirtualizer) return 0;
+    const items = colVirtualizer.getVirtualItems();
+    if (!items.length) return 0;
+    let pad = colVirtualizer.getTotalSize() - items[items.length - 1].end;
+    const lastIdx = items[items.length - 1].index;
+    const forced = forcedColumns();
+    for (let i = 0; i < forced.length; i++) {
+      if (forced[i] > lastIdx) pad = pad - columnSize(forced[i]);
+    }
+    return pad < 0 ? 0 : pad;
+  }
+  // colIsOutsideWindow(c): is the absolute leaf-column index c absent from the currently
+  // rendered column window? The column-axis analog of rowIsOutsideWindow(r) (D-12's
+  // scroll-then-focus seam, wired starting 87-06). Gated on colsWindowed() (never a bare prop
+  // truthiness read — the 87-02 prohibition gate).
+  function colIsOutsideWindow(c: any) {
+    if (!colsWindowed() || !colVirtualizer) return false;
+    const items = colVirtualizer.getVirtualItems();
+    for (const it of items as any) if (it.index === c) return false;
+    return true;
+  }
+
+  // afterRowRemeasure (Phase 87 87-07, D-15): a mutable-`let` indirection so
+  // virtualization.rzts's remeasureWindow() (a relative-partial CONST, textually EARLIER
+  // than windowing.rzts in the merged per-target output) can trigger the shared engine's
+  // post-measurement fold + hysteresis re-feed (refineRowEstimate(), windowing.rzts) without
+  // calling a bare-specifier-partial CONST directly — the exact forward-reference TDZ class
+  // remeasureColumnWindow()'s own comment below documents for columnVirtualizerOptions(). A
+  // mutable `let` hoists to `useRef` on React and never enters a useCallback's dependency
+  // array, sidestepping the hazard there.
+  //
+  // DECLARED HERE — a plain top-level statement placed AFTER both import lines above, NOT
+  // grouped with the other windowing `let`s near the top of this file, and NOT deferred into
+  // $onMount. Two Rule-1 bugs were found and fixed in this exact spot this task, both via the
+  // VR suite:
+  //   (a) A top-level `let X = refineRowEstimate` placed BEFORE the import statements (where
+  //       the other windowing `let`s live) reads a windowing.rzts symbol at its OWN
+  //       declaration's evaluation time. React's own emitter re-groups DataTable.rozie's
+  //       entire top-level script AFTER both inlined partials regardless of source position,
+  //       so it tolerated that placement — but Vue/Svelte/Solid/Angular/Lit splice each
+  //       partial's content at its IMPORT STATEMENT's source position, so a `let` positioned
+  //       BEFORE the import genuinely executes before `refineRowEstimate` exists:
+  //       `ReferenceError: Cannot access 'refineRowEstimate' before initialization`. Moving the
+  //       declaration to AFTER the windowing.rzts import fixes every non-React target — the
+  //       splice has already run by this point in the source.
+  //   (b) Deferring the assignment into $onMount instead (`afterRowRemeasure = refineRowEstimate`
+  //       inside the mount body, mirroring `refreshRowModel`) fixed (a) but broke REACT: it
+  //       triggered the react emitter's mount-referenced-helper stable-ref synthesis for
+  //       `refineRowEstimate` (a NEW code path for a plain script helper, not the `$computed`
+  //       case that mechanism was built for), producing a genuine
+  //       `ReferenceError: Cannot access '...' before initialization` in the component's
+  //       render body. Reverted; the emitter path itself is out of this plan's scope.
+  // This placement (top-level, immediately after the windowing.rzts import) is therefore the
+  // ONE spot that is simultaneously safe for React (unaffected by source position) and every
+  // other target (past the import-position splice).
+  let afterRowRemeasure = refineRowEstimate;
+
   // ── Sort/filter live-announcement (#14) ─────────────────────────────────────────────
   // A polite aria-live announcement whenever the consumer changes sorting or filtering, so a
   // screen-reader user hears that the rows were reordered / narrowed (which is otherwise silent).
@@ -2262,10 +3051,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
 
   // Template helpers reading the resolved column-def metadata by id (plain fns — used
   // in template predicates + interpolation; uniform on all 6, no $computed alias trap).
+  // B1 (quick 260906-afh): reads the O(1) def-lookup index (defIndex(), columnBuilders.rzts)
+  // instead of linearly scanning columnDefs() — which only ever held TOP-LEVEL entries, so a
+  // NESTED group leaf (a `columns:` group child) was invisible to every caller (headerLabel,
+  // columnIsFilterable, editMetaOf/columnEditable/editorTypeOf/editorOptionsOf) and silently
+  // took the "no def" fallback. defIndex() resolves both top-level AND nested leaf ids. This
+  // also removes the per-cell O(N) scan D-23 left in place — defIndex() is memoized in the
+  // SAME cache-invalidation block as columnDefs() itself, never rebuilt per call.
   function defFor(colId: any) {
-    const defs = columnDefs();
-    for (const d of defs as any) if (d.id === colId) return d;
-    return null;
+    if (colId == null) return null;
+    const idx = defIndex();
+    const d = idx[String(colId)];
+    return d != null ? d : null;
   }
   // Per-row visible cells for the body loop. table-core memoizes row objects by id,
   // so a re-pull after a column change (visibility/reorder/pin, or the late <Column>
@@ -2618,6 +3415,16 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function rowIsGrouped(row: any) {
     return !!(tick() >= 0 && row && row.getIsGrouped && row.getIsGrouped());
   }
+  // rowIndexIsGrouped (quick 260906-cvo, C1/C2): THE single row-level editability/writability
+  // predicate — a group-header row is a SYNTHETIC row whose `original` is table-core's
+  // `leafRows[0].original` (the same fact cellSlotRow's header comment documents), so any
+  // edit or bulk write resolved through it silently lands on an UNRELATED record. Every edit/
+  // write guard in this component calls THIS predicate — never a re-implemented inline
+  // `getIsGrouped()` check — so the invariant has one definition. Indexes into the SAME
+  // `$data.rows` flattened row list rowIsGrouped reads.
+  function rowIndexIsGrouped(rowIndex: any) {
+    return rowIsGrouped((rows() || [])[rowIndex]);
+  }
   // groupingActive: grouping is currently engaged (a non-empty ordered key list). Drives the
   // data-group-leaf marker so it is ABSENT when ungrouped (byte-identical-off, req-10).
   function groupingActive() {
@@ -2633,22 +3440,100 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function cellIsAggregated(cellCtx: any) {
     return !!(tick() >= 0 && cellCtx && cellCtx.getIsAggregated && cellCtx.getIsAggregated());
   }
-  // cellIsPlaceholder: a PLACEHOLDER cell on a group-header row — a non-grouped, non-aggregated
-  // cell that table-core fills with the FIRST leaf row's value (cell.getValue() leaks e.g.
-  // "Services"/"Edsger Dijkstra" onto the group line). Renders BLANK via a dedicated empty
-  // template branch so the leaked leaf value never paints. Tick-gated exactly like cellIsGrouped
-  // so the group chrome re-derives on a re-pull on the fine-grained targets (Solid/Lit).
+  // cellIsPlaceholder: VERIFIED against @tanstack/table-core@8.21.3 (ColumnGrouping.js:120-121,
+  // quick 260906-afh premise correction). A placeholder cell is a cell IN A GROUPING COLUMN
+  // that is NOT the row's OWN grouping column — `!cell.getIsGrouped() && column.getIsGrouped()`.
+  // That is true both on a group-header row (for every OTHER grouping column) and on every leaf
+  // row (for every grouping column) — it is NOT "never true on a group-header row" and it is NOT
+  // "any non-grouped, non-aggregated cell". The operative consequence for this component: a
+  // placeholder can only EVER be a grouping-column cell, so this branch can never reach a
+  // non-grouping column — it does NOT and CANNOT guard the AGGREGATED-cell `row` leak
+  // (cellSlotRow, below) fixes. Where it DOES apply (e.g. under multi-level grouping, the
+  // OTHER grouping column on a group-header row), table-core still fills cell.getValue() with
+  // the FIRST leaf row's value (cell.getValue() leaks e.g. "Oslo" onto a region-level group
+  // line whose grouping is 'region', not 'city'); this branch renders BLANK via a dedicated
+  // empty template so that leaked value never paints. Tick-gated exactly like cellIsGrouped so
+  // the group chrome re-derives on a re-pull on the fine-grained targets (Solid/Lit).
   function cellIsPlaceholder(cellCtx: any) {
     return !!(tick() >= 0 && cellCtx && cellCtx.getIsPlaceholder && cellCtx.getIsPlaceholder());
   }
-  // groupSubRowCount: the number of underlying LEAF RECORDS under a group-header row (the count
-  // shown in the header, e.g. "North (40)"). row.subRows is the IMMEDIATE members — for MULTI-LEVEL
-  // grouping those are sub-GROUPS, not records, so "North" with 2 categories / 40 records would show
-  // "North (2)". getLeafRows() returns all leaf descendants (the actual record count); keep the
-  // subRows fallback for safety. Single-level grouping is unchanged (getLeafRows == subRows when the
-  // children are already leaves).
+  // groupSubRowCount: the number of underlying TRUE LEAF RECORDS under a group-header row (the
+  // count shown in the header, e.g. "North (40)"). row.subRows is the IMMEDIATE members — for
+  // MULTI-LEVEL grouping those are sub-GROUPS, not records, so "North" with 2 categories / 40
+  // records would show "North (2)" off subRows alone. row.getLeafRows() is table-core's
+  // `flattenBy(row.subRows, d => d.subRows)` (ColumnGrouping.js / utils.js, verified against
+  // @tanstack/table-core@8.21.3) — it pushes EVERY node it walks, INCLUDING intermediate group
+  // nodes, so under multi-level grouping it over-counts by exactly the number of sub-group
+  // nodes between the row and its true leaves (C4, quick 260906-cvo: North with 2 city
+  // sub-groups + 3 records reported 5, not 3). `row.getIsGrouped()` is `!!row.groupingColumnId`
+  // — precisely the predicate that separates a group node from a real record — so filter the
+  // flattened list on it rather than hand-rolling a recursive `subRows` walk (getLeafRows()
+  // already flattens; the defect is purely that it does not filter). Single-level grouping is
+  // numerically UNCHANGED: a leaf row has no `subRows`, so no node was ever miscounted there.
   function groupSubRowCount(row: any) {
-    return row && row.getLeafRows ? row.getLeafRows().length : row && row.subRows ? row.subRows.length : 0;
+    if (row && row.getLeafRows) {
+      const leaves = row.getLeafRows();
+      let n = 0;
+      for (let i = 0; i < leaves.length; i++) {
+        const r = leaves[i];
+        if (!(r && r.getIsGrouped && r.getIsGrouped())) n = n + 1;
+      }
+      return n;
+    }
+    return row && row.subRows ? row.subRows.length : 0;
+  }
+
+  // ── B2 (quick 260906-afh) — group-header row #cell slot descriptor ─────────────────────
+  // PROBLEM: table-core builds a flattened group-header row via
+  // `createRow(table, id, leafRows[0].original, …)` (getGroupedRowModel.js), so `row.original`
+  // on a group row IS the FIRST LEAF's record. The #cell scoped slot's existing 4 call sites
+  // all bound `:row="row.original"` (or `wr.row.original`), so an AGGREGATED cell (a
+  // non-grouping column on a group row — cellIsGrouped()===false, cellIsPlaceholder()===false,
+  // so it takes the #cell r-else branch, same as any ordinary leaf cell) silently handed a
+  // consumer template the WRONG record's fields (T-AFH-05). The grouped cell itself (the
+  // group's own column, .rdt-group-value) has the same #cell binding and the same leak.
+  //
+  // FIX: `cellSlotRow(row)` returns a STABLE GROUP DESCRIPTOR — never `row.original` — for a
+  // group-header row, and `row.original` unchanged for every other row. The descriptor is an
+  // OBJECT, never `null` (T-AFH-06 — a consumer already reading `row.foo` would throw on
+  // Vue/Angular if handed null).
+  //
+  // Descriptor cache (T-AFH-02/T-AFH-04): a null-prototype map keyed on `String(row.id)`,
+  // invalidated wholesale whenever `$data.rowModelVer` (bumped by every refreshRowModel, the
+  // SAME reactive re-derivation discipline visibleCellsFor/rowIsGrouped use) differs from the
+  // generation the map was built for — so the descriptor's REFERENCE IDENTITY is stable
+  // across every cell of one group row within a row-model generation (an unstable reference
+  // would thrash the fine-grained targets, Solid/Lit) and refreshed the moment the grouping
+  // changes. Group row ids are built from consumer grouping VALUES, so the map MUST be
+  // null-prototype — a `__proto__` grouping value must not reach Object.prototype.
+  let groupRowDescriptorCache: any = null;
+  let groupRowDescriptorCacheVer: any = undefined;
+  function groupRowDescriptor(row: any) {
+    const ver = rowModelVer();
+    if (!groupRowDescriptorCache || groupRowDescriptorCacheVer !== ver) {
+      groupRowDescriptorCache = Object.create(null);
+      groupRowDescriptorCacheVer = ver;
+    }
+    const key = String(row.id);
+    let d = groupRowDescriptorCache[key];
+    if (!d) {
+      const groupingColumnId = row.groupingColumnId != null ? row.groupingColumnId : '';
+      const groupingValue = row.getGroupingValue ? row.getGroupingValue(groupingColumnId) : row.groupingValue;
+      d = {
+        isGroupRow: true,
+        groupId: row.id,
+        groupingColumnId,
+        groupingValue,
+        leafCount: groupSubRowCount(row)
+      };
+      groupRowDescriptorCache[key] = d;
+    }
+    return d;
+  }
+  // cellSlotRow: the #cell slot's `:row=` value. A group-header row gets the stable
+  // descriptor above (never the leaked first-leaf record); every other row is unchanged.
+  function cellSlotRow(row: any) {
+    return rowIsGrouped(row) ? groupRowDescriptor(row) : row ? row.original : null;
   }
   // groupingKeys: the live ordered grouping array — slot prop for the headless #groupBar + the
   // default styled-token reflection. Reads currentState() ($props.grouping ?? $data.groupingDefault),
@@ -2656,14 +3541,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function groupingKeys() {
     return currentState().grouping || [];
   }
-  // groupableColumns: the data columns OFFERED to the headless #groupBar (those whose Column/config
-  // `groupable` is not false) — `[{ id, label }]`. Excludes the chrome columns (select/expander are
-  // not in columnDefs()). The consumer builds any bar/drag UI from this; the component ships none.
+  // groupableColumns: the data columns OFFERED to the headless #groupBar — `[{ id, label }]`.
+  // Excludes the chrome columns (select/expander are not in columnDefs()). C5+C6 (quick
+  // 260906-cvo): delegates the actual walk to collectGroupableLeafDefs (columnDefUtils.ts) —
+  // a GROUP column (a `columns:` group's own entry) is NEVER offered (it has no accessor and
+  // cannot produce a grouping value, regardless of any `groupable` flag on it), and every
+  // groupable NESTED leaf (a `columns:` group child, opted out via `groupable: false` like any
+  // top-level leaf) IS offered, in declaration order. The consumer builds any bar/drag UI from
+  // this; the component ships none.
   function groupableColumns() {
     const out = [];
-    const defs = columnDefs();
+    const defs = collectGroupableLeafDefs(columnDefs());
     for (const d of defs as any) {
-      if (!d || d.groupable === false) continue;
       out.push({
         id: d.id,
         label: d.header != null ? d.header : d.id
@@ -2822,7 +3711,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // or inherited Lit DOM method named getRowIndexRelativeToPage (ROZ121/124/137 clear).
   function getRowIndexRelativeToPage(absRow: any) {
     const abs = absRow == null ? toAbsRow(activeRow()) : Math.trunc(Number(absRow)) || 0;
-    if (local.virtual) return abs;
+    if (rowsWindowed()) return abs;
     return abs - pageRowOffset();
   }
 
@@ -2843,12 +3732,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // DataTable.rozie) — so DataTable.rozie's $expose references them BY NAME with zero
   // indirection. This file stays the seam for verbs that need a rename/adapter, not a mandatory
   // stop for every $expose entry.
-  // ══ Grid interaction mode (phase 49) — STATE + STRUCTURE only ═══════════════════════════
-  // This plan (02) establishes the gated ARIA roles, the roving single-tab-stop tabindex,
-  // the active-cell index-pair state, the data-* cell markers, and the SINGLE
-  // focusActiveCell() seam. Plan 03 adds the keydown navigation math, the $expose verbs
-  // (focusCell/getActiveCell/clearActiveCell), and the activecell-change event ON TOP.
-
   // interactionMode gate. 'grid' lights up roving nav; 'table' (default) is byte-behaviorally
   // identical to phase 48 (roles fall back to the literals, tabindex drops).
   function isGrid() {
@@ -2893,7 +3776,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // isGrid()-gated (the active-cell API is grid-only); pageIndex()/pageSize() read live table-core
   // state through the reactive tick (filterPaginationRowChrome), so this re-derives on a page change.
   function pageRowOffset() {
-    if (!isGrid() || local.virtual) return 0;
+    if (!isGrid() || rowsWindowed()) return 0;
     return pageIndex() * pageSize();
   }
   // page-relative active row → absolute (display-order) index.
@@ -2908,7 +3791,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // In virtual mode $data.rows IS the full pre-pagination model (bodyRowCount suffices); in the
   // non-virtual paginated body $data.rows is only the page slice, so read the live model.
   function prePaginationRowCount() {
-    if (!table || local.virtual) return bodyRowCount();
+    if (!table || rowsWindowed()) return bodyRowCount();
     const pm = table.getPrePaginationRowModel();
     return pm && pm.rows ? pm.rows.length : bodyRowCount();
   }
@@ -3014,24 +3897,37 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // here returns the PRE-write value, resolving focus to the BODY cell instead of the
     // header. Callers pass the fresh isHeader local; falls back to $data when omitted.
     const header = nextIsHeader == null ? activeIsHeader() : nextIsHeader;
-    // ── phase 53 scroll-then-focus (D-12): when windowing AND the target body row is OUTSIDE the
-    // rendered window, scroll it in first, then defer focus to AFTER the new window commits (the
-    // double-rAF — a single rAF can fire before React's async commit, Pitfall 4). Header cells and
-    // in-window rows keep the synchronous path below (table-mode / non-windowed stay byte-stable).
-    // The guard reads the resolved `header` (NOT the raw `nextIsHeader`) so an omitted-arg call
-    // while a header cell is active falls back to $data.activeIsHeader and skips the scroll path.
-    if (local.virtual && virtualizer && !header && rowIsOutsideWindow(r)) {
-      virtualizer.scrollToIndex(r, {
+    // ── phase 53 scroll-then-focus (D-12): when windowing AND the target body row and/or column
+    // is OUTSIDE the rendered window, scroll it in first, then defer focus to AFTER the new
+    // window commits (the double-rAF — a single rAF can fire before React's async commit, Pitfall
+    // 4). Header cells and fully in-window cells keep the synchronous path below (table-mode /
+    // non-windowed stay byte-stable). The guard reads the resolved `header` (NOT the raw
+    // `nextIsHeader`) so an omitted-arg call while a header cell is active falls back to
+    // $data.activeIsHeader and skips the scroll path.
+    // Phase 87 87-06 (D-12): widened to the SECOND axis — colIsOutsideWindow(c)/colsWindowed()
+    // mirror rowIsOutsideWindow(r)/rowsWindowed() exactly (both landed in windowing.rzts in
+    // 87-04). Either axis being out triggers the scroll+poll; both scrollToIndex calls fire when
+    // both are out, and the ONE existing poll below is reused unchanged — it already resolves the
+    // target cell by BOTH (row, col) via resolveCellEl(String(r), c), so a cell that becomes
+    // reachable via the column axis needs no new poll logic (per the plan's own key_links note).
+    const rowOut = rowsWindowed() && virtualizer && rowIsOutsideWindow(r);
+    const colOut = colsWindowed() && colVirtualizer && colIsOutsideWindow(c);
+    if (!header && (rowOut || colOut)) {
+      if (rowOut) virtualizer.scrollToIndex(r, {
+        align: 'center'
+      });
+      if (colOut) colVirtualizer.scrollToIndex(c, {
         align: 'center'
       });
       // Bounded rAF-poll-until-cell-present (D-12): scrollToIndex → virtual-core onChange → windowVer
-      // bump → the framework commits the scrolled-in row. On React that commit is async (setState →
-      // reconcile) and for a far scroll (e.g. row 4000) spans several frames — a one-shot double-rAF
-      // fires BEFORE resolveCellEl can find the cell, so focus is silently lost (the deterministic
-      // React off-window-focus failure). Poll resolveCellEl for up to ~30 frames: the five
-      // fast-committing targets resolve on the first attempt (behavior unchanged), React retries
-      // across the few frames its async commit needs. The poll ONLY focuses (never measures), so it
-      // cannot re-introduce the remeasure-vs-scroll fight. Inside the $props.virtual guard only.
+      // bump → the framework commits the scrolled-in row/column. On React that commit is async
+      // (setState → reconcile) and for a far scroll (e.g. row 4000, or col 55 on a 60-col table)
+      // spans several frames — a one-shot double-rAF fires BEFORE resolveCellEl can find the cell,
+      // so focus is silently lost (the deterministic React off-window-focus failure). Poll
+      // resolveCellEl for up to ~30 frames: the five fast-committing targets resolve on the first
+      // attempt (behavior unchanged), React retries across the few frames its async commit needs.
+      // The poll ONLY focuses (never measures), so it cannot re-introduce the remeasure-vs-scroll
+      // fight. Inside the rowOut||colOut guard only.
       let focusAttempts = 0;
       // #9: capture the epoch AFTER this call's own bump (above) so the poll never aborts itself
       // (its captured value equals the current epoch). A LATER focusActiveCell / focusCell /
@@ -3129,9 +4025,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function bodyRowCount() {
     return (rows() || []).length;
   }
-  function clamp(v: any, lo: any, hi: any) {
-    return v < lo ? lo : v > hi ? hi : v;
-  }
 
   // ── Multi-level (grouped) header addressing (B12) ──────────────────────────────────────
   // $data.headerGroups is ordered top→bottom; the LEAF header row (the one adjacent to the
@@ -3371,13 +4264,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     return resolveCellEl(rowKey, activeColIndex(), activeIsHeader() ? activeHeaderLevel() : null);
   }
 
-  // The focusable descendants of a cell (non-disabled), in DOM order. Pure DOM — uniform ×6.
-  function focusables(cellEl: any) {
-    if (!cellEl || !cellEl.querySelectorAll) return [];
-    const list = Array.prototype.slice.call(cellEl.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'));
-    return list.filter((n: any) => !n.disabled);
-  }
-
   // Enter/F2 → enter interaction mode: focus the active cell's FIRST interactive control
   // (D-07 — uniform for header sort buttons and body controls; Enter does NOT sort directly).
   // No-op (stay in navigation mode) if the cell has no focusable control.
@@ -3681,11 +4567,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       return;
     }
     // ── C2 (phase 63 wave-8): Enter on a GROUP-HEADER cell toggles that group's collapse/
-    // expand (APG treegrid). A group cell is NON-editable (isActiveCellEditable=false, the
-    // verified invariant) so it never hits the edit branches above and would otherwise fall to
-    // enterControl() — which merely FOCUSES the group-toggle button (requiring a second key).
-    // Route it to the SAME onToggleExpand path the chevron uses (group rows ride the expand
-    // model) so one Enter toggles the group. Body cells only (a header-active Enter is unchanged);
+    // expand (APG treegrid). C1 (quick 260906-cvo) CORRECTION: the comment here used to claim
+    // "a group cell is non-editable" as "the verified invariant" — that was FALSE AS WRITTEN.
+    // It held only for the grouping column's OWN cell (cellIsGrouped's branch renders before
+    // the editor branch); a non-grouping EDITABLE column's cell on a group row fell straight
+    // through the branch chain to isEditing(...) and opened an editor (the C1 defect this
+    // quick task closed). What is now TRUE, and WHY: isActiveCellEditable() carries an
+    // explicit rowIndexIsGrouped(...) row guard (filterPaginationRowChrome.rzts), so EVERY
+    // editable column's cell on a group row is non-editable — that is what makes the four
+    // edit-entry branches above fall through to this one, not an incidental property of the
+    // grouping column alone. Route it to the SAME onToggleExpand path the chevron uses (group
+    // rows ride the expand model) so one Enter toggles the group. Body cells only (a
+    // header-active Enter is unchanged);
     // ($data.rows || [])[$data.activeRow] is the active flattened row (page-relative non-virtual /
     // full-model virtual — both index $data.rows). Placed BEFORE the reserved enterControl branch.
     else if (key === 'Enter' && !activeIsHeader() && rowIsGrouped((rows() || [])[activeRow()])) {
@@ -4087,6 +4980,75 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     }
   }
 
+  // ══ Phase 87 87-04/87-05 — column-axis template windowing (D-06/D-11; declared HERE (after
+  // the columnChrome/gridFocusNav imports above) so a forward cross-partial reference to
+  // colsWindowed()/windowedColIndices() in the merged per-target output never TDZs on React —
+  // the 87-02 useCallback-deps-array ordering lesson, the SAME reason remeasureColumnWindow()
+  // below stays out of virtualization.rzts). ══
+  // windowedHeadersFor(hg, hgLevel) (87-05): generalizes 87-04's windowedHeaderRow() (leaf-level
+  // only) to EVERY header level with a CLAMPED colspan (D-11). A header spans the CONTIGUOUS run
+  // of leaf-column indices [cursor, cursor + header.colSpan) — table-core lays out every header
+  // level's `headers` array left-to-right over the SAME full leaf-column order, so walking a
+  // running cursor by each header's OWN colSpan reconstructs its absolute leaf range with no
+  // extra table-core calls. Intersect that range with windowedColIndices() (which already unions
+  // the D-10 forced set): a header whose intersection is EMPTY is dropped entirely (a group
+  // wholly outside the window renders no <th> at all — D-11); otherwise it is emitted as
+  // { header, span } with span = the intersection SIZE (the clamp). Degrades to hg.headers
+  // UNCHANGED (span = the header's own colSpan, or 1) when columns are not windowed — the
+  // off-path the template's `:colspan="wh.span > 1 ? wh.span : null"` binding preserves
+  // byte-identically (a bare colspan="1" would change the emitted markup on the unwindowed path).
+  function windowedHeadersFor(hg: any, hgLevel: any) {
+    const headers = hg && hg.headers || [];
+    if (!colsWindowed()) {
+      return headers.map((h: any) => ({
+        header: h,
+        span: h && h.colSpan > 1 ? h.colSpan : 1
+      }));
+    }
+    const idx = windowedColIndices();
+    const idxSet = {};
+    for (let i = 0; i < idx.length; i++) idxSet[idx[i]] = true;
+    let cursor = 0;
+    const out = [];
+    for (let i = 0; i < headers.length; i++) {
+      const h = headers[i];
+      const leafCount = h && h.colSpan ? h.colSpan : 1;
+      const start = cursor;
+      const end = cursor + leafCount;
+      cursor = end;
+      let span = 0;
+      for (let c = start; c < end; c++) if (idxSet[c]) span = span + 1;
+      if (span > 0) out.push({
+        header: h,
+        span
+      });
+    }
+    return out;
+  }
+  // windowedColSpan(): the body row's rendered <td> COUNT under column windowing — the windowed
+  // cell slice length plus the two rdt-col-spacer cells, so the leading/trailing full-row spacer
+  // <tr>s and the #detail <tr> span the SAME column count the body row actually renders (D-06/
+  // D-11's alignment obligation under table-layout:fixed). Off → visibleColCount() unchanged
+  // (byte-identical).
+  function windowedColSpan() {
+    return colsWindowed() ? windowedColIndices().length + 2 : visibleColCount();
+  }
+  // remeasureColumnWindow() (Phase 87 87-04): push a fresh column count/size into the SECOND
+  // (horizontal) virtualizer on every row-model refresh — mirrors the row axis's
+  // virtualizer.setOptions(virtualizerOptions()) + _willUpdate() re-feed in refreshRowModel, so a
+  // runtime column-visibility/order/pinning change (all watched in the $watch list below) keeps
+  // the column virtualizer's count in sync. Never a render helper (Pitfall 1); rides the EXISTING
+  // refreshRowModel imperative re-feed cycle rather than adding a third scheduling path. Declared
+  // HERE (DataTable.rozie's own script), not in virtualization.rzts — see that file's comment for
+  // why: it must call columnVirtualizerOptions() (windowing.rzts), and a function inside
+  // virtualization.rzts calling into windowing.rzts is a forward-reference TDZ on React (the
+  // 87-02 predicate-layer lesson, one file-grouping boundary over).
+  function remeasureColumnWindow() {
+    if (!colsWindowed() || !colVirtualizer) return;
+    colVirtualizer.setOptions(columnVirtualizerOptions());
+    colVirtualizer._willUpdate();
+  }
+
   // B6 (phase 63 wave-11) — "the active cell is parked on the empty-grid header fallback" control
   // flag, written + read ONLY inside clampActiveCell (never bound in the template). It MUST be a
   // plain component-scope `let` (React hoists to useRef), NOT a $data reactive field: clampActiveCell
@@ -4353,15 +5315,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     }
   }
 
-  // ══ Clipboard (TSV copy/paste) + drag-fill (phase 51 plan 04 / req-8 / D-03 / D-04) ══════
-  // The async Clipboard API (grantPermissions confirmed in 51-01). Copy = range→TSV; paste =
-  // TSV→cells under the D-03 skip rule (editable AND validator-passing cells only) with an
-  // N-of-M aria-live announce + one cell-edit-commit per committed cell; drag-fill = value-copy
-  // ONLY (D-04, NO series detection). T-51-01 (BLOCKING-high): pasted TSV is UNTRUSTED — every
-  // cell is written as plain string DATA through the per-column validator and rendered via the
-  // SAME {{ }}/rozieDisplay text path as #cell (never innerHTML / a template / a selector); the
-  // cell-resolution query interpolates integer indices only (resolveCellEl, T-49-01).
-
   // announce(msg): write the polite aria-live PASTE-announce region (D-03 — "N of M cells
   // pasted"). SEPARATE from the validation invalidMsg region (different semantics). '' clears it.
   function announce(msg: any) {
@@ -4411,20 +5364,14 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     };
   }
 
-  // B10: escape a TSV field per the spreadsheet convention — a field containing a tab, a CR/LF,
-  // or a double-quote is wrapped in double-quotes with internal quotes DOUBLED; an ordinary
-  // field is emitted verbatim. parseTsv() unescapes symmetrically, so a cell carrying a tab /
-  // newline / quote round-trips without smearing into adjacent cells (T-63-03-02).
-  function escapeTsvField(s: any) {
-    if (s.indexOf('\t') >= 0 || s.indexOf('\n') >= 0 || s.indexOf('\r') >= 0 || s.indexOf('"') >= 0) {
-      return '"' + s.replace(/"/g, '""') + '"';
-    }
-    return s;
-  }
-
   // rangeToTsv(): serialize the current range to TSV — rows joined by '\n', cells by '\t',
   // reading each cell's value off the visible model by index (cellValueAt). A single active
   // cell (no range) serializes that one cell. Each field is B10-escaped. Pure read — never writes.
+  // C2 (quick 260906-cvo) — DELIBERATE NON-CHANGE: this is a READ, unlike applyGridToRange's
+  // write funnel, and stays UNGUARDED for a group-header row on purpose. cellValueAt reads the
+  // column's DISPLAYED aggregate value on a group row (table-core's cell.getValue()), which is
+  // exactly what the user sees — serializing it is correct behavior, not a leak. Do not "fix"
+  // this asymmetry; it is intentional.
   function rangeToTsv() {
     const box = normalizedRange();
     const r0 = box ? box.r0 : activeRow();
@@ -4443,84 +5390,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     return lines.join('\n');
   }
 
-  // parseTsv(text): a TSV string → string[][] (rows of cells). Tolerates \r\n; a trailing
-  // newline does not add a phantom empty row. Pure — produces plain string DATA only (T-51-01:
-  // the cells are NEVER eval'd / interpolated into a selector / rendered as markup).
-  function parseTsv(text: any) {
-    const str = text != null ? String(text) : '';
-    // CR-03: length guard BEFORE the parse — an empty string is a no-op, and a pathologically
-    // large clipboard payload (>2M chars) is rejected outright (DoS-shaped input) before the
-    // single-pass scan allocates a cell-per-character grid.
-    if (str === '' || str.length > 2000000) return [];
-    // B10: a quote-aware single-pass state machine (replaces the naive split, which corrupted a
-    // cell containing a tab/newline). A field that OPENS with a double-quote is "quoted": tabs,
-    // newlines, and doubled quotes ("") inside it are literal content until the closing quote;
-    // an unquoted field ends at the next tab/newline. CR/LF and CRLF all delimit a row.
-    const rows = [];
-    let row = [];
-    let field = '';
-    let inQuotes = false;
-    let i = 0;
-    const n = str.length;
-    while (i < n) {
-      const ch = str[i];
-      if (inQuotes) {
-        if (ch === '"') {
-          if (i + 1 < n && str[i + 1] === '"') {
-            field = field + '"';
-            i = i + 2;
-            continue;
-          }
-          inQuotes = false;
-          i = i + 1;
-          continue;
-        }
-        field = field + ch;
-        i = i + 1;
-        continue;
-      }
-      if (ch === '"' && field === '') {
-        inQuotes = true;
-        i = i + 1;
-        continue;
-      }
-      if (ch === '\t') {
-        row.push(field);
-        field = '';
-        i = i + 1;
-        continue;
-      }
-      if (ch === '\r') {
-        if (i + 1 < n && str[i + 1] === '\n') i = i + 1;
-        row.push(field);
-        field = '';
-        rows.push(row);
-        row = [];
-        i = i + 1;
-        continue;
-      }
-      if (ch === '\n') {
-        row.push(field);
-        field = '';
-        rows.push(row);
-        row = [];
-        i = i + 1;
-        continue;
-      }
-      field = field + ch;
-      i = i + 1;
-    }
-    // Flush the trailing field + row.
-    row.push(field);
-    rows.push(row);
-    // Drop a single trailing empty row (a TSV that ends with a newline → a phantom [''] row).
-    if (rows.length > 1) {
-      const last = rows[rows.length - 1];
-      if (last.length === 1 && last[0] === '') rows.pop();
-    }
-    return rows;
-  }
-
   // copyRange(): write the current range as TSV to the clipboard (async). No-op when the
   // async Clipboard API is unavailable (older/insecure contexts) — a copy is best-effort.
   function copyRange() {
@@ -4556,11 +5425,22 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     for (let gr = 0; gr < grid.length; gr++) {
       const r = originRow + gr;
       if (r > maxRow) break;
+      // C2 (quick 260906-cvo) — hoisted ONCE per ROW (never per cell): a group-header row's
+      // `original` is table-core's `leafRows[0].original` (a synthetic row), so a write
+      // resolved through it silently lands on an unrelated record. This ONE placement closes
+      // pasteRange, cutRange, clearActiveRange AND fillRange — all four build a grid and hand
+      // it to this single funnel, so guarding the four callers individually would be four
+      // chances to miss one.
+      const rowGrouped = rowIndexIsGrouped(r);
       const cols = grid[gr] || [];
       for (let gc = 0; gc < cols.length; gc++) {
         const c = originCol + gc;
         if (c > maxCol) break;
+        // A group-row cell still counts toward `total` — it is a skipped TARGET, exactly like
+        // a non-editable or validator-rejected cell — so the "N of M cells pasted" / "no cells
+        // pasted" announce keeps its existing semantics (never silently under-reports M).
         total = total + 1;
+        if (rowGrouped) continue;
         const colId = columnIdAt(r, c);
         if (colId == null || !columnEditable(colId)) continue;
         const rowObj = rowOriginalAt(r);
@@ -4613,43 +5493,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     return row ? row.id : null;
   }
 
-  // C3: tile a parsed clipboard `grid` (string[][]) to fill a destination `box` — the spreadsheet
-  // paste-into-range semantics. The target rectangle is the MAX of the box dims and the source
-  // dims per axis, so a SMALLER clipboard TILES across a LARGER selection (a single 1×1 cell fills
-  // the whole range; a 2×2 block repeats — tiled[dr][dc] = src[dr % srcRows][dc % srcCols]), while a
-  // clipboard LARGER than the selection pastes its full block from the top-left (preserving the
-  // no-range "clipboard-sized block at the active cell" behavior — a 1×1 destBox + a 1×N clipboard
-  // yields the full 1×N block, byte-for-byte the prior path). Pure — returns a fresh grid; applies
-  // nothing. A ragged/short source row defaults the missing cell to '' (coerced per column on write).
-  function tileGridToBox(grid: any, box: any) {
-    const srcRows = grid.length;
-    // srcCols is the MAX row width across ALL rows (not grid[0].length): a RAGGED clipboard
-    // (a later row WIDER than the first, e.g. TSV "a\tb\nc\td\te") would otherwise never read
-    // the extra column and silently drop those cells. A row SHORTER than srcCols tiles its
-    // missing cells as '' (the `v != null ? v : ''` coercion below), never undefined.
-    let srcCols = 0;
-    for (let i = 0; i < srcRows; i++) {
-      const w = grid[i] && grid[i].length ? grid[i].length : 0;
-      if (w > srcCols) srcCols = w;
-    }
-    if (srcRows <= 0 || srcCols <= 0) return grid;
-    const boxRows = box.r1 - box.r0 + 1;
-    const boxCols = box.c1 - box.c0 + 1;
-    const rows = boxRows > srcRows ? boxRows : srcRows;
-    const cols = boxCols > srcCols ? boxCols : srcCols;
-    const out = [];
-    for (let r = 0; r < rows; r++) {
-      const srcLine = grid[r % srcRows] || [];
-      const line = [];
-      for (let c = 0; c < cols; c++) {
-        const v = srcLine[c % srcCols];
-        line.push(v != null ? v : '');
-      }
-      out.push(line);
-    }
-    return out;
-  }
-
   // pasteRange(): read TSV from the clipboard (async), parse it, TILE it over the destination
   // (C3), and apply it anchored at the destination top-left under the D-03 skip rule. The grid is
   // clamped to the grid bounds (T-51-02). A failed/empty read is a silent no-op.
@@ -4750,18 +5593,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     applyGridToRange(grid, r0, c0);
   }
 
-  // tileIndex(i, lo, hi): map an index into the inclusive [lo,hi] source span by TILING (repeat
-  // the source block), handling indices below lo (negative offset) correctly. A 1-wide source
-  // (lo===hi) always returns lo. Used by fillRange to resolve, per target cell, WHICH source
-  // cell it copies — so each column copies its OWN source value down its OWN column.
-  function tileIndex(i: any, lo: any, hi: any) {
-    const span = hi - lo + 1;
-    if (span <= 1) return lo;
-    let k = (i - lo) % span;
-    if (k < 0) k = k + span;
-    return lo + k;
-  }
-
   // fillRange(sourceBox): drag-fill (D-04 — VALUE-COPY ONLY, no series detection). B7: the fill
   // SOURCE is the PRE-DRAG rectangle (`sourceBox`, captured at pointerdown before the drag grew
   // the range); each target cell copies the source cell in its OWN column (and row, when the
@@ -4827,6 +5658,49 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // but a mid-drag unmount would otherwise leak a pointermove/pointerup listener on document).
   let fillDragMove: any = null;
   let fillDragUp: any = null;
+  // Phase 87 87-06 (D-13, T-87-06-02): the single rAF handle driving the fill-drag per-axis
+  // edge auto-scroll — a module-`let` beside fillDragMove/fillDragUp (the `let table` precedent;
+  // React hoists to useRef), cleared IDEMPOTENTLY in teardownFillDrag() so an interrupted gesture
+  // never leaves an orphaned scroll loop running forever.
+  let fillEdgeScrollRaf: any = null;
+  // Phase 87 87-06 (D-13): per-axis edge-triggered auto-scroll for the fill drag.
+  // FILL_EDGE_SCROLL_PX — the pixel distance from the scroll container's edge, on either axis,
+  // that engages auto-scroll. 24px: comfortably wider than the fill handle's own hit target but
+  // well inside a typical row/column size, so the gesture recognizably nears an edge before
+  // scrolling engages (not so wide that an ordinary drag near the middle of the viewport
+  // spuriously triggers it).
+  const FILL_EDGE_SCROLL_PX = 24;
+  // FILL_EDGE_SCROLL_STEP — pixels scrolled per animation frame while the pointer sits inside an
+  // edge zone. A fixed step (not distance-proportional) keeps the scroll speed predictable and
+  // the WR-01-style spacer/window math simple to reason about frame-to-frame.
+  const FILL_EDGE_SCROLL_STEP = 16;
+
+  // edgeDelta(clientX, clientY): the per-frame (dx, dy) scroll delta for a pointer at the given
+  // screen position, relative to the scroll container `gridScrollEl` already observed by the row
+  // AND column virtualizers (D-03 — one shared `.rdt-scroll` wrapper for whichever axis/axes are
+  // windowed). Each axis is independently gated on colsWindowed()/rowsWindowed() (never a bare
+  // prop truthiness read — the 87-02 prohibition gate) so a drag near the left/right edge of a
+  // row-only-windowed table (or vice versa) never scrolls an axis that has nothing to reveal.
+  // Pure — reads no gesture state, only the live container rect + the windowing predicates.
+  function edgeDelta(clientX: any, clientY: any) {
+    if (!gridScrollEl) return {
+      dx: 0,
+      dy: 0
+    };
+    const rect = gridScrollEl.getBoundingClientRect();
+    let dx = 0;
+    let dy = 0;
+    if (colsWindowed()) {
+      if (clientX - rect.left < FILL_EDGE_SCROLL_PX) dx = -FILL_EDGE_SCROLL_STEP;else if (rect.right - clientX < FILL_EDGE_SCROLL_PX) dx = FILL_EDGE_SCROLL_STEP;
+    }
+    if (rowsWindowed()) {
+      if (clientY - rect.top < FILL_EDGE_SCROLL_PX) dy = -FILL_EDGE_SCROLL_STEP;else if (rect.bottom - clientY < FILL_EDGE_SCROLL_PX) dy = FILL_EDGE_SCROLL_STEP;
+    }
+    return {
+      dx,
+      dy
+    };
+  }
   function teardownFillDrag() {
     if (typeof document !== 'undefined') {
       if (fillDragMove) document.removeEventListener('pointermove', fillDragMove);
@@ -4835,6 +5709,15 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     fillDragMove = null;
     fillDragUp = null;
     fillDragging = false;
+    // D-13 (T-87-06-02): idempotent cleanup of the edge-auto-scroll rAF loop — the SAME discipline
+    // fillDragMove/fillDragUp already follow. Called both on a normal pointerup release AND at the
+    // TOP of the next onFillHandlePointerDown (the #leak guard below), so an interrupted gesture
+    // (pointer released off-window, context menu, alt-tab) can never leave a stray rAF scrolling
+    // the table forever.
+    if (fillEdgeScrollRaf != null) {
+      if (typeof cancelAnimationFrame === 'function') cancelAnimationFrame(fillEdgeScrollRaf);
+      fillEdgeScrollRaf = null;
+    }
   }
   function cellIndexFromPoint(clientX: any, clientY: any) {
     if (typeof document === 'undefined' || !document.elementFromPoint) return null;
@@ -4870,7 +5753,8 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // pointerup was missed (pointer released off-window, context menu, alt-tab), the prior fillDrag's
     // document pointermove/pointerup stay attached; overwriting fillDragMove/fillDragUp below would
     // strand them (removeEventListener could never reach the old refs) → a permanent global
-    // pointermove leak. teardownFillDrag is idempotent (no-op when nothing is attached).
+    // pointermove leak. teardownFillDrag is idempotent (no-op when nothing is attached) — it ALSO
+    // cancels any orphaned edge-auto-scroll rAF from the same prior gesture.
     teardownFillDrag();
     fillDragging = true;
     // B7: snapshot the PRE-DRAG rectangle (the fill SOURCE) NOW, before pointermove grows the
@@ -4884,21 +5768,74 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       r: sourceBox.r1,
       c: sourceBox.c1
     } : null;
+    // D-13: the pointer's LAST known screen position, updated on every real pointermove AND read
+    // by the rAF loop below on every frame. The scroll loop must re-resolve the cell under this
+    // FIXED screen point each frame — the pointer itself may not move at all while the user simply
+    // holds it at the edge, but the content sliding beneath it means a DIFFERENT cell sits there
+    // each frame, which is what must extend the range (this is the whole point of "edge-triggered
+    // auto-scroll": a real pointermove would never fire on a stationary pointer).
+    let lastClientX = 0;
+    let lastClientY = 0;
+    // applyPointAt: resolve the cell under (clientX, clientY) and extend the range to it if it is
+    // a NEW cell (B20 dedup — unchanged from the pre-87-06 shape). Shared by both a real
+    // pointermove and every frame of the edge-auto-scroll loop.
+    const applyPointAt = (clientX: any, clientY: any) => {
+      const cell = cellIndexFromPoint(clientX, clientY);
+      if (cell && (!lastCell || cell.r !== lastCell.r || cell.c !== lastCell.c)) {
+        lastCell = cell;
+        setRangeFocus$local(cell.r, cell.c);
+      }
+    };
+    // scrollStep: the single rAF loop (T-87-06-02) — reads the LAST known pointer position each
+    // frame, scrolls the windowed axis/axes still within the edge threshold, then re-resolves the
+    // cell now under that same screen point. Self-terminates (never reschedules) the moment the
+    // gesture ends OR the pointer no longer sits in an edge zone — so leaving the edge, or a
+    // pointerup, stops the scroll immediately with no lingering frame.
+    const scrollStep = () => {
+      if (!fillDragging) {
+        fillEdgeScrollRaf = null;
+        return;
+      }
+      const d = edgeDelta(lastClientX, lastClientY);
+      if (d.dx === 0 && d.dy === 0) {
+        fillEdgeScrollRaf = null;
+        return;
+      }
+      if (gridScrollEl) {
+        // T-87-06-03: direct scrollLeft/scrollTop writes — NEVER virtualizer.scrollToOffset /
+        // colVirtualizer.scrollToOffset. A programmatic virtual-core scroll sets
+        // virtualizer.scrollState, which remeasureWindow() bails on for as long as it is non-null;
+        // a SUSTAINED auto-scroll driven through that API would suppress row remeasurement for the
+        // whole gesture. scrollLeft/scrollTop are ordinary user-scroll-shaped writes (scrollState
+        // stays null), so remeasureWindow() keeps observing recycled rows normally throughout.
+        if (d.dx !== 0) gridScrollEl.scrollLeft = gridScrollEl.scrollLeft + d.dx;
+        if (d.dy !== 0) gridScrollEl.scrollTop = gridScrollEl.scrollTop + d.dy;
+      }
+      applyPointAt(lastClientX, lastClientY);
+      fillEdgeScrollRaf = requestAnimationFrame(scrollStep);
+    };
     const move = (ev: any) => {
       if (!fillDragging) return;
-      const cell = cellIndexFromPoint(ev.clientX, ev.clientY);
+      lastClientX = ev.clientX;
+      lastClientY = ev.clientY;
       // B20: dedup by target cell. setRangeFocus emits range-change, so calling it on EVERY
       // pointermove (the pointer fires many per cell) spams the event with identical payloads.
       // Only extend (and emit) when the pointer enters a DIFFERENT cell than the last — lastCell
       // seeds from the pre-drag bottom-right corner, so a move that stays on the source corner
       // or re-enters the same cell is suppressed (the range is unchanged).
-      if (cell && (!lastCell || cell.r !== lastCell.r || cell.c !== lastCell.c)) {
-        lastCell = cell;
-        setRangeFocus$local(cell.r, cell.c);
+      applyPointAt(ev.clientX, ev.clientY);
+      // D-13: start the edge-auto-scroll loop the FIRST time the pointer enters an edge zone
+      // (idempotent — fillEdgeScrollRaf is only null when no loop is currently scheduled). The
+      // loop itself (scrollStep) re-evaluates edgeDelta every frame and self-terminates once the
+      // pointer leaves the zone, so no separate "still in zone" check is needed here.
+      if (fillEdgeScrollRaf == null && typeof requestAnimationFrame === 'function') {
+        const d = edgeDelta(ev.clientX, ev.clientY);
+        if (d.dx !== 0 || d.dy !== 0) fillEdgeScrollRaf = requestAnimationFrame(scrollStep);
       }
     };
     const up = () => {
-      // teardownFillDrag clears fillDragging + removes both listeners (CR-04 shared path).
+      // teardownFillDrag clears fillDragging + removes both listeners + cancels any in-flight
+      // edge-auto-scroll rAF (CR-04 / T-87-06-02 shared path).
       teardownFillDrag();
       // A plain click on the fill handle (pointerdown+up with NO intervening drag) leaves lastCell
       // at the source box's own origin corner (r1,c1), so fillRange(sourceBox, corner) would
@@ -4994,13 +5931,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     }
   }
 
-  // ══ Editable-cell lifecycle (phase 51 plan 02 — RESEARCH Pattern 1/3/4/5) ════════════════
-  // Single-cell, non-virtual. Index-based state (editingRow/editingCol over the visible model),
-  // the display↔editor branch in the keyed <td>, F2/Enter/printable entry off the reserved
-  // onGridKeyDown seam, commit on Enter/Tab/blur, cancel+revert on Escape, sync validation with
-  // D-01 keep-open. All gated by columnEditable() / the editing index pair so a table with no
-  // editable columns lowers byte-identical (the editor branch r-if is always false).
-
   // The column id at the active cell (the active row's visible cell list @ activeColIndex).
   // Null when out of range (no body rows, or active cell is a header / select column).
   function activeCellColumnId() {
@@ -5016,7 +5946,13 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // isActiveCellEditable: the active cell sits in an editable column AND is a body cell
   // (req-1). Gates the F2/Enter/printable edit-entry branches in onGridKeyDown; a
   // non-editable active cell falls through to the reserved enterControl path.
+  // C1 (quick 260906-cvo) — Layer 1: a group-header row is NEVER editable, regardless of
+  // column. This is the single highest-value guard in the cluster: it closes Shift+F2, the
+  // checkbox toggle, and the F2/Enter/printable edit-entry branches in ONE edit (they are all
+  // `else if` branches gated on this predicate), AND restores fallthrough so Enter on a group
+  // row reaches the group-toggle branch below them instead of opening an editor.
   function isActiveCellEditable() {
+    if (rowIndexIsGrouped(activeRow())) return false;
     const colId = activeCellColumnId();
     return colId != null && columnEditable(colId);
   }
@@ -5034,6 +5970,14 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // non-virtual, wr.vi.index virtual).
   function isEditing(rowIndex: any, colIndex: any) {
     if (editVer() < 0) return false;
+    // C1 (quick 260906-cvo) — Layer 6: the ONLY layer whose reachability does not depend on a
+    // keystroke. Editing state is INDEX-based over the visible model, and nothing clears it
+    // when the row model re-derives — a consumer that changes the grouping model WHILE a cell
+    // editor is open can move a group-header row under the index $data.editingRow/
+    // editingRowIndex still holds, rendering the editor on a group row with no beginEdit
+    // involved. Placed AFTER the editVer read (preserves the Svelte/Solid re-derivation
+    // discipline the header comment above documents).
+    if (rowIndexIsGrouped(rowIndex)) return false;
     if (editingRowIndex() != null && editingRowIndex() === rowIndex) {
       const colId = columnIdAt(rowIndex, colIndex);
       return colId != null && columnEditable(colId);
@@ -5075,29 +6019,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     setInvalidMsg(msg != null ? msg : '');
   }
 
-  // replaceRowValue: build a FRESH array with ONE row object replaced (the column's field
-  // set to the new value); the rest share by reference (the family immutable whole-array
-  // replace — in-place mutation is silently dropped on React/Solid/Angular/Lit). rowIndex
-  // is over currentData() (== the visible model order for the non-virtual, unsorted/
-  // unfiltered single-cell case; the row id is carried for the commit payload).
-  function replaceRowValue(rows: any, rowIndex: any, field: any, value: any) {
-    const src = rows || [];
-    const out = [];
-    for (let i = 0; i < src.length; i++) {
-      if (i === rowIndex) {
-        // WR-03: own-property spread, NOT `for (const k in orig)` which walks the prototype chain
-        // and would copy inherited enumerable props of typed/class-instance row objects.
-        out.push({
-          ...(src[i] || {}),
-          [field]: value
-        });
-      } else {
-        out.push(src[i]);
-      }
-    }
-    return out;
-  }
-
   // Map a visible-model body-row index ($data.rows index) to its underlying currentData()
   // index via the row's original object identity (sorting/filtering/pagination may reorder
   // the visible model away from the source array order). Falls back to the same index.
@@ -5231,6 +6152,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // $data) so a Tab-advance that just setState'd activeRow/Col works on React. Clears any
   // prior invalid state. Focus moves into the editor.
   function beginEdit(rowIndex: any, colIndex: any, seed: any) {
+    // C1 (quick 260906-cvo) — Layer 2: closes the `onGridClick` (singleClickEdit) path, which
+    // calls beginEdit directly gated ONLY on columnEditable — isActiveCellEditable (Layer 1)
+    // does not run on that path at all.
+    if (rowIndexIsGrouped(rowIndex)) return;
     const colId = columnIdAt(rowIndex, colIndex);
     if (colId == null || !columnEditable(colId)) return;
     // A new edit session starts — reset the sync idempotency latch so THIS session's eventual
@@ -5277,23 +6202,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     if (typeof requestAnimationFrame === 'function') requestAnimationFrame(tryFocus);else setTimeout(tryFocus, 0);
   }
 
-  // B23: the index of a committed row WITHIN a given (fresh) visible-model array, resolved by
-  // row IDENTITY. table-core's default getRowId is source-index-based, so a row's id is stable
-  // across a re-sort (only its VISIBLE position moves); a committed edit replaces the row object
-  // via a fresh spread (the `original` reference changes), so match by `id` FIRST, `original`
-  // only as a fallback. Returns -1 when the row filtered out of the view. PURE (the caller passes
-  // the FRESH row list — refreshRowModel's just-pulled `nextRows`, never the React-stale state).
-  function indexOfRowIn(rows: any, rowOriginal: any, rowId: any) {
-    const list = rows || [];
-    for (let i = 0; i < list.length; i++) {
-      const r = list[i];
-      if (!r) continue;
-      if (rowId != null && r.id === rowId) return i;
-      if (rowOriginal != null && r.original === rowOriginal) return i;
-    }
-    return -1;
-  }
-
   // endEdit: tear down the editor (shared by commit/cancel). Clears the editing pair +
   // draft + invalid state and returns to navigation mode. Does NOT move focus (callers
   // decide where focus lands — commit/cancel return it to the owning cell).
@@ -5454,6 +6362,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // editor:'checkbox' columns only (Space/Enter/F2), full-row edit mode is unaffected (the
   // editingRowIndex early return in onGridKeyDown already excludes it).
   function toggleActiveBooleanCell() {
+    // C1 (quick 260906-cvo) — Layer 4: the only write funnel bypassing both beginEdit/
+    // commitEdit and applyGridToRange. Reachable today only through the Layer-1-gated
+    // checkbox branch, so this line is redundant AT HEAD — it earns its place by making "no
+    // write ever targets a group row" a property of the write funnels themselves.
+    if (rowIndexIsGrouped(activeRow())) return;
     const colId = columnIdAt(activeRow(), activeColIndex());
     if (colId == null || !columnEditable(colId)) return;
     const rowList = rows() || [];
@@ -5512,13 +6425,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     focusCellWhenReady(focusRow, focusCol);
   }
 
-  // ══ Full-row edit lifecycle (phase 51 plan 03 / req-6 / D-06, RESEARCH Pattern 6) ════════
-  // Shift+F2 (and the editRow $expose verb) put EVERY editable cell in the active row into
-  // edit at once; one save commits the whole row in ONE writeData (a single fresh-array row
-  // replace) + ONE row-edit-commit event; Escape reverts the whole row as a unit. Per-column
-  // validation still runs on each edited cell at commit (D-01 keep-open if ANY fails). The
-  // editor template branch (isEditing's row arm) is re-used verbatim — no per-mode fork.
-
   // The editable [columnId, field] pairs for a body row at the given visible-model index,
   // in visible-cell order. field is the column's accessorKey (the row-object key to write).
   function editableColumnsForRow(rowIndex: any) {
@@ -5588,6 +6494,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function beginRowEdit(row: any) {
     const rowIndex = rowIndexOf(row);
     if (rowIndex < 0) return;
+    // C1 (quick 260906-cvo) — Layer 5: a second, independent editing-state funnel that takes a
+    // row OBJECT from its caller. Reachable today only via Shift+F2 (Layer 1), so also
+    // redundant at HEAD; kept for the same reason as Layer 4 — it is a mutation entry point,
+    // and the natural call site for a future #rowActions "Edit" drop-in button.
+    if (rowIndexIsGrouped(rowIndex)) return;
     const editable = editableColumnsForRow(rowIndex);
     if (editable.length === 0) return;
     // A new edit session starts — reset the sync idempotency latch (see editCellLifecycle.rzts).
@@ -5741,27 +6652,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     focusCellWhenReady(focusRow, focusCol);
   }
 
-  // replaceRowValues: like replaceRowValue but applies a MAP of field→value to ONE row object
-  // in a single fresh-array replace (req-6 — the whole-row commit is ONE write, not per cell).
-  function replaceRowValues(rows: any, rowIndex: any, fieldValues: any) {
-    const src = rows || [];
-    const fv = fieldValues || {};
-    const out = [];
-    for (let i = 0; i < src.length; i++) {
-      if (i === rowIndex) {
-        // WR-03: own-property spread (orig then the field→value map), NOT a `for..in`
-        // prototype-walking copy. Spread copies own enumerable props only.
-        out.push({
-          ...(src[i] || {}),
-          ...fv
-        });
-      } else {
-        out.push(src[i]);
-      }
-    }
-    return out;
-  }
-
   // Compute the next editable cell for Tab-advance (req-3, RESEARCH Open-Q3 deterministic
   // rule): skip non-editable columns within the row; wrap to the NEXT row's first editable
   // cell at the row's end; stop (return null) at grid end. Pure index math over the visible
@@ -6210,9 +7100,17 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // B14: snapshot the PRE-write ABSOLUTE position so the activecell-change emit fires ONLY on a
     // real move (mirrors the keyboard path's WR-06 suppression). A no-op focusCell to the already-
     // active cell must NOT emit; a header→body landing (prevIsHeader) is a real move.
+    // Phase 87 87-06 (D-08, deferred-items.md "87-03: focusCell's activecell-change emit guard
+    // ignores column-only moves"): also snapshot the PRE-write column so a column-ONLY move (e.g.
+    // focusCell(sameRow, differentCol) — the exact D-08 case) is recognized as a real move too. The
+    // pre-fix guard compared only the row, so DOM focus moved correctly but the event never fired —
+    // logged as a genuine, pre-existing bug in 87-03 and explicitly revisited here because this
+    // plan's absolute-column-index work (and its own acceptance criteria) makes fixing it correct
+    // and cheap now, rather than leaving it deferred.
     const prevAbs = toAbsRow(activeRow());
+    const prevCol = activeColIndex();
     const prevIsHeader = activeIsHeader();
-    if (local.virtual) {
+    if (rowsWindowed()) {
       // Virtual mode: $data.activeRow IS the full pre-pagination index (the wr.vi.index space), so
       // the absolute index maps 1:1. focusActiveCell already runs the D-12 off-window scroll-then-
       // focus path (scrollToIndex(absRow) → deferred-rAF focus) when the row is outside the window.
@@ -6246,7 +7144,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         focusActiveCell(localRow, c, false);
       }
     }
-    if (absRow !== prevAbs || prevIsHeader) {
+    if (absRow !== prevAbs || c !== prevCol || prevIsHeader) {
       _props.onActivecellChange?.({
         rowIndex: absRow,
         colIndex: c
@@ -6420,7 +7318,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
 
     {<Show when={local.groupable}><div class={"rdt-group-bar-host"} data-rozie-s-d5dcab4c="">
       {(_props.groupBarSlot ?? _props.slots?.['groupBar'])?.({ grouping: groupingKeys(), groupableColumns: groupableColumns(), applyGrouping, clearGrouping }) ?? <Key each={groupingKeys() as readonly any[]} by={(gk) => gk}>{(gk) => <span class={"rdt-group-token"} data-group-token="" data-rozie-s-d5dcab4c="">{rozieDisplay(gk())}</span>}</Key>}
-    </div></Show>}{<Show when={local.virtual} fallback={<table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader })} role={rozieAttr(tableRole())} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridKeyDown($event); }} onFocusIn={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { syncActiveFromEvent($event); }} onFocusOut={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridFocusOut($event); }} onMouseDown={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridMouseDown($event); }} onDblClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridDblClick($event); }} onClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridClick($event); }} data-rozie-s-d5dcab4c="">
+    </div></Show>}{<Show when={isWindowed()} fallback={<table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader })} role={rozieAttr(tableRole())} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridKeyDown($event); }} onFocusIn={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { syncActiveFromEvent($event); }} onFocusOut={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridFocusOut($event); }} onMouseDown={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridMouseDown($event); }} onDblClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridDblClick($event); }} onClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridClick($event); }} data-rozie-s-d5dcab4c="">
       <thead class={"rdt-thead"} role="rowgroup" data-rozie-s-d5dcab4c="">
         <Key each={headerGroups() as readonly any[]} by={(hg) => hg.id}>{(hg, hgLevel) => <tr class={"rdt-tr"} role="row" aria-rowindex={rozieAttr(hgLevel() + 1)} data-rozie-s-d5dcab4c="">
           <Key each={hg().headers as readonly any[]} by={(header) => header.id}>{(header) => <th class={"rdt-th" + " " + rozieClass({ 'rdt-select-th': isSelectColumn(header().column.id), 'rdt-expander-th': isExpanderColumn(header().column.id), 'rdt-th-resizing': columnIsResizing(header().column.id), 'rdt-cell-active': isActiveCell('__header', headerColIndexOf(hg(), header()), hgLevel()) })} role="columnheader" data-col={rozieAttr(header().column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(header().colSpan > 1 ? header().colSpan : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), header()))} tabIndex={rozieAttr(cellTabindex('__header', headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(header().column.id))} style={parseInlineStyle(thStyle(header().column.id))} data-rozie-s-d5dcab4c="">
@@ -6469,20 +7367,20 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
           <Key each={visibleCellsFor(row()) as readonly any[]} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td" + " " + rozieClass({ 'rdt-select-td': isSelectColumn(cell().column.id), 'rdt-expander-td': isExpanderColumn(cell().column.id), 'rdt-in-range': inRange(rowIndexOf(row()), colIndexOf(row(), cell())), 'rdt-cell-active': isActiveCell(String(rowIndexOf(row())), colIndexOf(row(), cell())) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(rowIndexOf(row()))} data-col-index={rozieAttr(colIndexOf(row(), cell()))} tabIndex={rozieAttr(cellTabindex(String(rowIndexOf(row())), colIndexOf(row(), cell())))} style={parseInlineStyle(bodyCellStyle(row(), cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(rowIndexOf(row()), colIndexOf(row(), cell())))} data-in-range={rozieAttr(inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? 'true' : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
             
             {<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(rowIndexOf(row()), colIndexOf(row(), cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
-              {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+              {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(row()), value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={hasEditorSlot(cell().column.id)} fallback={<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<input type="text" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><input type="checkbox" data-editing-cell="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
               </select></Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row())) })}
+                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(row()), value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row())) })}
               </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? 'Collapse group' : 'Expand group')} class={"rdt-expander rdt-group-toggle"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(row(), $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? '▾' : '▸')}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
-                {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+                {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(row()), value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay('(' + groupSubRowCount(row()) + ')')}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: row().original, checked: rowIsSelected(row()), toggle: e => onToggleRow(row(), e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(row(), $event); }} data-rozie-s-d5dcab4c="" />}
+              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: cellSlotRow(row()), checked: rowIsSelected(row()), toggle: e => onToggleRow(row(), e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(row(), $event); }} data-rozie-s-d5dcab4c="" />}
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={rowCanExpand(row())}><button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? 'Collapse row' : 'Expand row')} class={"rdt-expander"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(row(), $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? '▾' : '▸')}</button></Show>}</span></Show>}{<Show when={isFillHandleCell(rowIndexOf(row()), colIndexOf(row(), cell()))}><span data-fill-handle="" data-testid="fill-handle" aria-hidden="true" class={"rdt-fill-handle"} onPointerDown={($event: PointerEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c="" /></Show>}</td>}</Key>
         </tr>
@@ -6493,85 +7391,89 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
           </td>
         </tr></Show>}</>}</Key>
       </tbody>
-    </table>}><div class={"rdt-scroll"} style={parseInlineStyle(local.maxHeight ? 'max-height:' + local.maxHeight + ';overflow:auto;--rozie-data-table-max-height:' + local.maxHeight : 'overflow:auto')} data-rozie-s-d5dcab4c="">
-    <table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader })} role={rozieAttr(tableRole())} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridKeyDown($event); }} onFocusIn={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { syncActiveFromEvent($event); }} onFocusOut={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridFocusOut($event); }} onMouseDown={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridMouseDown($event); }} onDblClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridDblClick($event); }} onClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridClick($event); }} data-rozie-s-d5dcab4c="">
+    </table>}><div class={"rdt-scroll"} style={parseInlineStyle(rowsWindowed() && local.maxHeight ? 'max-height:' + local.maxHeight + ';overflow:auto;--rozie-data-table-max-height:' + local.maxHeight : 'overflow:auto')} data-rozie-s-d5dcab4c="">
+    <table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader, 'rdt-col-windowed': colsWindowed() })} role={rozieAttr(tableRole())} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridKeyDown($event); }} onFocusIn={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { syncActiveFromEvent($event); }} onFocusOut={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridFocusOut($event); }} onMouseDown={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridMouseDown($event); }} onDblClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridDblClick($event); }} onClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridClick($event); }} data-rozie-s-d5dcab4c="">
       <thead class={"rdt-thead"} role="rowgroup" data-rozie-s-d5dcab4c="">
         <Key each={headerGroups() as readonly any[]} by={(hg) => hg.id}>{(hg, hgLevel) => <tr class={"rdt-tr"} role="row" aria-rowindex={rozieAttr(hgLevel() + 1)} data-rozie-s-d5dcab4c="">
-          <Key each={hg().headers as readonly any[]} by={(header) => header.id}>{(header) => <th class={"rdt-th" + " " + rozieClass({ 'rdt-select-th': isSelectColumn(header().column.id), 'rdt-expander-th': isExpanderColumn(header().column.id), 'rdt-th-resizing': columnIsResizing(header().column.id), 'rdt-cell-active': isActiveCell('__header', headerColIndexOf(hg(), header()), hgLevel()) })} role="columnheader" data-col={rozieAttr(header().column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(header().colSpan > 1 ? header().colSpan : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), header()))} tabIndex={rozieAttr(cellTabindex('__header', headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(header().column.id))} style={parseInlineStyle(thStyle(header().column.id))} data-rozie-s-d5dcab4c="">
-            {<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={header().column.getCanSort && header().column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+          
+          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(hg(), hgLevel()) as readonly any[]} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-th" + " " + rozieClass({ 'rdt-select-th': isSelectColumn(wh().header.column.id), 'rdt-expander-th': isExpanderColumn(wh().header.column.id), 'rdt-th-resizing': columnIsResizing(wh().header.column.id), 'rdt-cell-active': isActiveCell('__header', headerColIndexOf(hg(), wh().header), hgLevel()) })} role="columnheader" data-col={rozieAttr(wh().header.column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(wh().span > 1 ? wh().span : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), wh().header))} tabIndex={rozieAttr(cellTabindex('__header', headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(wh().header.column.id))} style={parseInlineStyle(thStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
+            {<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+              {<Show when={wh().header.column.getCanSort && wh().header.column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {(_props.colHeaderSlot ?? _props.slots?.['colHeader'])?.({ columnId: header().column.id, column: header().column, label: headerLabel(header().column.id) }) ?? rozieDisplay(headerLabel(header().column.id))}
+                  {(_props.colHeaderSlot ?? _props.slots?.['colHeader'])?.({ columnId: wh().header.column.id, column: wh().header.column, label: headerLabel(wh().header.column.id) }) ?? rozieDisplay(headerLabel(wh().header.column.id))}
                 </span>
-              </span>}><button type="button" class={"rdt-sort-btn"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onHeaderSort(header().column.id, $event); }} data-rozie-s-d5dcab4c="">
+              </span>}><button type="button" class={"rdt-sort-btn"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onHeaderSort(wh().header.column.id, $event); }} data-rozie-s-d5dcab4c="">
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {(_props.colHeaderSlot ?? _props.slots?.['colHeader'])?.({ columnId: header().column.id, column: header().column, label: headerLabel(header().column.id) }) ?? rozieDisplay(headerLabel(header().column.id))}
+                  {(_props.colHeaderSlot ?? _props.slots?.['colHeader'])?.({ columnId: wh().header.column.id, column: wh().header.column, label: headerLabel(wh().header.column.id) }) ?? rozieDisplay(headerLabel(wh().header.column.id))}
                 </span>
-                <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{rozieDisplay(sortIndicator(header().column.id))}</span>
+                <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{rozieDisplay(sortIndicator(wh().header.column.id))}</span>
               </button></Show>}<Popover trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => (<>
-                  <button type="button" class={"rdt-col-menu-trigger"} aria-label={rozieAttr('Column options for ' + headerLabel(header().column.id))} data-rozie-s-d5dcab4c="">⋯</button>
+                  <button type="button" class={"rdt-col-menu-trigger"} aria-label={rozieAttr('Column options for ' + headerLabel(wh().header.column.id))} data-rozie-s-d5dcab4c="">⋯</button>
                 </>)}><div class={"rdt-col-menu"} role="menu" data-rozie-s-d5dcab4c="">
-                  <button type="button" role="menuitem" aria-pressed={columnPinSide(header().column.id) === 'left'} class={"rdt-col-menu-item"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onPinColumn(header().column.id, 'left', $event); }} data-rozie-s-d5dcab4c="">Pin left</button>
-                  <button type="button" role="menuitem" aria-pressed={columnPinSide(header().column.id) === 'right'} class={"rdt-col-menu-item"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onPinColumn(header().column.id, 'right', $event); }} data-rozie-s-d5dcab4c="">Pin right</button>
-                  <button type="button" role="menuitem" aria-pressed={!columnPinSide(header().column.id)} class={"rdt-col-menu-item"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onPinColumn(header().column.id, false, $event); }} data-rozie-s-d5dcab4c="">Unpin</button>
+                  <button type="button" role="menuitem" aria-pressed={columnPinSide(wh().header.column.id) === 'left'} class={"rdt-col-menu-item"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onPinColumn(wh().header.column.id, 'left', $event); }} data-rozie-s-d5dcab4c="">Pin left</button>
+                  <button type="button" role="menuitem" aria-pressed={columnPinSide(wh().header.column.id) === 'right'} class={"rdt-col-menu-item"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onPinColumn(wh().header.column.id, 'right', $event); }} data-rozie-s-d5dcab4c="">Pin right</button>
+                  <button type="button" role="menuitem" aria-pressed={!columnPinSide(wh().header.column.id)} class={"rdt-col-menu-item"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onPinColumn(wh().header.column.id, false, $event); }} data-rozie-s-d5dcab4c="">Unpin</button>
                   <hr class={"rdt-col-menu-sep"} data-rozie-s-d5dcab4c="" />
-                  <button type="button" role="menuitem" class={"rdt-col-menu-item"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onHideColumn(header().column.id, $event); }} data-rozie-s-d5dcab4c="">Hide column</button>
+                  <button type="button" role="menuitem" class={"rdt-col-menu-item"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onHideColumn(wh().header.column.id, $event); }} data-rozie-s-d5dcab4c="">Hide column</button>
                 </div></Popover>
-              <button type="button" aria-label={rozieAttr('Resize ' + headerLabel(header().column.id))} class={"rdt-resize-handle"} onPointerDown={($event: PointerEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onResizeStart(header().column.id, $event); }} onTouchStart={($event: TouchEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onResizeStart(header().column.id, $event); }} data-rozie-s-d5dcab4c=""><span class={"rdt-resize-grip"} aria-hidden="true" data-rozie-s-d5dcab4c="" /></button>
+              <button type="button" aria-label={rozieAttr('Resize ' + headerLabel(wh().header.column.id))} class={"rdt-resize-handle"} onPointerDown={($event: PointerEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onResizeStart(wh().header.column.id, $event); }} onTouchStart={($event: TouchEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onResizeStart(wh().header.column.id, $event); }} data-rozie-s-d5dcab4c=""><span class={"rdt-resize-grip"} aria-hidden="true" data-rozie-s-d5dcab4c="" /></button>
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectAllSlot ?? _props.slots?.['selectAll'])?.({ checked: isAllRowsSelected(), indeterminate: isSomeRowsSelected(), toggle: onToggleAllRows }) ?? <Show when={local.selectionMode === 'multiple'}><input type="checkbox" aria-label="Select all rows" class={"rdt-select-all"} checked={isAllRowsSelected()} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleAllRows($event); }} data-rozie-s-d5dcab4c="" /></Show>}
             </span></Show>}</th>}</Key>
-        </tr>}</Key>
+          
+          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadRight() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}</tr>}</Key>
         
         {<Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
-          <Key each={headerGroups()[headerGroups().length - 1].headers as readonly any[]} by={(header) => header.id}>{(header) => <th class={"rdt-filter-cell"} role="presentation" style={parseInlineStyle(pinStyle(header().column.id))} data-rozie-s-d5dcab4c="">
-            {<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={columnIsFilterable(header().column.id) && !hasFilterSlot()}><input type="text" aria-label={rozieAttr('Filter ' + headerLabel(header().column.id))} class={"rdt-col-filter"} value={columnFilterValue(header().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onColumnFilterInput(header().column.id, $event); }} onClick={($event: MouseEvent & { currentTarget: HTMLInputElement; target: Element }) => { stopEvent($event); }} data-rozie-s-d5dcab4c="" /></Show>}{<Show when={columnIsFilterable(header().column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.filterSlot ?? _props.slots?.['filter'])?.({ columnId: header().column.id, value: columnFilterValue(header().column.id), uniqueValues: getFacetedUniqueValues(header().column.id), minMax: getFacetedMinMaxValues(header().column.id), setFilter: setColumnFilter })}
+          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(headerGroups()[headerGroups().length - 1], headerGroups().length - 1) as readonly any[]} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-filter-cell"} role="presentation" data-col={rozieAttr(wh().header.column.id)} style={parseInlineStyle(pinStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
+            {<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+              {<Show when={columnIsFilterable(wh().header.column.id) && !hasFilterSlot()}><input type="text" aria-label={rozieAttr('Filter ' + headerLabel(wh().header.column.id))} class={"rdt-col-filter"} value={columnFilterValue(wh().header.column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onColumnFilterInput(wh().header.column.id, $event); }} onClick={($event: MouseEvent & { currentTarget: HTMLInputElement; target: Element }) => { stopEvent($event); }} data-rozie-s-d5dcab4c="" /></Show>}{<Show when={columnIsFilterable(wh().header.column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+                {(_props.filterSlot ?? _props.slots?.['filter'])?.({ columnId: wh().header.column.id, value: columnFilterValue(wh().header.column.id), uniqueValues: getFacetedUniqueValues(wh().header.column.id), minMax: getFacetedMinMaxValues(wh().header.column.id), setFilter: setColumnFilter })}
               </span></Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}</th>}</Key>
-        </tr></Show>}</thead>
+          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadRight() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}</tr></Show>}</thead>
 
       <tbody class={"rdt-tbody"} role="rowgroup" data-rozie-s-d5dcab4c="">
         
         <tr class={"rdt-spacer"} aria-hidden="true" data-rozie-s-d5dcab4c="">
-          <td colSpan={rozieAttr(visibleColCount())} style={parseInlineStyle('height:' + padTop() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" />
+          <td colSpan={rozieAttr(windowedColSpan())} style={parseInlineStyle('height:' + padTop() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" />
         </tr>
         
         <Key each={windowedRows() as readonly any[]} by={(wr) => wr.row.id}>{(wr) => <>
         <tr class={"rdt-tr" + " " + rozieClass({ 'rdt-group-header': rowIsGrouped(wr().row), 'rdt-row-pinned': wr().pinned })} role="row" data-row={rozieAttr(wr().vi.index)} aria-rowindex={rozieAttr(headerRowCount() + wr().vi.index + 1)} data-index={rozieAttr(wr().vi.index)} data-pinned={rozieAttr(wr().pinned ? 'true' : null)} data-depth={rozieAttr(wr().row.depth)} data-group-header={rozieAttr(rowIsGrouped(wr().row) ? wr().row.id : null)} data-group-leaf={rozieAttr(groupingActive() && !rowIsGrouped(wr().row) ? wr().row.id : null)} aria-expanded={(rowIsGrouped(wr().row) ? !!rowIsExpanded(wr().row) : null) ?? undefined} aria-selected={(local.selectionMode !== 'none' ? !!rowIsSelected(wr().row) : null) ?? undefined} aria-level={rozieAttr(groupingActive() ? wr().row.depth + 1 : null)} data-rozie-s-d5dcab4c="">
-          <Key each={visibleCellsFor(wr().row) as readonly any[]} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td" + " " + rozieClass({ 'rdt-select-td': isSelectColumn(cell().column.id), 'rdt-expander-td': isExpanderColumn(cell().column.id), 'rdt-in-range': inRange(wr().vi.index, colIndexOf(wr().row, cell())), 'rdt-cell-active': isActiveCell(String(wr().vi.index), colIndexOf(wr().row, cell())) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(wr().vi.index)} data-col-index={rozieAttr(colIndexOf(wr().row, cell()))} tabIndex={rozieAttr(cellTabindex(String(wr().vi.index), colIndexOf(wr().row, cell())))} style={parseInlineStyle(bodyCellStyle(wr().row, cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(wr().vi.index, colIndexOf(wr().row, cell())))} data-in-range={rozieAttr(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? 'true' : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
+          
+          {<Show when={colsWindowed()}><td class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedCells(wr().row) as readonly any[]} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td" + " " + rozieClass({ 'rdt-select-td': isSelectColumn(cell().column.id), 'rdt-expander-td': isExpanderColumn(cell().column.id), 'rdt-in-range': inRange(wr().vi.index, colIndexOf(wr().row, cell())), 'rdt-cell-active': isActiveCell(String(wr().vi.index), colIndexOf(wr().row, cell())) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(wr().vi.index)} data-col-index={rozieAttr(colIndexOf(wr().row, cell()))} tabIndex={rozieAttr(cellTabindex(String(wr().vi.index), colIndexOf(wr().row, cell())))} style={parseInlineStyle(bodyCellStyle(wr().row, cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(wr().vi.index, colIndexOf(wr().row, cell())))} data-in-range={rozieAttr(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? 'true' : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
             
             {<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(wr().vi.index, colIndexOf(wr().row, cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
-              {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+              {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(wr().row), value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={hasEditorSlot(cell().column.id)} fallback={<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<input type="text" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><input type="checkbox" data-editing-cell="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
               </select></Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, wr().vi.index) })}
+                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(wr().row), value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, wr().vi.index) })}
               </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? 'Collapse group' : 'Expand group')} class={"rdt-expander rdt-group-toggle"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(wr().row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? '▾' : '▸')}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
-                {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+                {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(wr().row), value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay('(' + groupSubRowCount(wr().row) + ')')}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: wr().row.original, checked: rowIsSelected(wr().row), toggle: e => onToggleRow(wr().row, e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(wr().row, $event); }} data-rozie-s-d5dcab4c="" />}
+              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: cellSlotRow(wr().row), checked: rowIsSelected(wr().row), toggle: e => onToggleRow(wr().row, e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(wr().row, $event); }} data-rozie-s-d5dcab4c="" />}
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={rowCanExpand(wr().row)}><button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? 'Collapse row' : 'Expand row')} class={"rdt-expander"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(wr().row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? '▾' : '▸')}</button></Show>}</span></Show>}{<Show when={isFillHandleCell(wr().vi.index, colIndexOf(wr().row, cell()))}><span data-fill-handle="" data-testid="fill-handle" aria-hidden="true" class={"rdt-fill-handle"} onPointerDown={($event: PointerEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c="" /></Show>}</td>}</Key>
-        </tr>
+          
+          {<Show when={colsWindowed()}><td class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadRight() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}</tr>
         
         {<Show when={rowShowsDetail(wr().row)}><tr class={"rdt-detail-row"} role="row" data-detail-row={rozieAttr(wr().row.id)} data-rozie-s-d5dcab4c="">
-          <td class={"rdt-detail-cell"} colSpan={rozieAttr(visibleColCount())} data-rozie-s-d5dcab4c="">
+          <td class={"rdt-detail-cell"} colSpan={rozieAttr(windowedColSpan())} data-rozie-s-d5dcab4c="">
             {(_props.detailSlot ?? _props.slots?.['detail'])?.({ row: wr().row.original })}
           </td>
         </tr></Show>}</>}</Key>
         
         <tr class={"rdt-spacer"} aria-hidden="true" data-rozie-s-d5dcab4c="">
-          <td colSpan={rozieAttr(visibleColCount())} style={parseInlineStyle('height:' + padBottom() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" />
+          <td colSpan={rozieAttr(windowedColSpan())} style={parseInlineStyle('height:' + padBottom() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" />
         </tr>
       </tbody>
     </table>
-    </div></Show>}{<Show when={!local.virtual}><div class={"rdt-pagination"} role="group" aria-label="Pagination" data-rozie-s-d5dcab4c="">
+    </div></Show>}{<Show when={!rowsWindowed()}><div class={"rdt-pagination"} role="group" aria-label="Pagination" data-rozie-s-d5dcab4c="">
       <button type="button" class={"rdt-page-btn rdt-page-prev"} disabled={!canPrevPage()} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onPrevPage(); }} data-rozie-s-d5dcab4c="">Prev</button>
       <span class={"rdt-page-status"} aria-live="polite" data-rozie-s-d5dcab4c="">
         {rozieDisplay('Page ' + (pageIndex() + 1) + ' of ' + displayPageCount())}