skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

with-tanstack-virtual

Virtualize Angular Table row and column models with signal-based scroll rendering.

28.4k|3.6k|Updated Oct 20, 2016
Search Tags:#Angular#Signals#tanstack table#datagrid#infinite scrolling#Virtualization#injectvirtualizer
One-click install
npx skills add https://github.com/TanStack/table --skill with-tanstack-virtual
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: with-tanstack-virtual
Source: https://github.com/TanStack/table/tree/main/packages/angular-table/skills/with-tanstack-virtual
Command: npx skills add https://github.com/TanStack/table --skill with-tanstack-virtual

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/angular-table, @tanstack/angular-virtual, @tanstack/table-core.

What problem does it solve?

Rendering thousands of rows or columns in an Angular Table causes severe DOM bloat and slow rendering. This Skill guides the integration of @tanstack/angular-virtual with @tanstack/angular-table so only visible rows and columns are rendered, while respecting Angular's injection context and signal-based reactivity.

Core Features & Use Cases

  • Row and Column Virtualization: Wire injectVirtualizer to the table's final row model using computed signals, scroll elements, item keys, and size estimation.
  • Correct DOM Geometry: Apply total-size spacers, absolute positioning, transforms, sticky headers, and grid/flex sizing that the virtualizer itself does not handle.
  • Infinite Scrolling: Gate server fetches when the last virtual item approaches the fetched data length, with safeguards against duplicate requests.
  • Use Case: Build an Angular datagrid displaying 100,000 server-side rows where only ~30 visible rows are rendered at a time, with infinite scroll fetching additional pages as the user scrolls.

Quick Start

Add virtualized rows to my Angular table using injectVirtualizer connected to the table's row model with a scroll container and total-size spacer.

Frequently Asked Questions about with-tanstack-virtual

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I virtualize rows in an Angular TanStack Table?▼

Use injectVirtualizer from @tanstack/angular-virtual with a computed signal of table.getRowModel().rows, a scroll element reference, an estimateSize function, and getItemKey for stable keys. Render virtual items inside a total-size spacer with absolute positioning.

How to implement infinite scrolling with Angular Table virtualization?▼

Check when the last virtual item approaches the fetched data length, then fetch the next page only if more server rows exist and no request is active. Manual sorting requires server-sorted pages plus a reset and refetch policy.

Why does injectVirtualizer fail outside an Angular injection context?▼

injectVirtualizer follows Angular DI lifecycle rules like injectTable, so it must be called during component construction or inside an injection context. Calling it from a plain helper function throws an injection context error.

Can I virtualize raw data instead of the table row model?▼

No, virtualizing raw data bypasses Table filtering, sorting, expansion, grouping, and pagination. Always derive rows from table.getRowModel().rows inside a computed signal so virtualization reflects the final table state.

Why are my virtualized rows overlapping or invisible in Angular?▼

The virtualizer computes ranges and sizes but does not apply DOM geometry. You must add a container with the total size in pixels, position items absolutely, and apply transforms or measurements to each virtual item.

Related Skills

Explore More Software Engineering Skills→
Montte-erpMontte-erp
6

tanstack-table

Manage sorting, filtering, pagination, grouping, and row state for dynamic data grids.

Official
Advanced
ovachieverovachiever
52

TanStack Table

Configure TanStack Table v8 for server-side pagination, filtering, and sorting on Cloudflare Workers.

Community
Intermediate
TanStackTanStack
28.3k

angular/compose-with-tanstack-virtual

Compose TanStack Table with @tanstack/angular-virtual to render large row sets.

Official
Advanced
congiuluccongiuluc

performance-frontend-angular

Identify Angular performance bottlenecks and apply optimization patterns for Core Web Vitals.

Community
Advanced