angular/compose-with-tanstack-virtual

Virtualize TanStack Table rows in Angular by composing table rendering with @tanstack/angular-virtual to render only visible rows plus overscan. This keeps TanStack Table headless for data computation while using a fixed-height scroll container and absolute positioning to efficiently display large datasets.

Yes, row selection and expansion state is preserved during virtualization by keying state to row IDs. This ensures state remains correct even when rows scroll in and out of view, maintaining accurate interactions across the virtualized dataset.

Handle variable row heights during virtualization by using the optional measureElement feature provided by the Angular virtualizer. This dynamically measures rendered row dimensions while still setting the container height to the virtualizer's getTotalSize() value.

No, sorting and filtering remain fully functional because TanStack Table stays headless and continues computing the row model. The virtualizer simply renders the output of table.getRowModel().rows, ensuring dynamic sorting and filtering updates reflect accurately in the virtualized viewport.

Incorrect scrolling or missing rows in a virtualized Angular table often occurs when the scroll container lacks a fixed height or row positioning is not absolute with translateY. The container height must be set to virtualizer.getTotalSize() to preserve accurate scrolling behavior.

Yes, a fixed-height scroll container is required to use TanStack virtual with Angular datagrids. This establishes the viewport boundaries necessary for the virtualizer to calculate visible items and drive the translateY positioning of rows accurately.