Data Virtualization in Angular 20+: Smooth 100k‑Row Tables with Angular Material/PrimeNG, Signals, and Memory‑Safe Scrolling

When 100k‑Row Tables Jitter: How I Stopped the Scroll Stutter

If you’re looking to hire an Angular developer or Angular consultant for a data-heavy dashboard, virtualization is a non‑negotiable capability. The good news: Angular Material/CDK and PrimeNG both have first‑class support.

Why Angular Tables Choke on Large Datasets (and What to Measure)

I instrument dashboards the same way I instrument real‑time telemetry: typed events, repeatable test runs, and budget checks in CI. If your table feels slow, profile before you refactor.

Data Virtualization Strategies for Angular Material and PrimeNG

Below are concrete snippets for CDK and PrimeNG, plus a Signals-backed store for the window.

CDK Virtual Scroll: Markup + Signals Store

import { ChangeDetectionStrategy, Component, computed, effect, inject, signal } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';
import { map, switchMap } from 'rxjs/operators';

interface Row { id: string; name: string; value: number; }

class WindowService {
  private http = inject(HttpClient);
  fetchWindow(start: number, size: number) {
    // Server returns a window (not the whole dataset)
    return this.http.get<Row[]>(`/api/rows?start=${start}&size=${size}`);
  }
}

@Component({
  selector: 'aux-cdk-table',
  templateUrl: './table.html',
  styleUrls: ['./table.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkTableComponent {
  private win = inject(WindowService);

  readonly itemSize = 40; // sync with density token
  readonly buffer = 10;

  // Signals
  total = signal(100_000);
  start = signal(0); // viewport start index
  size = signal(100); // window size

  rows = signal<Row[]>([]);

  // Effect: fetch whenever start/size change
  readonly loadEffect = effect(() => {
    const s = this.start();
    const n = this.size();
    this.win.fetchWindow(s, n)
      .pipe(takeUntilDestroyed())
      .subscribe(data => this.rows.set(data));
  });

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

  onScrolledIndexChange(i: number) {
    // prefetch when near the end
    if (i + this.buffer > this.start() + this.size()) {
      this.start.set(Math.min(i, this.total() - this.size()));
    }
  }
}

<!-- table.html -->
<cdk-virtual-scroll-viewport
  class="table-viewport"
  [itemSize]="itemSize"
  (scrolledIndexChange)="onScrolledIndexChange($event)"
  role="table"
  [attr.aria-rowcount]="total()">
  <div class="header" role="rowgroup">
    <div class="row header-row" role="row">
      <div class="cell" role="columnheader">Name</div>
      <div class="cell" role="columnheader">Value</div>
    </div>
  </div>

  <div
    *cdkVirtualFor="let r of rows(); trackBy: trackById"
    class="row"
    role="row"
    [attr.aria-rowindex]="r?.index">
    <div class="cell" role="cell">{{ r.name }}</div>
    <div class="cell" role="cell">{{ r.value | number:'1.0-0' }}</div>
  </div>
</cdk-virtual-scroll-viewport>

// table.scss
.table-viewport { height: 70vh; width: 100%; }
.row { display: grid; grid-template-columns: 1fr 120px; align-items: center; height: var(--row-height); }
.header { position: sticky; top: 0; z-index: 2; background: var(--aux-surface-1); color: var(--aux-ink-1); }
.cell { padding: 0 var(--space-12); }
:root {
  /* AngularUX palette & tokens */
  --aux-ink-1: #e6e8ee;
  --aux-ink-2: #b9becb;
  --aux-surface-1: #11131a;
  --aux-accent: #5de4c7;
  --font-size-14: 0.875rem;
  --space-12: 12px;
  /* Density */
  --row-height: 40px;
}
.density--comfortable { --row-height: 48px; }
.density--compact { --row-height: 32px; --font-size-14: 0.8125rem; }
.row, .cell { font-size: var(--font-size-14); }

PrimeNG VirtualScroll and TurboTable Setup

<p-table
  [value]="rows()"
  [virtualScroll]="true"
  [virtualScrollItemSize]="rowHeight"
  [rows]="100"
  [scrollable]="true"
  styleClass="density--compact"
  [lazy]="true"
  (onLazyLoad)="onLazyLoad($event)"
  [rowTrackBy]="trackById"
  ariaLabel="Orders table"
>
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
      <th class="num">Value</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-r>
    <tr>
      <td>{{ r.name }}</td>
      <td class="num">{{ r.value | number:'1.0-0' }}</td>
    </tr>
  </ng-template>
</p-table>

// Component excerpt
rowHeight = 40;
rows = signal<Row[]>([]);

onLazyLoad(ev: { first: number; rows: number }) {
  const start = ev.first;
  const size = ev.rows;
  this.data.fetchWindow(start, size)
    .pipe(takeUntilDestroyed())
    .subscribe(win => this.rows.set(win));
}

trackById(index: number, r: Row) { return r.id; }

Memory Optimization and Leak Prevention in Angular 20+

import { fromEvent, animationFrameScheduler } from 'rxjs';
import { auditTime, map } from 'rxjs/operators';

const viewport = document.querySelector('.table-viewport')!;
const scrolled$ = fromEvent(viewport, 'scroll').pipe(
  auditTime(0, animationFrameScheduler),
  map(() => (viewport as any).getOffsetToRenderedContentStart?.() ?? 0)
);

In real dashboards (an insurance technology company telematics), we also pool DOM for sparkline canvases and reuse ImageBitmaps to avoid churn when rows recycle.

Scroll Performance with UX Polish: Accessibility, Typography, Density, and Color

:root {
  --aux-surface-0: #0b0d17; // app background
  --aux-surface-1: #11131a; // cards and table headers
  --aux-ink-1: #e6e8ee;     // primary text
  --aux-ink-dim: #9aa3b2;   // secondary text
  --aux-accent: #5de4c7;    // accent / selection
  --row-height: 40px;
  --line-height: 1.3;
}
.table-viewport .row:nth-child(even) { background: color-mix(in srgb, var(--aux-surface-1), #ffffff 2%); }
.cell { font-variant-numeric: tabular-nums; line-height: var(--line-height); }
.density--cozy { --row-height: 44px; }
.density--compact { --row-height: 32px; --line-height: 1.25; }

Measured with Lighthouse, these tokens cut reflow while keeping AA contrast. We’ve used this scheme across AngularUX products and role‑based dashboards.

End-to-End Example: Virtual Table Synced with Highcharts

// When the viewport window changes, update the linked chart with decimated points
const windowStart = signal(0);
const windowSize = signal(200);
const points = signal<number[]>([]); // full series from server (not bound to DOM!)

const windowedPoints = computed(() => {
  const s = windowStart();
  const e = s + windowSize();
  const slice = points().slice(s, e);
  // LTTB or simple decimation to <= 400 points for 60fps
  return decimate(slice, 400);
});

effect(() => {
  highchartsSeries.setData(windowedPoints(), false);
  highchartsChart.redraw();
});

This pattern also works with D3 or Canvas. For 200k+ points, consider Highcharts Boost or a Canvas/Three.js layer. Data virtualization isn’t just for rows—charts need it too.

When to Hire an Angular Developer for Legacy Rescue

See how we stabilize chaotic code and modernize safely at gitPlumbers—my code rescue platform with 99.98% uptime and a 70% velocity lift for teams mid‑upgrade.

Closing Takeaways and Next Steps

• Virtualize both DOM and data; never bind the full array.
• Signals or SignalStore make the slice deterministic and testable.
• PrimeNG and CDK both reach 60fps; pick based on features and your design system.
• Keep AA accessibility, typography, density, and color tokens first‑class.
• Measure FPS, INP, and heap in CI; regressions should fail builds.

If you’re planning a 2025 dashboard or need a quick rescue, let’s review your build, pick the right virtualization path, and ship a smooth, accessible table that scales to 100k+ rows.

FAQs: Data Virtualization, Hiring, and Timelines