Data Virtualization in Angular 20+: Material and PrimeNG Tables That Scroll at 60fps Without Melting Memory

The 60fps Table Scene from the Front Lines

Why Angular Tables Stutter and Leak Memory

Implementation: CDK Virtual Scroll + Signals/SignalStore

// virtual-table.store.ts
import { Signal, computed, signal } from '@angular/core';
import { SignalStore } from '@ngrx/signals';

interface Row { id: string; [k: string]: any }
interface Page { index: number; rows: Row[] }

const PAGE_SIZE = 200;
const MAX_PAGES = 30; // ~6k rows in-memory window

export class VirtualTableStore extends SignalStore<{ total: number; pages: Map<number, Page>; index: number; }> {
  readonly total = signal(0);
  readonly index = signal(0); // first visible row index
  readonly pages = signal(new Map<number, Page>());

  constructor(private api: { fetchPage: (pageIndex: number, size: number) => Promise<{ total: number; rows: Row[] }> }) {
    super();
  }

  readonly pageFor = (i: number) => Math.floor(i / PAGE_SIZE);

  readonly visibleRows: Signal<Row[]> = computed(() => {
    const start = this.index();
    const end = start + this.viewportSize(); // set by component
    const startPage = this.pageFor(start);
    const endPage = this.pageFor(end);

    const out: Row[] = [];
    for (let p = startPage; p <= endPage; p++) {
      const page = this.pages().get(p);
      if (page) out.push(...page.rows);
    }
    return out.slice(start % PAGE_SIZE, (start % PAGE_SIZE) + (end - start));
  });

  // dynamic, driven by density controls
  viewportSize = signal(600);

  async ensurePagesAround(index: number) {
    const p = this.pageFor(index);
    await Promise.all([this.fetchPage(p - 1), this.fetchPage(p), this.fetchPage(p + 1)]);
    this.evictIfNeeded();
  }

  private async fetchPage(p: number) {
    if (p < 0 || this.pages().has(p)) return;
    const { total, rows } = await this.api.fetchPage(p, PAGE_SIZE);
    this.total.set(total);
    const pages = new Map(this.pages());
    pages.set(p, { index: p, rows });
    this.pages.set(pages);
  }

  private evictIfNeeded() {
    const pages = this.pages();
    if (pages.size <= MAX_PAGES) return;
    // naive LRU: drop farthest from current
    const current = this.pageFor(this.index());
    const sorted = [...pages.values()].sort((a, b) => Math.abs(a.index - current) - Math.abs(b.index - current));
    const keep = new Set(sorted.slice(0, MAX_PAGES).map(p => p.index));
    const next = new Map<number, Page>();
    for (const [k, v] of pages) if (keep.has(k)) next.set(k, v);
    this.pages.set(next);
  }
}

<!-- virtual-table.component.html -->
<cdk-virtual-scroll-viewport
  [itemSize]="rowHeight"
  [minBufferPx]="rowHeight * 10"
  [maxBufferPx]="rowHeight * 20"
  role="table"
  aria-rowcount="{{ total() }}"
  (scrolledIndexChange)="onIndex($event)"
>
  <div
    class="row"
    role="row"
    *cdkVirtualFor="let r of rows(); trackBy: trackById"
    [attr.aria-rowindex]="r.__rowIndex"
  >
    <div role="cell">{{ r.name }}</div>
    <div role="cell">{{ r.status }}</div>
    <div role="cell">{{ r.updatedAt | date:'short' }}</div>
  </div>
</cdk-virtual-scroll-viewport>

// virtual-table.component.ts
@Component({
  selector: 'ux-virtual-table',
  templateUrl: './virtual-table.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class VirtualTableComponent {
  rowHeight = 40; // bound to density controls
  total = this.store.total;
  rows = this.store.visibleRows;

  constructor(private store: VirtualTableStore) {}

  onIndex(i: number) {
    // debounce tiny scroll micro-bursts
    this.store.index.set(i);
    this.store.ensurePagesAround(i);
  }

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

PrimeNG Virtual Table + Lazy Loading

<p-table
  [value]="rows()"
  [scrollable]="true"
  [virtualScroll]="true"
  [lazy]="true"
  [rows]="50"
  [virtualScrollItemSize]="rowHeight"
  scrollHeight="600px"
  (onLazyLoad)="onLazy($event)"
  [totalRecords]="total()"
>
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Updated</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-r let-rowIndex="rowIndex">
    <tr [attr.aria-rowindex]="rowIndex + 1">
      <td>{{ r.name }}</td>
      <td>{{ r.status }}</td>
      <td>{{ r.updatedAt | date:'short' }}</td>
    </tr>
  </ng-template>
</p-table>

onLazy(e: { first: number; rows: number }) {
  const pageIndex = Math.floor(e.first / e.rows);
  this.store.index.set(e.first);
  this.store.ensurePagesAround(e.first);
}

UX Polish Without Performance Regression

:root {
  --font-size-base: 14px;
  --row-h-compact: 32px;
  --row-h-cozy: 40px;
  --row-h-spacious: 52px;
  --color-text: #0B1220;
  --color-accent: #1E88E5;
}

[data-density='compact'] .row { height: var(--row-h-compact); }
[data-density='cozy'] .row { height: var(--row-h-cozy); }
[data-density='spacious'] .row { height: var(--row-h-spacious); }

.row:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }

Measure What Matters: Telemetry and Budgets

// telemetry.ts
performance.mark('vs-fill-start');
// after rows() computes and DOM paints next frame
requestAnimationFrame(() => {
  performance.mark('vs-fill-end');
  performance.measure('vs-fill', 'vs-fill-start', 'vs-fill-end');
});

# .lighthouserc.yml
ci:
  collect:
    numberOfRuns: 3
    url:
      - http://localhost:4200/table
  assert:
    assertions:
      categories:performance: [error, {minScore: 0.9}]
      unused-javascript: [warn, {maxLength: 120000}]

Charts Need Virtualization Too

When to Hire an Angular Developer for Virtualization and Table Performance

Takeaways and Next Steps

• Render a window, not the world. Cache pages and evict aggressively.
• Bind virtualization to density/typography tokens so UX stays consistent.
• TrackBy IDs, OnPush, and computed signals keep change detection tiny.
• Instrument scroll, fetch, and paint with Firebase Performance and DevTools.
• Protect wins with Lighthouse and bundle budgets in CI.

If you want me to review your tables, charts, and scroll performance—or plan your Angular 20+ roadmap—reach out. I’m an Angular consultant with Fortune 100 experience, available for select remote engagements.