angular/compose-with-tanstack-virtual

What problem does it solve?

Rendering very large TanStack Table datasets in Angular can become slow because the DOM mounts far more rows than the user can actually see.

Core Features & Use Cases

• Compose TanStack Table with @tanstack/angular-virtual to render only the rows in the viewport (+ overscan) while TanStack Table stays headless and computes row/cell data.
• Handle real-world table interactions such as sorting/filtering/grouping, variable row heights (via measuring), row expansion, and row selection keyed by row ID so state remains correct when rows scroll in and out of view.
• Use correct layout mechanics including a fixed-height scroll container, a getTotalSize()-driven spacer height, and absolutely positioned rows with translateY to preserve accurate scrolling behavior.

Quick Start

Use the skill guidance to set a fixed-height scrolling container, compute rows = table.getRowModel().rows, create an Angular virtualizer using that row count, and render rowVirtualizer.getVirtualItems() with translateY(virtualRow.start) while setting the rows container height to rowVirtualizer.getTotalSize().