Data grid — 1,000 rows, virtualized (TanStack Table + Virtual)

Only the visible rows are in the DOM. Click a header to sort; click rows (or Space/Enter) to select; use ↑/↓/Home/End to navigate.

selected: 0 rows

1. Scroll — the row count in the DOM stays small (open dev tools to confirm).
2. Sort by clicking Name / Age / City headers (toggles asc → desc → none).
3. Focus the grid (Tab to it), then ↑/↓ to move the active row, Space to select.
4. Watch the range readout below as you scroll — that is the dj-range-change event.

Viewport reporting — dj-range-change

The grid reports the rows it has rendered, so a consumer can window its data or load more at the end. The reported window INCLUDES the 8 overscan rows the virtualizer keeps beyond the viewport, so it is wider than what you can see — compare "rendered" against the rows actually visible. The second grid auto-loads 100 more rows whenever end >= count - 1, which is the whole end-reached recipe.

range: (scroll the grid above)

loaded: 100 rows