🛠️
LNUI-704Add virtualization to Data Table for 10k+ rows
288 / 291

Add virtualization to Data Table for 10k+ rows

Rendering 10k+ rows makes the DataTable unusable: initial render takes 4.2s and scrolling drops to ~11fps on a mid-range laptop.

React Profiler flamegraph of a 10k-row render
Profiler capture — 92% of the time is spent mounting row cells

Plan

  1. Windowing with a fixed overscan of 12 rows (no external dep, ~120 LOC)
  2. Row measurement cache keyed by row id for variable heights
  3. Sticky header stays outside the scroll container
  4. Keyboard navigation jumps must scroll the virtual window
Scroll capture — prototype at 120fps0:42
Budget: first paint of the table under 300ms with 10k rows, scroll at 60fps minimum.— perf budget, Q3 notes

Sub-issues 1/1

LNUI-726Memoize Table row renderer to cut re-renders by 60%

Activity

alex.zhang created the issue· 11d ago
alex.zhang added issue to Cycle 21· 11d ago
leonel.ngoya set priority to High· 10d ago
lleonel.ngoya4d ago

Prototype numbers on the reference dataset: first paint 278ms, steady scroll at 60fps, 74MB heap (was 410MB). Ship it.

🔥 4🚀 2