Data Virtualization in Angular 20+: Smooth, Memory‑Safe Tables with Angular Material and PrimeNG

Symptoms I see in audits

• Wheel scroll hitching every ~120px

• CPU spikes from 8% → 70% on scroll

• Heap rising 5–10MB/minute

• Focus lost when rows recycle

Targets that keep me honest

• DOM nodes: <200 in viewport

• Frame time: <16ms @ 95th percentile

• Heap: stable (±50MB) after 10 minutes of scroll

• AA contrast; keyboard continuity across virtualization

What changed with Angular 20+

• Signals remove change detection guesswork; visible slice reactivity is trivial.

• SignalStore gives a simple, testable cache for windowed data.

• CDK adds reliable virtual scroll strategies (fixed/auto size).

Where this shows up

• Role‑based dashboards with auditability

• Telemetry tables feeding D3/Highcharts views

• Kiosk logs with offline tolerance and replay

Step 1 — Pick the right primitive

• CDK: cdk-virtual-scroll-viewport + mat-table for full control.

• PrimeNG: p-table with [virtualScroll] for batteries included.

• Avoid homegrown scroll listeners—browser APIs + CDK are better.

Step 2 — Fixed row height and trackBy

• Use fixed row height where possible; autosize costs perf.

• Stable IDs only—never trackBy index.

• Measure render counts with Angular DevTools.

Step 3 — Signals/SignalStore window cache

• Cache pages (e.g., 200 rows/page) keyed by index.

• Prefetch next/prev page on scroll direction change.

• Evict old pages to keep heap stable.

Step 4 — UX polish within budgets

• AA contrast using AngularUX palette tokens.

• Density controls (compact/comfortable).

• Skeleton rows for pending pages; no layout shift.

CDK + Material mat-table with Signals

import { Component, computed, signal, effect } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { MatTableModule } from '@angular/material/table';
import { toSignal } from '@angular/core/rxjs-interop';

interface Row { id: string; name: string; status: string; }

@Component({
  selector: 'ux-virtual-table',
  standalone: true,
  imports: [CdkVirtualScrollViewport, MatTableModule],
  template: `
  <cdk-virtual-scroll-viewport
    class="viewport"
    itemSize="{{rowHeight}}"
    minBufferPx="{{rowHeight*10}}"
    maxBufferPx="{{rowHeight*20}}">
    <table mat-table [dataSource]="visibleRows()" class="mat-elevation-z1" role="grid" aria-rowcount="{{total}}">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let r; trackBy: trackById">{{ r.name }}</td>
      </ng-container>
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>Status</th>
        <td mat-cell *matCellDef="let r; trackBy: trackById">{{ r.status }}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" tabindex="-1"></tr>
    </table>
  </cdk-virtual-scroll-viewport>
  `,
  styles: [`.viewport{ height: calc(100vh - 240px); }`]
})
export class UxVirtualTableComponent {
  rowHeight = 40; // density token
  displayedColumns = ['name','status'];

  private all = signal<Row[]>([]); // can be server-windowed too
  total = 500_000;

  // Compute the visible window (you can read viewport offset via ViewChild)
  viewportOffset = signal({start: 0, end: 50});
  visibleRows = computed(() => this.all().slice(this.viewportOffset().start, this.viewportOffset().end));

  trackById = (_: number, r: Row) => r.id;
}

PrimeNG p-table with virtualScroll + lazy page cache

<p-table
  [value]="rows()"
  [virtualScroll]="true"
  [virtualScrollItemSize]="density.rowHeight"
  [lazy]="true"
  [rows]="pageSize"
  [scrollHeight]="'flex'"
  [loader]="true"
  (onLazyLoad)="onLazyLoad($event)"
  [trackBy]="trackById">
  <ng-template pTemplate="header">
    <tr><th>Name</th><th>Status</th></tr>
  </ng-template>
  <ng-template pTemplate="body" let-row>
    <tr>
      <td>{{row.name}}</td>
      <td><span [class]="'status-'+row.status">{{row.status}}</span></td>
    </tr>
  </ng-template>
</p-table>

SignalStore cache for lazy pages (prefetch + eviction)

import { signalStore, withState, patchState, withComputed } from '@ngrx/signals';

interface Row { id: string; name: string; status: string; }
interface TableState {
  pageSize: number;
  total: number;
  pages: Map<number, Row[]>; // window cache
  loading: Set<number>;
}

export const useTableStore = () => signalStore(
  withState<TableState>({ pageSize: 100, total: 500_000, pages: new Map(), loading: new Set() }),
  withComputed(({ pages, pageSize }) => ({
    getSlice: (start: number, end: number) => {
      const s = Math.floor(start / pageSize());
      const e = Math.floor((end - 1) / pageSize());
      const out: Row[] = [];
      for (let p = s; p <= e; p++) if (pages().get(p)) out.push(...(pages().get(p)!));
      return out.slice(start - s*pageSize(), start - s*pageSize() + (end - start));
    }
  }))
);

// Example loader with prefetch/evict
async function ensurePage(store: ReturnType<typeof useTableStore>, p: number) {
  const { pageSize } = store.state();
  if (store.state().pages.has(p) || store.state().loading.has(p)) return;
  patchState(store, s => ({ loading: new Set(s.loading).add(p) }));
  const rows = await fetch(`/api/rows?p=${p}&size=${pageSize}`).then(r => r.json());
  patchState(store, s => {
    const pages = new Map(s.pages); pages.set(p, rows);
    // Evict far pages to bound memory
    while (pages.size > 6) pages.delete(pages.keys().next().value);
    const loading = new Set(s.loading); loading.delete(p);
    return { pages, loading };
  });
}

Density, typography, and AngularUX palette tokens

:root{
  --ux-row-height-compact: 36px;
  --ux-row-height-comfortable: 44px;
  --ux-font-size-100: 12px;
  --ux-font-size-200: 14px;
  --ux-color-surface: #0b0e14;
  --ux-color-surface-2: #121826;
  --ux-color-text: #e6edf3;
  --ux-color-accent: #4cc2ff;
}
.table-virtual{
  --row-height: var(--ux-row-height-compact);
  background: var(--ux-color-surface);
  color: var(--ux-color-text);
  th{ font: 600 var(--ux-font-size-200)/1.4 system-ui; }
  td{ font: 400 var(--ux-font-size-200)/1.6 system-ui; }
  .status-active{ color: var(--ux-color-accent); }
}

Keyboard and screen reader stability

• Use role="grid" and aria-rowcount on the table.

• Maintain roving tabindex; restore focus when rows recycle.

• Announce lazy page loads via aria-live="polite" status region.

Typography and density controls

• Expose compact/comfortable density via CSS variables.

• Avoid layout shift; never resize rows mid-scroll.

• Respect prefers-reduced-motion for hover/row effects.

Sticky headers, loading skeletons

• Use sticky headers/columns that don’t reflow.

• Skeleton placeholders sized exactly to rowHeight.

• No spinners inside cells during scroll.

Runtime metrics

• Log 95th percentile frame time during scroll.

• Track DOM node counts and heap growth.

• Watch INP and long tasks via Firebase Performance.

Cypress check: cap DOM nodes

// e2e/virtualization.cy.ts
it('keeps DOM node count under 200', () => {
  cy.get('table[role="grid"]').scrollTo('bottom');
  cy.document().then(doc => {
    const nodes = doc.querySelectorAll('tr').length;
    expect(nodes).to.be.lessThan(200);
  });
});

Nx CI budget example

# tools/ci/perf.yml
name: perf-budgets
on: [push]
jobs:
  perf:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      - run: pnpm install
      - run: pnpm nx run web:e2e --configuration=ci
      - run: pnpm nx run web:lh -- --budgets=apps/web/budgets.json

a global entertainment company employee tracking

• 250k employees; server‑windowed pages with prefetch.

• CDK virtual scroll + mat-table; stable 60fps.

a leading telecom provider ads analytics

• PrimeNG p-table virtualScroll for millions of rows.

• WebSocket updates merged into the visible window with typed schemas.

a major airline kiosks

• Device logs virtualized on rugged hardware.

• Offline‑first cache; Docker hardware simulation kept dev fast.

Signs you need help now

• Users report freezing after minutes of scroll.

• Prod logs show heap OOMs or INP outliers.

• Focus jumps or screen readers lose position.

My typical engagement

• 48‑hour discovery; perf profile + DevTools flame charts.

• 1‑week plan: virtualization strategy, tokens, CI budgets.

• 2–4 week implementation with measurable deltas.

What to implement this sprint

• Pick CDK or PrimeNG; enforce fixed row height + trackBy.

• Add a Signals/SignalStore page cache with prefetch/evict.

• Wire Firebase Performance; add Cypress DOM budget test.

• Expose density/typography tokens; verify AA contrast.