UIREADY.dev
30% offEnding soon
FSD-017Frontend system design Premium

Design a Virtualized Grid

Design a two-axis virtual grid with frozen regions, resizing, focus, selection, clipboard support, and accessible logical coordinates.

Intermediate 57 min read

A virtualized grid presents one large logical table while mounting only the cells near the viewport. Correctness comes from two shared geometry indexes, one scroll owner, and a logical focus and selection model that does not depend on recycled DOM nodes.

A virtual list answers one spatial question: which rows intersect the viewport? A grid adds a second axis and several coupled surfaces. The body scrolls horizontally and vertically. Column headers follow horizontal movement. Row headers follow vertical movement. A frozen corner follows neither. Column resizing changes every offset to its right, and keyboard movement may target a cell that is not mounted yet.

The clean mental model is one coordinate plane, not four independent tables. Stable row and column IDs identify data. Row and column size indexes map logical coordinates to pixels. Every rendered region projects from those same indexes.

Start with the product contract

Ask whether the product is a read-only table, an interactive data grid, or a spreadsheet-like editor. That choice changes semantics and keyboard behavior. A native HTML table is often the best answer for modest, mostly read-only data. Virtualization becomes reasonable only after retained DOM, rendering, or memory exceeds a measured target.

For this interview, assume 100,000 logical rows, 200 columns, variable row heights, resizable columns, one frozen header row, two frozen columns, range selection, keyboard navigation, copy and paste, and a mid-range mobile target. These figures are explicit design assumptions.

The public interview prompt

Design a virtualized grid for a large operational dataset. Explain:

  • stable row and column identity, size indexes, and two-axis range lookup;
  • one scroll owner, frozen headers and columns, and layer synchronization;
  • variable sizes, ResizeObserver batching, column resize, and anchoring;
  • keyboard navigation, focus modes, editing, selection, and reveal;
  • logical copy and paste, validation, permissions, and transaction boundaries;
  • ARIA grid semantics, row and column counts, logical indices, and screen-reader testing;
  • server rendering, restoration, loading, errors, printing, export, and browser Find;
  • performance budgets, observability, testing, rollout, and simpler fallbacks.

Keep formula calculation, collaborative spreadsheet editing, pivoting, and server-side query planning out of version one. They deserve separate designs.

What the premium solution covers

The full solution develops the two geometry indexes, visible rectangle, frozen-region projection, resize transaction, logical focus and selection state, clipboard pipeline, accessibility contract, and server boundary. It also covers variable tracks, programmatic reveal, editing, restoration, degraded modes, security, performance, observability, and interview scoring.

Original media follows a keyboard target across both window boundaries, maps the four rendered regions, traces shared geometry, and turns a logical range into a validated clipboard transaction. Two deterministic labs expose the range arithmetic and horizontal anchor correction.

Premium solution

Continue with the complete system design

Unlock the architecture, state machine, API contracts, original diagrams, positioning model, accessibility decisions, performance budgets, testing plan, rollout strategy, scoring rubric, and interview walkthrough.

  • Detailed, beginner-friendly explanation
  • Production failure modes and trade-offs
  • Mobile-friendly architecture diagrams
  • Senior and staff-level interview signals
Unlock Premium

Frequently asked questions

How is a virtualized grid different from a virtual list?
A grid windows rows and columns at the same time. It must coordinate two size indexes, frozen regions, two-dimensional keyboard movement, cell selection, and clipboard operations while presenting one logical table.
Should a virtual grid render with an HTML table?
Use a native table when ordinary layout can meet the product and performance requirements. A deeply virtualized interactive grid often needs positioned layers, but it must then recreate the correct grid semantics, focus model, and logical row and column metadata.
How should frozen headers and columns stay synchronized?
Give the scrolling body sole ownership of scroll offsets. Header and frozen-column layers read those offsets and the same row and column size indexes. They should not form a chain of scrollable panes that update one another.
How does keyboard focus reach an unmounted cell?
Update the logical active coordinate, calculate its row and column offsets, scroll it into view, render the new rectangle, and then move DOM focus or update the active descendant. Never point focus semantics at a cell that does not exist.
How can copy include cells that are outside the DOM?
Serialize the logical selected range from the data model in row-major order. The clipboard operation must not scrape rendered cell text because virtualization intentionally omits most selected cells from the DOM.
What happens when a column is resized?
Show an immediate local preview, update the shared column-size index, and preserve a horizontal anchor when widths before it change. Commit and persist the final width separately so a canceled or failed save does not corrupt layout state.