Design a Virtualized Grid – Frontend System Design
We’ll walk through the frontend system design for a reusable data table. Our goal is a component that shows a sticky header, sorts columns, optionally filters and pages, and stays fast at 10,000 rows. Interviewers are not looking for a dump of <tr> tags. They want a public API, a virtualization plan, and a clear owner for sort and selection state. Put simply, the task is to design a virtualized grid that keeps scrolling smooth at any row count.
You’ll see how the table stays presentational, how the View Model owns the window over the array, and how accessibility changes when you leave a real <table> for a virtualized grid. We’ll stay honest about scale: 10,000 row objects are fine in memory. 80,000 DOM cells are not.
Problem Statement
Design a reusable data table.
Requirements:
- Fixed header while the body scrolls
- Sortable columns, optional filter and pagination (or virtualization)
- Custom cell renderers (status chips, links, actions menu)
- Stay fast at 10,000 rows
Describe the public API, virtualization, and accessibility.
