docs(53-05): retire virtualization deferral, publish tested-to ceiling (100,000 rows)

- Comparison: move row virtualization OUT of 'What Rozie defers' into a wins bullet + feature-matrix row; publish falsifiable 'tested to 100,000 rows' ceiling (== VR fixture count, D-13/A4)
- Comparison: log remaining deferrals (horizontal/column virtualization + dynamic auto-measure beyond measureElement); bump prop count 15→18
- Demo: add a 50,000-row windowing live demo (virtual + maxHeight) + showcase prose
- Usage: regenerated with the third virtualization example set; docs build green (gen + vitepress + check-anchors, 162 anchors / 0 broken)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013wvxhsB5hcDKD8UadLLSyw

Author: serpentblade

docs/components/data-table-comparison.md

@@ -40,6 +40,7 @@ Cell legend: **✅** = documented out-of-the-box · **❌** = not supported / no
 | Row selection | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ `selectionMode` |
 | Column visibility / resize / reorder / pin | ✅ | ✅ | ✅ | ✅ | ✅ (AG) | ❌ | ✅ four slices |
 | Sticky header | ✅ | ✅ | ⚠️ | ✅ | ✅ | ❌ | ✅ `stickyHeader` |
+| Row virtualization (windowing) | ✅ (TanStack Virtual) | ✅ (TanStack Virtual) | ✅ (TanStack Virtual) | ✅ (TanStack Virtual) | ✅ (AG) | ❌ | ✅ `virtual` (tested to 100,000 rows) |
 | APG grid keyboard navigation (`role="grid"`) | ❌ | ⚠️ (PrimeVue) | ❌ | ❌ | ✅ (AG) | ❌ | ✅ `interactionMode="grid"` |
 | Declarative `<Column>` surface | ⚠️ defs array | ✅ (PrimeVue) | ⚠️ | ⚠️ | ⚠️ | — | ✅ `<Column>` + `:columns` |
 | Custom cell / header rendering | ✅ | ✅ | ✅ | ✅ | ✅ | — | ✅ parent `#cell` / `#colHeader`, `columnId`-dispatched (React/Solid render-prop, Lit property) |
@@ -58,15 +59,16 @@ Cell legend: **✅** = documented out-of-the-box · **❌** = not supported / no
 - **A declarative `<Column>` API** (the PrimeVue-shaped surface) *and* a `:columns` config-array escape hatch, resolved by an id-keyed last-write-wins union — plus custom cell/header rendering via a single parent `#cell` / `#colHeader` scoped slot dispatched by `columnId` (a render-prop on React/Solid and a property on Lit, the one documented divergence).
 - **Zero-config styling that re-skins to any design system.** Every rendered value is a `--rozie-data-table-*` CSS custom property with a built-in fallback, plus ready-made token bridges for shadcn/ui, Material 3, and Bootstrap 5 — no required CSS import.
 - **Opt-in WAI-ARIA grid mode, identical on all six targets.** Set `interactionMode="grid"` for the full [APG grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) — `role="grid"`, a roving single tab-stop, and 2-D arrow-key cell navigation that survives a re-sort / filter / page change / column hide-reorder-pin (the active cell is tracked as a `{ rowIndex, colIndex }` pair over the visible model, never a stored DOM node). It is drivable and observable via the `focusCell` / `getActiveCell` / `clearActiveCell` handle verbs and the `activecell-change` event, and the behavioral contract is locked by a cross-framework VR matrix. The default `interactionMode="table"` stays a plain accessible table, byte-for-byte unchanged.
+- **Opt-in vertical row windowing, on all six targets.** Set `virtual` (with an optional `maxHeight` / `--rozie-data-table-max-height` and `estimateRowHeight`) to render only the visible slice of a large dataset inside a bounded scroll container — windowing the full filtered + sorted (pre-pagination) model, with `aria-rowcount` / `aria-rowindex` mapping the full model, variable-height rows measured (no cumulative drift), and sticky-header + pinned-column geometry preserved. Built on the framework-agnostic `@tanstack/virtual-core` wired by hand — **no per-framework virtual adapter** — and **tested to 100,000 rows** on all six targets by a DOM/behavioral VR matrix (`tests/visual-regression/specs/data-table-virtual.spec.ts`). The default `virtual="false"` is byte-identical to a non-virtual table.
 
 ## What Rozie defers {#what-rozie-defers}
 
 This page concedes where the incumbents are genuinely ahead — that's what keeps the comparison credible, and it doubles as Rozie's own roadmap.
 
 - **AG Grid's enterprise depth.** [AG Grid](https://www.ag-grid.com/) ships row grouping, tree data, pivoting, range selection, master/detail, integrated charting, and a deep server-side row model. `@rozie-ui/data-table` covers the common surface (sort / filter / paginate / select / column management) and a `manual` server-side hook, not the enterprise feature set.
-- **Row/cell virtualization.** Large datasets render every row today — there is no built-in windowing. Virtualization is a planned phase (the published support boundary is a row-count ceiling until it lands); for now, paginate or pre-window large data yourself.
+- **Horizontal (column) virtualization + dynamic auto-measure.** Vertical **row** windowing ships and is GA on all six targets — set `virtual` and large datasets render only the visible slice (**tested to 100,000 rows**). What remains deferred is the orthogonal pieces: **horizontal/column virtualization** (a very wide column set still renders every column), and **dynamic auto-measurement beyond `measureElement`** — variable row heights are measured via `measureElement`, but there is no content-driven auto-sizing pass past it. Use `estimateRowHeight` to seed the row estimate for now.
 - **TanStack's expansion / grouping / faceting helpers.** The shared `table-core` exposes more row-model features (expanding, grouping, faceted filters) than `@rozie-ui/data-table` surfaces in its current prop set. They are reachable via the imperative handle / future additive props.
-- **`@rozie-ui/data-table` is `0.1.0`.** The surface (15 props / 9 two-way slices / 9 events / 15-verb handle / declarative `<Column>` + `columnId`-dispatched cell/header slots / 2 selection slots) is stable and gate-verified across all six targets, but it is younger and less battle-tested than the established libraries.
+- **`@rozie-ui/data-table` is `0.1.0`.** The surface (18 props / 9 two-way slices / 9 events / 15-verb handle / declarative `<Column>` + `columnId`-dispatched cell/header slots / 2 selection slots) is stable and gate-verified across all six targets, but it is younger and less battle-tested than the established libraries.
 
 ## Try it
 

docs/components/data-table-demo.md

@@ -24,6 +24,15 @@ const rowSelection = ref({});
 const pagination = ref({ pageIndex: 0, pageSize: 5 });
 
 const tbl = ref();
+
+// A large dataset for the row-windowing demo — 50,000 synthetic rows. With
+// `virtual`, only the visible slice renders inside the bounded scroll container.
+const BIG_ROWS = Array.from({ length: 50_000 }, (_, i) => ({
+  id: i + 1,
+  name: `Row ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+  status: i % 2 ? 'active' : 'away',
+}));
 </script>
 
 # DataTable — live demo
@@ -73,6 +82,24 @@ This is the **real `@rozie-ui/data-table-vue` package** running on this page (Vi
 
 Each `v-model:<slice>` is a two-way bind — the readout updates the instant you change the state, and a consumer write flows back in. The four slices bound here (`sorting`, `globalFilter`, `rowSelection`, `pagination`) are four of the [nine independent state slices](/components/data-table#models-the-nine-two-way-slices); bind a slice only when you want to own it. The header buttons drive the imperative handle (`toggleAllRows`, `clearSelection`, `clearSorting`) grabbed through Vue's `ref`. A single `#cell` slot on `<DataTable>`, dispatched by `columnId`, renders the **Status** badge; every other column falls through to the plain accessor value (the fast path). See the [full API](/components/data-table) for every prop, slice, event, slot, and handle verb, plus the `<Column>` API, theming, and accessibility reference.
 
+## Row windowing (virtualization)
+
+The same real `@rozie-ui/data-table-vue` package, now over **50,000 rows** with `virtual` + `maxHeight="400px"`. Only the visible slice renders inside the bounded scroll container — scroll the table below and watch the row count stay tiny while the scrollbar spans the full 50,000-row height. Row windowing is GA on all six targets and [**tested to 100,000 rows**](/components/data-table-comparison#feature-matrix) by a DOM/behavioral VR matrix; the default `virtual="false"` is byte-identical to a non-virtual table.
+
+<ClientOnly>
+<div class="dt-live">
+
+  <DataTable :data="BIG_ROWS" virtual max-height="400px">
+    <Column field="name" header="Name" />
+    <Column field="email" header="Email" />
+    <Column field="status" header="Status" />
+  </DataTable>
+
+</div>
+</ClientOnly>
+
+Set `virtual` to opt in; bound `maxHeight` (or the `--rozie-data-table-max-height` CSS custom property — the prop wins, the token is the fallback) sizes the scroll container, and `estimateRowHeight` seeds the row estimate before `measureElement` refines actual heights. Windowing runs over the full filtered + sorted (pre-pagination) model and suppresses the client pagination chrome. See the [comparison page](/components/data-table-comparison#what-rozie-defers) for the published support boundary (and the orthogonal pieces — column virtualization + dynamic auto-measure — that remain deferred).
+
 ## One source, six outputs
 
 You author the component **once** as a `.rozie` file (the parent `DataTable.rozie` plus the declarative `Column.rozie` child):

docs/components/data-table-usage.md

@@ -336,6 +336,193 @@ render(html`
 
 :::
 
+### Virtualized rows (windowing)
+
+::: code-group
+
+```tsx [React]
+import { DataTable, Column } from '@rozie-ui/data-table-react';
+
+// PROP form — bound `maxHeight` sizes the scroll container.
+export function Demo() {
+  const rows = Array.from({ length: 10_000 }, (_, i) => ({
+    id: i + 1,
+    name: `Row ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    status: i % 2 ? 'active' : 'away',
+  }));
+  return (
+    <DataTable data={rows} virtual maxHeight="400px">
+      <Column field="name" header="Name" />
+      <Column field="email" header="Email" />
+      <Column field="status" header="Status" />
+    </DataTable>
+  );
+}
+
+// TOKEN form — the same bound height via the CSS custom property (the prop wins
+// when both are set; the token is the fallback). Tune the row estimate too:
+// <DataTable data={rows} virtual estimateRowHeight={48}
+//   style={{ '--rozie-data-table-max-height': '400px' } as React.CSSProperties} />
+```
+
+```vue [Vue]
+<script setup lang="ts">
+import DataTable, { Column } from '@rozie-ui/data-table-vue';
+
+const rows = Array.from({ length: 10_000 }, (_, i) => ({
+    id: i + 1,
+    name: `Row ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    status: i % 2 ? 'active' : 'away',
+  }));
+</script>
+
+<template>
+  <!-- PROP form — bound :maxHeight sizes the scroll container. -->
+  <DataTable :data="rows" :virtual="true" maxHeight="400px">
+    <Column field="name" header="Name" />
+    <Column field="email" header="Email" />
+    <Column field="status" header="Status" />
+  </DataTable>
+
+  <!-- TOKEN form — the same height via the CSS custom property (prop wins when
+       both are set; the token is the fallback). :estimateRowHeight tunes the seed. -->
+  <DataTable
+    :data="rows"
+    :virtual="true"
+    :estimateRowHeight="48"
+    style="--rozie-data-table-max-height: 400px"
+  >
+    <Column field="name" header="Name" />
+    <Column field="email" header="Email" />
+    <Column field="status" header="Status" />
+  </DataTable>
+</template>
+```
+
+```svelte [Svelte]
+<script lang="ts">
+  import DataTable, { Column } from '@rozie-ui/data-table-svelte';
+
+  const rows = Array.from({ length: 10_000 }, (_, i) => ({
+    id: i + 1,
+    name: `Row ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    status: i % 2 ? 'active' : 'away',
+  }));
+</script>
+
+<!-- PROP form — bound maxHeight sizes the scroll container. -->
+<DataTable data={rows} virtual maxHeight="400px">
+  <Column field="name" header="Name" />
+  <Column field="email" header="Email" />
+  <Column field="status" header="Status" />
+</DataTable>
+
+<!-- TOKEN form — the same height via the CSS custom property (prop wins when both
+     are set; the token is the fallback). estimateRowHeight tunes the seed. -->
+<DataTable data={rows} virtual estimateRowHeight={48} style="--rozie-data-table-max-height: 400px">
+  <Column field="name" header="Name" />
+  <Column field="email" header="Email" />
+  <Column field="status" header="Status" />
+</DataTable>
+```
+
+```ts [Angular]
+import { Component } from '@angular/core';
+import { DataTable, Column } from '@rozie-ui/data-table-angular';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [DataTable, Column],
+  template: `
+    <!-- PROP form — bound [maxHeight] sizes the scroll container. -->
+    <DataTable [data]="rows" [virtual]="true" maxHeight="400px">
+      <Column field="name" header="Name" />
+      <Column field="email" header="Email" />
+      <Column field="status" header="Status" />
+    </DataTable>
+
+    <!-- TOKEN form — the same height via the CSS custom property (prop wins when
+         both are set; the token is the fallback). [estimateRowHeight] tunes the seed. -->
+    <DataTable
+      [data]="rows"
+      [virtual]="true"
+      [estimateRowHeight]="48"
+      style="--rozie-data-table-max-height: 400px"
+    >
+      <Column field="name" header="Name" />
+      <Column field="email" header="Email" />
+      <Column field="status" header="Status" />
+    </DataTable>
+  `,
+})
+export class DemoComponent {
+  rows = Array.from({ length: 10_000 }, (_, i) => ({
+    id: i + 1,
+    name: `Row ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    status: i % 2 ? 'active' : 'away',
+  }));
+}
+```
+
+```tsx [Solid]
+import { DataTable, Column } from '@rozie-ui/data-table-solid';
+
+// PROP form — bound maxHeight sizes the scroll container.
+export function Demo() {
+  const rows = Array.from({ length: 10_000 }, (_, i) => ({
+    id: i + 1,
+    name: `Row ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    status: i % 2 ? 'active' : 'away',
+  }));
+  return (
+    <DataTable data={rows} virtual maxHeight="400px">
+      <Column field="name" header="Name" />
+      <Column field="email" header="Email" />
+      <Column field="status" header="Status" />
+    </DataTable>
+  );
+}
+
+// TOKEN form — the same height via the CSS custom property (the prop wins when
+// both are set; the token is the fallback). estimateRowHeight tunes the seed:
+// <DataTable data={rows} virtual estimateRowHeight={48}
+//   style={{ '--rozie-data-table-max-height': '400px' }} />
+```
+
+```ts [Lit]
+import { html, render } from 'lit';
+import '@rozie-ui/data-table-lit';
+
+const rows = Array.from({ length: 10_000 }, (_, i) => ({
+    id: i + 1,
+    name: `Row ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    status: i % 2 ? 'active' : 'away',
+  }));
+
+// PROP form — the `max-height` attribute sizes the scroll container.
+render(html`
+  <rozie-data-table .data=${rows} virtual max-height="400px">
+    <rozie-column field="name" header="Name"></rozie-column>
+    <rozie-column field="email" header="Email"></rozie-column>
+    <rozie-column field="status" header="Status"></rozie-column>
+  </rozie-data-table>
+`, document.body);
+
+// TOKEN form — the same height via the CSS custom property (the prop wins when
+// both are set; the token is the fallback). `estimate-row-height` tunes the seed:
+//   <rozie-data-table .data=${rows} virtual estimate-row-height="48"
+//     style="--rozie-data-table-max-height: 400px"> … </rozie-data-table>
+```
+
+:::
+
 ## Imperative handle
 
 Beyond props and events, `DataTable` exposes imperative methods (declared once in the `.rozie` source via `$expose`). Grab a handle through your framework's native ref mechanism and call them directly: