Data Virtualization in Angular 20+: Smooth 200k‑Row Tables with Angular Material and PrimeNG (Scroll, Memory, and A11y)

Your 200k row table needs data virtualization, not more spinners

As companies plan 2025 Angular roadmaps, tables remain the heaviest UI most teams ship. Data virtualization keeps Core Web Vitals and accessibility intact without gutting features.

Why Angular tables jitter: rendering, GC, and layout thrash

Jank is cumulative: over-rendering, dynamic heights, and unbounded subscriptions. Virtualization attacks all three.

Implementing windowed data with Signals + SignalStore for Material and PrimeNG

Here’s a minimal store and templates that I’ve adapted across telecom analytics, media schedulers, and IoT fleet consoles.

PrimeNG and Angular Material virtual scroll: code you can paste

// virtual-data.store.ts (Angular 20+, SignalStore)
import { signal, computed, effect } from '@angular/core';
import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';

interface Row { id: string; [k: string]: any }
interface State {
  total: number;
  pageSize: number;   // server page size
  itemSize: number;   // px height per row
  viewportStart: number; // index
  viewportEnd: number;   // index
  cache: Map<number, Row[]>; // pageIndex -> rows
}

export const VirtualDataStore = signalStore(
  withState<State>({ total: 0, pageSize: 100, itemSize: 36, viewportStart: 0, viewportEnd: 0, cache: new Map() }),
  withMethods((store, api = fetchPage) => ({
    setViewport(start: number, end: number) {
      patchState(store, { viewportStart: start, viewportEnd: end });
      const neededPages = this.pagesForRange(start, end, store.pageSize());
      neededPages.forEach(p => this.ensurePage(p));
      // evict far pages to cap memory
      const keep = new Set(neededPages);
      for (const key of store.cache().keys()) {
        if (!keep.has(key)) store.cache().delete(key);
      }
    },
    pagesForRange(start: number, end: number, size: number) {
      const s = Math.floor(start / size);
      const e = Math.floor(Math.max(end - 1, 0) / size);
      // prefetch one page ahead/behind
      return [s - 1, s, e, e + 1].filter(i => i >= 0);
    },
    async ensurePage(pageIndex: number) {
      if (store.cache().has(pageIndex)) return;
      const { rows, total } = await api(pageIndex, store.pageSize());
      const cache = new Map(store.cache());
      cache.set(pageIndex, rows);
      patchState(store, { cache, total });
    },
    visibleRows: computed(() => {
      const start = store.viewportStart();
      const end = store.viewportEnd();
      const size = store.pageSize();
      const rows: Row[] = [];
      for (let i = start; i < end; i++) {
        const p = Math.floor(i / size);
        const bucket = store.cache().get(p);
        const inBucket = bucket?.[i % size];
        rows.push(inBucket ?? { id: `ghost-${i}` });
      }
      return rows;
    })
  }))
);

// Replace with your typed API. Cursor-based works too.
async function fetchPage(pageIndex: number, pageSize: number) {
  const res = await fetch(`/api/events?page=${pageIndex}&size=${pageSize}`);
  return res.json() as Promise<{ rows: Row[]; total: number }>; 
}

<!-- CDK + MatTable -->
<cdk-virtual-scroll-viewport 
  itemSize="36" class="table-viewport" (scrolledIndexChange)="store.setViewport($event, $event + buffer)"
  [style.height.px]="600">
  <table mat-table [dataSource]="store.visibleRows()" class="mat-elevation-z0">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>ID</th>
      <td mat-cell *matCellDef="let r" [attr.aria-rowindex]="r?.rowIndex">{{ r.id }}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="['id']"></tr>
    <tr mat-row *matRowDef="let row; columns: ['id']; trackBy: trackById"></tr>
  </table>
</cdk-virtual-scroll-viewport>

<!-- PrimeNG DataTable Virtual Scroll + Lazy -->
<p-table [value]="rows" [virtualScroll]="true" [virtualScrollItemSize]="densityRowHeight" [rows]="100"
        [scrollHeight]="'600px'" [lazy]="true" (onLazyLoad)="onLazy($event)" [totalRecords]="total">
  <ng-template pTemplate="header">
    <tr><th>ID</th></tr>
  </ng-template>
  <ng-template pTemplate="body" let-row let-ri="rowIndex">
    <tr [attr.aria-rowindex]="ri + 1" [attr.data-id]="row?.id">
      <td>{{ row?.id }}</td>
    </tr>
  </ng-template>
</p-table>

// component.ts (PrimeNG Lazy)
onLazy(e: { first: number; rows: number }) {
  const pageIndex = Math.floor(e.first / e.rows);
  this.store.setViewport(e.first, e.first + e.rows);
  this.total = this.store.total();
  this.rows = this.store.visibleRows();
}

/* Density tokens + AngularUX palette */
:root {
  --ux-density: compact; // compact|cozy|comfortable
  --ux-row-compact: 32px; --ux-row-cozy: 36px; --ux-row-comfortable: 44px;
  --ux-row-height: var(--ux-row-cozy);
  --ux-bg: #0b1220; --ux-surface: #121a2a; --ux-text: #e6ecff;
  --ux-accent: #6ea8fe; --ux-accent-contrast: #0a0f1a;
}
:root[data-density="compact"] { --ux-row-height: var(--ux-row-compact); }
:root[data-density="comfortable"] { --ux-row-height: var(--ux-row-comfortable); }
.table-viewport { background: var(--ux-surface); color: var(--ux-text); }
tr:focus-within { outline: 2px solid var(--ux-accent); outline-offset: -2px; }

Performance budgets and CI guardrails for virtualized tables

# .github/workflows/lhci.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  lhci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npm run build -- --configuration=production
      - run: npx @lhci/cli autorun --collect.staticDistDir=dist/app --upload.target=filesystem --assert.assertions.performance>=0.9

// angular.json (bundle budgets excerpt)
{
  "budgets": [
    { "type": "bundle", "name": "main", "maximumWarning": "500kb", "maximumError": "700kb" },
    { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" }
  ]
}

Use Angular DevTools to confirm CDK/PrimeNG rows reuse components (no unexpected re-renders).

Real dashboard results: telecom and media

These aren’t lab numbers—they’re from shipping enterprise dashboards with Nx monorepos, Firebase/Node services, and strict CI.

Color, typography, and density: AngularUX palette that stays fast

A11y isn’t optional: role=grid patterns, aria-rowcount, and keyboard affordances must survive virtualization.

When to hire an Angular developer for data virtualization rescue

If you’re looking to hire an Angular developer with Fortune 100 experience, I can step in quickly and leave your team with maintainable patterns.

Integrating with D3/Highcharts/Canvas without jank

In insurance telematics dashboards, data virtualization on tables plus Canvas lanes for dense spark-lines kept scrolling fluid while showing per-vehicle metrics.

Key takeaways and next steps

• Virtualize data, fix row heights, and window with Signals + SignalStore.
• Choose CDK for control or PrimeNG for speed to value; both can hit 60fps.
• Bake in a11y, density, and color tokens so polish doesn’t cost frames.
• Lock the wins with CI budgets and DevTools traces.
• Have a messy table today? Let’s review it and outline a 2-week plan.

FAQ: Data virtualization and hiring

If you need an Angular expert for hire to stabilize large datasets, I can help—from SignalStore windowing to CI guardrails.