Session: virtualized-table-for-100k-rows — 2026-09-24

Project: pixel-dash · Branch: perf/table · Mode: default · Model: gemini-2.5-pro

Summary

The events table froze with 100k rows. Replaced it with a virtualized table (TanStack Virtual), moved sorting into a Web Worker and memoized row renderers; scroll stays at 60 fps and initial render dropped from 4.1 s to 120 ms.

Conversation

Turn 1 — User

The events table is unusable with 100k rows.

Turn 1 — Assistant

Profile shows 100k DOM rows and sorting on the main thread. Virtualize rows, sort in a worker, memoize cells.

Tools used in this turn:

• Bash: pnpm add @tanstack/react-virtual
• Write: src/workers/sort.worker.ts
• Edit: src/tables/EventsTable.tsx
• Bash: pnpm bench — render 4100 ms → 120 ms

Connections

• [[pixel-dash]]
• [[TanStackVirtual]]
• [[WebWorkers]]
• [[Performance]]