Virtualization
Scroll a hundred thousand rows without the page stuttering — then switch the trick off and watch it fall apart.
Hand-written windowing inside a custom element with Shadow DOM. Dual-mode pagination, live FPS instrumentation.
- Scroll the table to start fetching pages.
“Engineered high-performance virtualized data grids using Custom Web Components (Shadow DOM), RTK Query, and dual-mode pagination, enabling smooth interaction with 10,000+ assets without UI degradation.”Dell Technologies — Inventory Management & Infrastructure Platform
How it works
The table is a custom element with its own shadow root, so its styles and internals are sealed off from the page around it. React never sees the rows — it creates the element, hands it data and listens for events.
Rendering keeps a pool of about forty row elements. When you scroll, the pool is translated into place and each element's text is rewritten in place; nothing is created or destroyed. That is why rows in dom stays flat while the table itself is a hundred thousand rows long, and why paint time is measured in fractions of a millisecond.
Data arrives separately. The element emits a range-change event as the window moves; RTK Query turns that into page requests, dedupes them and caches the results, which is why scrolling back is free — watch the network log fill with hit.
Both pagination strategies are really implemented. Offset paging can jump anywhere in one request. Cursor paging is stable under concurrent writes but can only walk forward, which you can prove to yourself with the jump box.