Data Virtualization in Angular 20+ Tables: PrimeNG and Angular Material Patterns for 60fps Scroll and Low Memory

Why Angular Tables Stutter with Large Datasets

at a leading telecom provider I inherited a mat-table rendering 50k rows. Hover lag was 300–500ms and memory crept over 700MB. After switching to CDK Virtual Scroll with a strict 36px row height and moving sparklines to Canvas, scroll hit 60fps and memory stabilized under 200MB. Similar wins repeated on a broadcast media network’s scheduling grid and a an enterprise IoT hardware company device fleet list.

How an Angular Consultant Approaches Data Virtualization

As companies plan 2025 Angular roadmaps with Angular 21 beta landing soon, this is low-risk, high-ROI polish. If you need to hire an Angular developer to triage a dashboard in Q1, start with virtualization.

PrimeNG Virtual Scroll + Lazy Loading with Signals/SignalStore

// table.store.ts (Angular 20+, @ngrx/signals)
import { inject, Injectable, signal, computed } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { SignalStore, withState, withMethods } from '@ngrx/signals';

interface Row { id: string; name: string; status: string; amount: number; }
interface TableState { total: number; pageSize: number; pages: Map<number, Row[]> }

@Injectable({ providedIn: 'root' })
export class TableStore extends SignalStore(
  { providedIn: 'root' },
  withState<TableState>({ total: 0, pageSize: 100, pages: new Map() }),
  withMethods((store, http = inject(HttpClient)) => {
    const lru: number[] = [];
    const maxPages = 12; // cap memory ~ 12 * 100 rows

    function remember(page: number) {
      const idx = lru.indexOf(page);
      if (idx !== -1) lru.splice(idx, 1);
      lru.unshift(page);
      while (lru.length > maxPages) {
        const evict = lru.pop();
        if (evict !== undefined) store.state().pages.delete(evict);
      }
    }

    return {
      loadPage: async (page: number) => {
        if (store.state().pages.has(page)) { remember(page); return; }
        const size = store.state().pageSize;
        const data = await http
          .get<Row[]>(`/api/rows?offset=${page * size}&limit=${size}`)
          .toPromise();
        store.state().pages.set(page, data || []);
        remember(page);
      },
      setTotal: (n: number) => store.patch({ total: n })
    };
  })
) {
  readonly pageSize = computed(() => this.state().pageSize);
  readonly total = computed(() => this.state().total);
  readonly window = signal({ first: 0, rows: 100 });

  readonly visible = computed(() => {
    const { first, rows } = this.window();
    const startPage = Math.floor(first / this.pageSize());
    const endPage = Math.floor((first + rows) / this.pageSize());
    const all: Row[] = [];
    for (let p = startPage; p <= endPage; p++) {
      const page = this.state().pages.get(p) || [];
      all.push(...page);
    }
    const start = first % this.pageSize();
    return all.slice(start, start + rows);
  });
}

<!-- table.component.html -->
<p-table
  [value]="store.visible()"
  [virtualScroll]="true"
  [lazy]="true"
  [rows]="store.pageSize()"
  [virtualScrollItemSize]="36"
  scrollHeight="600px"
  [trackBy]="trackById"
  (onLazyLoad)="onLazy($event)"
  [styleClass]="'ax-table ax-density-' + density()"
  [ariaRowCount]="store.total()">
  <ng-template pTemplate="header">
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Status</th>
      <th scope="col" class="text-right">Amount</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-row let-ri="rowIndex">
    <tr role="row" [attr.aria-rowindex]="ri + 1">
      <td>{{ row.name }}</td>
      <td>
        <p-tag [value]="row.status" severity="success"></p-tag>
      </td>
      <td class="text-right">{{ row.amount | number:'1.0-0' }}</td>
    </tr>
  </ng-template>
</p-table>

// table.component.ts
import { Component, signal } from '@angular/core';
import { TableStore } from './table.store';

@Component({ selector: 'ax-table', templateUrl: './table.component.html' })
export class TableComponent {
  density = signal<'compact' | 'cozy' | 'comfortable'>('compact');
  constructor(public store: TableStore) {}

  async onLazy(e: { first: number; rows: number }) {
    this.store.window.set({ first: e.first, rows: e.rows });
    const startPage = Math.floor(e.first / this.store.pageSize());
    const endPage = Math.floor((e.first + e.rows) / this.store.pageSize());
    for (let p = startPage; p <= endPage; p++) await this.store.loadPage(p);
  }
  trackById = (_: number, r: { id: string }) => r.id;
}

Material: CDK Virtual Scroll Styled Like mat-table

<!-- cdk-virtual-scroll with Material styles -->
<cdk-virtual-scroll-viewport class="ax-viewport mat-elevation-z1"
  [itemSize]="rowHeight" [minBufferPx]="360" [maxBufferPx]="720">
  <table class="mat-mdc-table ax-table ax-density-compact" role="table" aria-rowcount="{{ total }}">
    <thead class="mat-mdc-header-row" role="row">
      <th role="columnheader">Name</th>
      <th role="columnheader">Status</th>
      <th role="columnheader" class="text-right">Amount</th>
    </thead>
    <tbody>
      <tr class="mat-mdc-row" role="row"
          *cdkVirtualFor="let row of rows(); trackBy: trackById; let i = index"
          [attr.aria-rowindex]="i + 1">
        <td role="cell">{{ row.name }}</td>
        <td role="cell"><span class="ax-chip ax-chip--{{ row.status }}">{{ row.status }}</span></td>
        <td role="cell" class="text-right">{{ row.amount | number:'1.0-0' }}</td>
      </tr>
    </tbody>
  </table>
</cdk-virtual-scroll-viewport>

// density + color tokens (AngularUX palette)
:root {
  --ax-row-height: 36px;
  --ax-font-100: 14px;
  --ax-surface: #0f172a;
  --ax-surface-2: #111827;
  --ax-text: #e5e7eb;
  --ax-accent: #22d3ee; // AngularUX cyan accent
}
.ax-density-compact  { --ax-row-height: 32px; --ax-font-100: 13px; }
.ax-density-cozy     { --ax-row-height: 40px; --ax-font-100: 14px; }
.ax-density-comfortable { --ax-row-height: 48px; --ax-font-100: 16px; }

.ax-table {
  font-size: var(--ax-font-100);
  color: var(--ax-text);
  background: var(--ax-surface);
  th, td { height: var(--ax-row-height); }
  .ax-chip { padding: 2px 8px; border-radius: 999px; background: var(--ax-surface-2); }
  .ax-chip--success { background: #064e3b; color: #a7f3d0; }
}

@media (prefers-reduced-motion: reduce) {
  .ax-table * { transition: none !important; animation: none !important; }
}

Memory Optimization Tactics that Survive Production

// Pure row as a standalone component (fast re-use)
@Component({
  selector: 'ax-row',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <td>{{ row.name }}</td>
    <td><ax-status [value]="row.status"/></td>
    <td class="text-right">{{ row.amount | number:'1.0-0' }}</td>
  `
})
export class AxRowComponent { @Input({ required: true }) row!: Readonly<Row>; }

// trackBy to avoid DOM churn
trackById = (_: number, r: Row) => r.id;

UX Polish Without Breaking Performance Budgets

Virtualization shouldn’t make the UI feel cheap. On SageStepper and my dashboard demos, density is a first-class control in the header. When density changes, I update itemSize for the viewport to keep FPS consistent and prevent layout thrash.

Instrumentation: Prove the Win to Execs

When we scaled IntegrityLens to 12,000+ interview artifacts, we added Firebase Performance marks around scroll start/stop and sent a summarized metric to GA4. That made it trivial to tell a VP: “60fps in 97% of sessions; median memory 180MB; 0 crashes.”

Real‑World Examples: D3, Highcharts, and Canvas

Data virtualization isn’t only for tables. The same principles apply to charts embedded inside rows: precompute, batch, and limit DOM nodes.

When to Hire an Angular Developer for Legacy Rescue

I’ve rescued legacy Angular at a global entertainment company, a broadcast media network, and Charter. If your table stutters or your memory grows without bound, bring me in to stabilize and instrument it—without breaking production.

Step‑by‑Step Virtualization Playbook (Summary)

You can roll this in a single sprint for one table. For multi-tenant dashboards, I templatize the store and viewport so every grid shares the same rigor.