Angular 20+ Data Virtualization Playbook: 200k‑Row Material/PrimeNG Tables with Smooth Scroll, Low Memory, and AA A11y

What went wrong

In a telecom ad analytics app, leadership wanted a 200k-row table with per-row sparklines. The first implementation used naive *ngFor with complex cells. Scrolling stuttered, memory climbed, and keyboard focus jumped between rerenders.

• Rendering thousands of DOM nodes at once

• Row heights changing mid-scroll

• Zone-triggered reflows on hover and resize

What we changed

We swapped in virtualization, moved filters/sorts/paging into a SignalStore, locked itemSize to 36px, and replaced heavy SVG with Canvas for tiny sparklines. Overnight, scroll was smooth and memory flatlined.

• CDK/PrimeNG virtualization

• Signals-based table state

• Stable row height + trackBy

UX and Core Web Vitals

Virtualization reduces DOM pressure so you hit responsiveness budgets even on low-end devices. Locking itemSize prevents layout shifts, while preload buffers keep scroll buttery during fast wheel events.

• First input delay from table filters

• CLS from dynamic row heights

• Smooth scroll under CPU throttle

Hiring signal for stakeholders

When you hire an Angular developer or Angular consultant, ask how they virtualize tables and prove it in CI. I gate merges with Lighthouse, a11y checks, and Angular budgets so performance doesn’t regress post-launch.

• Predictable state with Signals

• CI budgets that fail fast

• AA coverage baked in

Angular CDK + (Mat|Cdk)Table

CDK gives surgical control. For raw performance with bespoke visuals, I pair CdkTable with CdkVirtualScroll. If you already standardized on Angular Material, you can adapt a MatTable body to virtual rows with care.

• Maximum control and minimal footprint

• You manage sticky headers, resizing, a11y

• Best when design system is custom

PrimeNG p-table

PrimeNG’s virtualScroll handles row virtualization and emits onLazyLoad events for range fetches. It’s fast out of the box and fits enterprises that want feature-rich tables with less custom wiring.

• Batteries included virtualScroll + lazy

• Frozen columns, row grouping, column resize

• Great for teams standardizing on PrimeNG

Signals state either way

Regardless of library, I keep table state in a SignalStore so filters, sorts, and range updates don’t thrash the DOM. It also simplifies unit tests and telemetry hooks.

• Single source of truth for viewport

• Derived visibleRows signal

• Easier testing and replay

Component template

<cdk-virtual-scroll-viewport
  class="viewport"
  itemSize="36"
  [minBufferPx]="720"
  [maxBufferPx]="1440">
  <cdk-table [dataSource]="visibleRows()" class="mat-elevation-z1">
    <cdk-column-def name="name">
      <cdk-header-cell *cdkHeaderCellDef>Name</cdk-header-cell>
      <cdk-cell *cdkCellDef="let r">{{ r.name }}</cdk-cell>
    </cdk-column-def>

    <cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
    <cdk-row *cdkRowDef="let row; columns: displayedColumns; trackBy: trackById"></cdk-row>
  </cdk-table>
</cdk-virtual-scroll-viewport>

Signals + SignalStore state

import { computed, inject, signal } from '@angular/core';
import { patchState, signalStore, withComputed, withMethods, withState } from '@ngrx/signals';

interface Row { id: string; name: string; }
interface TableState {
  rows: Row[];
  total: number;
  viewport: { offset: number; limit: number; itemSize: number };
  filter: string;
  sort: { field: keyof Row; dir: 'asc'|'desc' };
}

export const TableStore = signalStore(
  withState<TableState>({ rows: [], total: 0, viewport: { offset: 0, limit: 50, itemSize: 36 }, filter: '', sort: { field: 'name', dir: 'asc' } }),
  withComputed((state) => ({
    visibleRows: computed(() => {
      const start = state.viewport().offset;
      const end = start + state.viewport().limit;
      // apply filter/sort upstream for large sets; simplified here
      return state.rows().slice(start, end);
    })
  })),
  withMethods((state) => ({
    setRows(rows: Row[], total: number) { patchState(state, { rows, total }); },
    setViewport(offset: number, limit: number) { patchState(state, { viewport: { ...state.viewport(), offset, limit } }); },
    setFilter(filter: string) { patchState(state, { filter }); }
  }))
);

export class TableComponent {
  readonly store = inject(TableStore);
  visibleRows = this.store.visibleRows;
  trackById = (_: number, r: Row) => r.id;
}

SCSS: density + tokens

:root {
  --ux-surface: #0b0f14;
  --ux-elev-1: #111827;
  --ux-accent: #22d3ee;
  --ux-text: #e5e7eb;
  --ux-muted: #9ca3af;
  --ux-row-height: 36px;
}
.table { background: var(--ux-elev-1); color: var(--ux-text); }
.table.dense { --ux-row-height: 28px; }
.viewport ::ng-deep .cdk-row { height: var(--ux-row-height); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

Template with lazy range loading

<p-table
  [value]="rows()"
  [virtualScroll]="true"
  [virtualScrollItemSize]="36"
  [scrollHeight]="'600px'"
  [rows]="store.viewport().limit"
  [totalRecords]="total()"
  [lazy]="true"
  (onLazyLoad)="onLazyLoad($event)"
  [trackBy]="trackById"
  [styleClass]="'table dense'">
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-row>
    <tr>
      <td>{{ row.name }}</td>
    </tr>
  </ng-template>
</p-table>

Lazy load handler

onLazyLoad(e: { first: number; rows: number }) {
  this.store.setViewport(e.first, e.rows);
  // Fetch server-side slice for huge datasets
  this.api.fetchRange(e.first, e.rows, this.store.filter()).subscribe(res => {
    this.store.setRows(res.items, res.total);
  });
}

A11y and focus

PrimeNG sets roles; make sure your selection model persists when the row leaves the viewport, and announce the total record count to screen readers.

• Use aria-rowcount and aria-rowindex

• Preserve selection across ranges

Stability first

Mismatch between itemSize and actual row height causes reflow. Measure your row once and lock it. Always trackBy the primary key to keep recycling predictable.

• Fixed row height (itemSize)

• Stable trackBy

• Avoid layout thrash

Lean cells

Expensive pipes and nested components magnify under scroll. Convert heavy templates to tiny, OnPush components or pure pipes. Defer tooltips until row focus/hover with a small debounce.

• Pure pipes only

• Tiny OnPush cell components

• Defer tooltips/menus

Signals over zones

Signals + SignalStore ensure only the visible slice updates. If you’re experimenting with zoneless change detection, tables are a great proving ground after you stabilize metrics behind a flag.

• Signals minimize change propagation

• Component-level computed() for visibleRows

• Fewer dirty checks

Measure, don’t guess

Profile under a 4x CPU throttle and capture memory snapshots. Validate time-to-first-row and scroll FPS before/after changes. Bake budgets into CI so regressions block merges.

• Angular DevTools flame charts

• Chrome Performance (FPS/memory)

• Lighthouse CI budgets

Announce scale and support keyboards

Virtualized tables must announce total rows and the active row index. Keep headers sticky but accessible; ensure keyboard users can move across columns and rows without getting trapped in cell controls.

• aria-rowcount, aria-rowindex

• Sticky header with tabindex

• Focus traps off in tables

Typography and density controls

Expose a density control that switches variables (28px, 32px, 36px row heights). For AngularUX, I default to 14px/36px for readability; compact mode uses 12px/28px with sufficient hit targets for AA.

• 12–14px readable type for dense views

• Density toggle (comfortable/compact)

• Row height tied to tokens

AngularUX palette in tables

AngularUX palette: dark surfaces (#0b0f14, #111827), bright accent (#22d3ee), legible text (#e5e7eb). Keep selection and hover within 3:1 contrast at minimum, with focus rings at 3px using the accent color.

• High-contrast rows/headers

• Focus rings visible on dark surfaces

• Colorblind-safe semantics

Telecom ad analytics

We streamed updates via WebSocket with typed event schemas and applied patches to the SignalStore. Cells rendered Canvas mini charts to avoid DOM bloat.

• 200k rows, live WebSocket deltas

• Canvas sparkline cells

• Typed event schemas

IoT device management

Role-based dashboards (admin vs operator) altered visible columns; lazy range fetch backed by SWR caching kept the table responsive even during network hiccups.

• Role-based columns

• Server-side slice fetch

• Offline-tolerant cache

Airport kiosk operations

Even on kiosks, staff tables used virtualization so barcode/print status columns didn’t lag. We simulated devices in Docker and replayed state when back online.

• Offline-first queues

• Peripheral state columns

• Docker hardware simulation

Angular budgets

{
  "budgets": [
    { "type": "bundle", "name": "main", "maximumWarning": "500kb", "maximumError": "700kb" },
    { "type": "anyComponentStyle", "maximumWarning": "10kb", "maximumError": "20kb" }
  ]
}

Lighthouse in CI (Nx + GitHub Actions)

name: lighthou se
on: [push]
jobs:
  lhci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx nx build web --configuration=production
      - run: npx http-server dist/apps/web -p 8080 &
      - run: npx @lhci/cli autorun --upload.target=temporary-public-storage

Telemetry hooks

Trace time-to-first-row and scroll FPS; log lazy range fetch times to Firebase Performance. If a dataset or filter causes spikes, alert before a stakeholder finds it.

• GA4 custom metrics

• Firebase Performance traces

• Error taxonomy for field reports

Key takeaways

• Virtualize rows, lock itemSize, and use trackBy.

• Run table logic through Signals + SignalStore.

• Budget test: FPS, memory, time-to-first-row.

• Ship AA: announce counts, stabilize focus.

• Enforce budgets in CI to prevent regressions.

When to hire an Angular developer for legacy rescue

If your tables jitter or your mat-table chokes under load, bring in a senior Angular consultant who’s done this in production. I can assess within a week and lay out a phased remediation plan.

• AngularJS/older Material tables

• Row jitter, focus loss, memory leaks

• Vibe-coded cell templates without tests