Design a data table that renders 100,000 rows
PremiumFrontend systemMedium
- Virtualization
- Windowing
- Web workers
Quick answer
This frontend system interview question asks you to design a data table that renders 100,000 rows. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design a data table component that renders 100,000 rows and 30 columns for an internal analytics tool, with sorting, filtering, selection and inline editing. The hard part is scrolling at 60 fps and sorting without freezing the page when 3 million cells cannot all be in the DOM.
All rows are loaded in one go. The table supports sorting by any column, a text filter, column resize and reorder, sticky header and first column, multi-row selection with Shift and Ctrl, and inline editing of some cells. Analysts scroll fast, sort often and expect the table to behave like a spreadsheet.
What must a data table that renders 100,000 rows do?
- Rendering: Show any of 100,000 rows x 30 columns with smooth vertical and horizontal scrolling.
- Sorting and filtering: Click a header to sort (asc, desc, none); a text box filters across all columns; both complete without freezing the page.
How well must it do it?
- Smoothness: 60 fps while scrolling at 2,000 px per second on a laptop; no blank rows visible for more than one frame.
- Responsiveness: Sorting 100,000 rows returns in under 500 ms and never blocks typing in the filter box.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Virtualization
- Windowing
- Web workers
- ARIA grid
- Column sorting
- Sticky headers
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a data table that renders 100,000 rows and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Medium. Entry-level engineers can practise it, but it expects you to reason about requirements and trade-offs, not only list components.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team