angular-compose-with-tanstack-virtual

name: angular/compose-with-tanstack-virtual description: > Compose TanStack Table v9 with @tanstack/angular-virtual for virtualized rendering of large row sets. TanStack Table does NOT virtualize on its own. Pattern: get rows = table.getRowModel().rows, feed rows.length to injectVirtualizer({ count, estimateSize, getScrollElement, overscan }), iterate virtualizer.getVirtualItems() in the template, position each row with transform: translateY(item.start) inside a tall sentinel, set [style.height.px]="virtualizer.getTotalSize()" to make the scrollbar correct. Handle the table-feature interactions: row-expanding (variable subRow heights → measure with measureElement), column sizing/pinning (column virtualization is separate), row-selection (selection state survives virtualization because it's keyed by row ID). type: composition library: tanstack-table framework: angular library_version: '9.0.0-alpha.48' requires: - angular/table-state - angular/getting-started - angular/angular-rendering-directives sources: - TanStack/table:docs/framework/angular/angular-table.md - TanStack/virtual:packages/angular-virtual/src/ - TanStack/table:examples/angular/basic-inject-table/

Compose with TanStack Virtual (Angular)

TanStack Table is headless — it computes which rows / cells exist, but does not decide which ones to render to the DOM. For tables larger than a few hundred visible rows, pair with @tanstack/angular-virtual so only the rows in the viewport (+ overscan) actually mount.

Required reading: tanstack-table/angular/getting-started and tanstack-table/angular/table-state.

1. Install

pnpm add @tanstack/angular-virtual

Requires the same Angular version as @tanstack/angular-table.

2. The integration in one shape

import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  computed,
  signal,
  viewChild,
  ElementRef,
} from '@angular/core'
import {
  FlexRender,
  injectTable,
  tableFeatures,
  type ColumnDef,
} from '@tanstack/angular-table'
import { injectVirtualizer } from '@tanstack/angular-virtual'

const features = tableFeatures({})

@Component({
  selector: 'app-virtual-table',
  imports: [FlexRender],
  templateUrl: './virtual-table.html',
  styleUrl: './virtual-table.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class VirtualTable {
  readonly data = signal<Array<Person>>(makeData(50_000))
  readonly scrollContainer =
    viewChild.required<ElementRef<HTMLDivElement>>('scroll')

  readonly table = injectTable(() => ({
    features,
    columns,
    data: this.data(),
    getRowId: (row) => row.id,
  }))

  // Stable reference to the rows array for the virtualizer
  readonly rows = computed(() => this.table.getRowModel().rows)

  readonly rowVirtualizer = injectVirtualizer(() => ({
    count: this.rows().length,
    getScrollElement: () => this.scrollContainer().nativeElement,
    estimateSize: () => 36, // fixed-height rows
    overscan: 10,
  }))
}

<!-- virtual-table.html -->
<div #scroll class="scroll-container" style="height: 600px; overflow: auto">
  <table style="display: grid">
    <thead style="display: grid; position: sticky; top: 0; z-index: 1">
      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
      <tr style="display: flex; width: 100%">
        @for (header of headerGroup.headers; track header.id) {
        <th style="display: flex">
          <ng-container *flexRenderHeader="header; let value"
            >{{ value }}</ng-container
          >
        </th>
        }
      </tr>
      }
    </thead>

    <tbody
      style="display: grid; position: relative"
      [style.height.px]="rowVirtualizer.getTotalSize()"
    >
      @for (virtualRow of rowVirtualizer.getVirtualItems(); track
      virtualRow.key) { @let row = rows()[virtualRow.index];
      <tr
        [attr.data-index]="virtualRow.index"
        style="display: flex; position: absolute; width: 100%"
        [style.transform]="'translateY(' + virtualRow.start + 'px)'"
      >
        @for (cell of row.getVisibleCells(); track cell.id) {
        <td style="display: flex">
          <ng-container *flexRenderCell="cell; let value"
            >{{ value }}</ng-container
          >
        </td>
        }
      </tr>
      }
    </tbody>
  </table>
</div>

What's doing what

• Table produces rows (table.getRowModel().rows). Length, identity, order are decided by registered features (sort, filter, pagination, grouping).
• Virtualizer turns rows.length into the subset of "virtual items" currently visible (+ overscan). It tracks scroll on getScrollElement() and emits getVirtualItems() keyed by virtualRow.key (the row index by default).
• Template renders only the virtual items, positions each with translateY(virtualRow.start) inside a sentinel of total height getTotalSize(). The scrollbar reflects the full row count, but only the visible window has DOM nodes.

3. Mandatory layout details

This integration touches CSS in a few non-obvious places. None are optional:

• Scroll container has a fixed height (height: 600px / 100vh / whatever) and overflow: auto. The virtualizer needs both to compute visible range.
• Use display: grid on <table>, display: flex on <thead> / <tbody> / <tr>, or use <div> markup. Native <table> layout defeats positioning rows absolutely. The virtual example above uses CSS grid to keep semantic table markup while letting the rows position freely.
• Container <tbody> is position: relative with explicit height = virtualizer.getTotalSize(). Without that height, the scrollbar doesn't reflect the full data.
• Rows are position: absolute; top: 0; left: 0; width: 100% with transform: translateY(virtualRow.start).
• Sticky header: position: sticky; top: 0; z-index: 1 on the <thead> / its <tr> — the scroll container provides the scrolling.

4. Variable row heights — measure dynamically

When rows can be different heights (expanded subRows, dynamic cell content), pass measureElement and a sensible estimateSize:

readonly rowVirtualizer = injectVirtualizer(() => ({
  count: this.rows().length,
  getScrollElement: () => this.scrollContainer().nativeElement,
  estimateSize: () => 36,
  overscan: 10,
  measureElement: (element) => element?.getBoundingClientRect().height ?? 36,
}))

In the template, bind the element so the virtualizer can measure it:

<tr
  #rowEl
  [attr.data-index]="virtualRow.index"
  [virtualizerMeasureElement]="rowVirtualizer"
  ...
></tr>

(See @tanstack/angular-virtual docs for the exact directive name and API; the principle is: every mounted row reports its real size, the virtualizer caches that, scrollbar adjusts.)

5. Row expanding — rowExpandingFeature

Combine with rowExpandingFeature for "click to expand details":

• Register rowExpandingFeature in features and expandedRowModel: createExpandedRowModel() as a slot on features.
• Use table.getExpandedRowModel().rows (or getRowModel().rows, which already includes expansion under paginateExpandedRows: true semantics — see tanstack-table/core/row-expanding).
• Always use measureElement because expansion changes row heights.
• The virtualizer keys items by index; expanded subRows shift later rows down — that's correct and expected.

6. Row selection works transparently

Row selection is keyed by row ID (getRowId), not by DOM presence. A row can be selected while off-screen; scrolling it into view shows the right checkbox state. Always set getRowId — critical for both selection and virtualizer key stability.

7. Column virtualization (horizontal)

For very wide tables (50+ columns), virtualize columns too — a second injectVirtualizer over table.getVisibleLeafColumns().length. The pattern mirrors row virtualization but on the X axis. Combine with columnPinningFeature so pinned columns escape the virtualizer (always rendered, sticky).

That's a meaningfully bigger lift — most tables don't need it. Reach for it only when you've profiled and column count is the bottleneck.

8. Interaction with pagination

If you paginate, you usually don't virtualize. Pagination already caps the rendered row count to pageSize. Adding virtualization on top is typically wasted effort — you've already solved the rendering bottleneck.

The exceptions:

• Pages can hold thousands of rows (rare).
• Pagination is "load more" / infinite scroll style — then virtualize the accumulated rows.

9. Interaction with sticky / pinned rows

rowPinningFeature + virtualization is fiddly. Pinned rows live at the top/bottom of the table; they should render outside the virtualizer's absolute positioning. Render them in dedicated <thead> / top/bottom-of-<tbody> sections, and call table.getCenterRows() (the non-pinned rows) to feed the virtualizer. See tanstack-table/core/row-pinning for the API surface.

10. SSR / first-paint

On the server / first hydration, the scroll container's height is unknown; the virtualizer can render zero rows. Two mitigations:

• Render a small initial chunk server-side (without the virtualizer) and let Angular hydrate into the virtualized version client-side.
• Provide an explicit initialRect: { width, height } to the virtualizer options for SSR.

Failure modes

1. (CRITICAL) Trying to use TanStack Table's own virtualization

There is none. TanStack Table doesn't ship a virtualizer. If an agent suggests getVirtualizedRows() or enableVirtualization: true on the table — those don't exist. Use @tanstack/angular-virtual.

2. (CRITICAL) Missing height on the scroll container

<!-- ❌ no height → virtualizer reports 0 visible items → nothing renders -->
<div #scroll style="overflow: auto">
  <!-- ✅ -->
  <div #scroll style="height: 600px; overflow: auto"></div>
</div>

The virtualizer measures the scroll element's viewport. Without an explicit or computed height, the viewport is 0 and nothing renders.

3. (CRITICAL) Missing getTotalSize() height on the row container

<!-- ❌ scrollbar reflects only the rendered rows, not the full dataset -->
<tbody>
  <!-- ✅ -->
</tbody>

<tbody [style.height.px]="rowVirtualizer.getTotalSize()"></tbody>

Without this, you can scroll to the bottom of the visible rows but can never reach row 1000. The scrollbar lies.

4. (CRITICAL) Forgetting transform: translateY(...) per row

Absolutely-positioned rows without transform stack at top: 0 — every row renders on top of every other.

5. (CRITICAL) Using native <table> layout with absolute-positioned rows

Native <table> layout overrides positioning on <tr> / <td>. Either:

• Use display: grid on <table> and display: flex on <tr> / <td> (see §3), preserving semantic markup, OR
• Use <div> markup throughout.

6. (HIGH) Variable row heights without measureElement

Default estimateSize is a constant. Different real heights → wrong positions → rows visually overlap or leave gaps. Pass measureElement and a way for each mounted row to report its real size.

7. (HIGH) Pagination + virtualization both enabled

Pagination already caps row count. Adding virtualization on top doubles the indirection for no win. Pick one.

8. (HIGH) Reimplementing virtualization with IntersectionObserver

Saw an agent build a homegrown "render rows when visible" with IntersectionObserver? That's hundreds of lines of broken virtualization. Use the library.

9. (HIGH) Wrong track in the virtualized @for

<!-- ❌ tracking by row.id confuses Angular because positions shift -->
@for (virtualRow of rowVirtualizer.getVirtualItems(); track row.id)

<!-- ✅ -->
@for (virtualRow of rowVirtualizer.getVirtualItems(); track virtualRow.key)

Track by the virtual item's stable key (or index). The row is inside the virtual item — Angular uses the outer track for DOM reuse.

10. (MEDIUM) injectVirtualizer outside an injection context

Like injectTable, injectVirtualizer calls assertInInjectionContext(). Place it on a class field, in a constructor, or inside runInInjectionContext.

11. (MEDIUM) Recreating count / estimateSize on every signal change without

stable callbacks

Move estimateSize, measureElement, getScrollElement to stable references (class arrow methods or module-scope functions) where possible. Otherwise the virtualizer re-initializes its internal state on every change.

12. (MEDIUM) Missing getRowId — selection breaks across re-sorts in a

virtualized table

This isn't virtualization-specific, but it's especially visible here because virtualization renders a window of rows; refreshing that window via scroll makes mismatched checkbox state obvious. getRowId: (row) => row.id is mandatory.

See also

• tanstack-table/angular/getting-started — baseline table that this skill layers virtualization on top of
• tanstack-table/angular/production-readiness — when to reach for virtualization vs server-side pagination
• tanstack-table/core/row-expanding — variable subRow heights + virtual
• tanstack-table/core/column-layout — pinning interaction
• @tanstack/angular-virtual docs — injectVirtualizer, options reference, variable-height patterns