Data Virtualization That Feels Native: 60fps Angular 20+ Tables with Material, PrimeNG, and Signals

The Jitter Problem—and Why Virtualization Wins

UX Foundations: Typography, Density, and the AngularUX Color Palette

Example token setup (compatible with Material and PrimeNG skins):

:root {
  /* AngularUX palette */
  --ux-bg: #0f1115;
  --ux-surface: #161a22;
  --ux-text: #e6e9ef;
  --ux-muted: #b3b9c5;
  --ux-primary: #5bc0ff; /* 4.5:1 on surface */
  --ux-accent: #8ef6a0;

  /* Density + typography */
  --row-h: 40px;        /* comfortable */
  --cell-px: 12px;
  --font-size: 14px;
}

[data-density="compact"] {
  --row-h: 32px;
  --cell-px: 8px;
  --font-size: 13px;
}

.mat-mdc-row, .p-datatable-tbody > tr {
  height: var(--row-h);
}
.mat-mdc-cell, .p-datatable-tbody > tr > td {
  padding-inline: var(--cell-px);
  font-size: var(--font-size);
}

/* Focus rings with contrast + performance */
:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--ux-primary), white 20%);
  outline-offset: 2px;
}

Implementation: Virtual Scroll with CDK and PrimeNG

SignalStore and component excerpt:

import { Injectable, computed, effect, signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';
import { finalize, map, takeUntil } from 'rxjs/operators';
import { Subject, of } from 'rxjs';

interface Row { id: string; ts: number; metricA: number; }
interface Page { rows: Row[]; next?: string; prev?: string; }

@Injectable({ providedIn: 'root' })
export class VirtualTableStore {
  private pageSize = 200;
  private destroy$ = new Subject<void>();

  // Cursor + cache state
  private cursor = signal<string | null>(null);
  private cache = signal<Row[]>([]);   // recycled row objects preferred IRL
  private loading = signal(false);

  // Expose a visible window
  public windowStart = signal(0);
  public windowSize = signal(400);
  public visible = computed(() => {
    const start = this.windowStart();
    const size = this.windowSize();
    const arr = this.cache();
    return arr.slice(start, start + size);
  });

  constructor(private http: HttpClient) {}

  fetchPage(cursor?: string) {
    this.loading.set(true);
    const abort$ = new Subject<void>();
    // replace with your API / Firestore query
    return this.http.get<Page>('/api/rows', { params: { cursor: cursor ?? '' } })
      .pipe(
        finalize(() => this.loading.set(false)),
        takeUntil(abort$)
      );
  }

  init(firstCursor?: string) {
    this.cursor.set(firstCursor ?? null);
    this.fetchPage(firstCursor).subscribe(page => {
      this.cache.set(page.rows);
      this.cursor.set(page.next ?? null);
      this.prefetch();
    });
  }

  onScrolledIndexChange(index: number) {
    // Move the window and prefetch when we’re near the end
    this.windowStart.set(index);
    const threshold = this.cache().length - this.pageSize;
    if (index > threshold) this.prefetch();
  }

  private prefetch() {
    const next = this.cursor();
    if (!next || this.loading()) return;
    this.fetchPage(next).subscribe(page => {
      // Recycle existing Row objects in practice to avoid GC pressure
      this.cache.set([...this.cache(), ...page.rows]);
      this.cursor.set(page.next ?? null);
    });
  }
}

Material + CDK template and component usage:

<cdk-virtual-scroll-viewport itemSize="40" class="viewport" (scrolledIndexChange)="store.onScrolledIndexChange($event)">
  <table mat-table [dataSource]="store.visible()" [trackBy]="trackById" class="mat-elevation-z1">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let r"> {{ r.id }} </td>
    </ng-container>
    <!-- more columns -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</cdk-virtual-scroll-viewport>

@Component({
  selector: 'app-virtual-table',
  templateUrl: './virtual-table.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class VirtualTableComponent {
  displayedColumns = ['id'];
  constructor(public store: VirtualTableStore) { this.store.init(); }
  trackById = (_: number, r: Row) => r.id;
}

PrimeNG virtual table configuration:

<p-table
  [value]="rows"
  [virtualScroll]="true"
  [rows]="100"
  [lazy]="true"
  (onLazyLoad)="onLazyLoad($event)"
  [rowHeight]="40"
  [style]="{ height: '600px' }">
  <!-- columns -->
</p-table>

onLazyLoad(e: { first: number; rows: number }) {
  // map first/rows to your SignalStore window + prefetch
  this.store.windowStart.set(e.first);
  if (e.first + e.rows > this.store.visible().length - 100) {
    this.store['prefetch']();
  }
}

Memory Optimization and Object Reuse

Server Cursors, Real‑Time Updates, and Firehose Control

Typed effect sketch for streaming updates to the windowed cache:

const enqueue = signal<Row[]>([]);

// Push incoming websocket rows
function onSocket(rows: Row[]) { enqueue.set([...enqueue(), ...rows]); }

effect(() => {
  const batch = enqueue();
  if (!batch.length) return;
  requestAnimationFrame(() => {
    // cheap merge into the end of cache
    store.cache.set([...store.cache(), ...batch]);
    enqueue.set([]);
  });
});

Instrumentation, Performance Budgets, and CI Guardrails

GitHub Actions excerpt running Cypress + Lighthouse:

name: table-perf
on: [pull_request]
jobs:
  perf:
    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 lighthouse http://localhost:4200 --budgets-path=budgets.json --quiet --chrome-flags="--headless=new"
      - run: npx cypress run --config-file cypress.config.ts --spec cypress/e2e/virtual-scroll.cy.ts

Integrating Virtualized Tables with D3/Highcharts/Canvas

How an Angular Consultant Approaches Table Virtualization

When to Hire an Angular Developer for Legacy Rescue