Virtual Scrolling in Tables

Technical Deep Dive & Specifications

2.1 The DOM Node Limit Problem

In modern browser engines:

• Each HTML <tr> and <td> element consumes memory for layout boxes, style computations, and Accessibility Tree nodes.
• A table with 100,000 rows and 6 columns creates 700,000+ DOM elements.
• Attempting to mount 700,000 elements causes the browser to consume multiple gigabytes of RAM, trigger severe garbage collection pauses, and eventually crash with an Out of Memory error.

2.2 The Mathematical Engine of Virtualization

A virtual grid relies on fixed row height mathematics:

                      ┌─────────────────────────────────────────┐
                      │ totalHeight = totalRows × rowHeight     │
                      └─────────────────────────────────────────┘
                                           │
         ┌─────────────────────────────────┴─────────────────────────────────┐
         ▼                                                                   ▼
┌───────────────────────────────────────────────┐ ┌─────────────────────────────────────────────┐
│ rawStart = ⌊ scrollTop / rowHeight ⌋          │ │ rawEnd = ⌈ (scrollTop + viewH) / rowHeight ⌉│
│ startIndex = max(0, rawStart - buffer)        │ │ endIndex = min(totalRows, rawEnd + buffer)  │
└───────────────────────────────────────────────┘ └─────────────────────────────────────────────┘
                                           │
                                           ▼
                      ┌─────────────────────────────────────────┐
                      │ offsetY = startIndex × rowHeight        │
                      └─────────────────────────────────────────┘

Step-by-Step Calculation Walkthrough:

Given:

• Total rows $N = 100,000$
• Row height $H = 40\text{ px}$
• Viewport container height $V = 400\text{ px}$
• Buffer rows $B = 5$

1. Phantom Scroll Height: $\text{Total Height} = 100,000 \times 40 = 4,000,000\text{ px}$.
2. When user scrolls to scrollTop = 80,000px:
   • $\text{rawStart} = \lfloor 80,000 / 40 \rfloor = 2,000$
   • $\text{startIndex} = \max(0, 2,000 - 5) = 1,995$
   • $\text{rawEnd} = \lceil (80,000 + 400) / 40 \rceil = 2,010$
   • $\text{endIndex} = \min(100,000, 2,010 + 5) = 2,015$
   • Slice rendered: Items $1,995$ to $2,015$ (Total 20 rows in DOM).
   • offsetY translation: $1,995 \times 40 = 79,800\text{ px}$.

2.3 ARIA Specifications for Virtualized Tables

Because only a tiny fraction of rows exist in the DOM at any given moment, screen readers would mistakenly announce that the table only contains 20 rows. To ensure WCAG AA compliance, we apply WAI-ARIA 1.2 Virtual Grid attributes:

<!-- Table exposes the TRUE virtual size -->
<table role="grid" aria-rowcount="100000" aria-colcount="4">
  <tbody>
    <!-- Each rendered row announces its true coordinate in the dataset -->
    <tr role="row" aria-rowindex="4521">
      <td role="gridcell">ORD-4521</td>
      <td role="gridcell">Acme Corp</td>
      <td role="gridcell">$1,200.00</td>
      <td role="gridcell">Shipped</td>
    </tr>
  </tbody>
</table>

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 50–57: The .virtual-viewport establishes a scrollable container (overflow-y: auto; height: 450px; position: relative).
• Lines 60–67: .phantom-spacer creates a 4,000,000px tall invisible div, forcing the browser's native scrollbar to perfectly reflect 100,000 rows.
• Lines 70–76: .virtual-content uses will-change: transform to position the active rendered window at translateY(${offsetY}px) on a dedicated GPU layer.
• Lines 185–193: The virtualization math calculates startIndex, endIndex, and offsetY on every scroll tick.
• Lines 200–215: Slices the in-memory array and renders ~23 <tr> elements into the DOM, stamping each row with aria-rowindex.
• Line 222: Passive scroll listener with requestAnimationFrame guarantees non-blocking 60 FPS scrolling.

Expected Browser Render Output

• A sleek, instantaneous data grid with a fully functional scrollbar representing 100,000 rows.
• Dragging the scrollbar thumb to the middle instantly displays rows ~50,000 in under 2 milliseconds.
• The "Live DOM Nodes" badge displays 23 rows, proving that only 23 elements exist in the DOM despite browsing a 100,000-row ledger.