Design a Data Table (Sort / Filter / Virtualize)
Interview Prep mode active
Interview answer templates and key talking points. Switch the mode in the header to change your experience.
Step 1 — Constraints
1M plus rows. Sort, filter, column resize. Keyboard accessible. Virtual scrolling?
Step 2 — Decision: Client-side vs server-side sort
| Approach | Speed | Data Loaded | Complexity |
|---|---|---|---|
| Client-side sort | Fast | Limited | Low |
| Server-side sort | Slower | Scalable | High |
Winner: Server-side. 1M rows = must sort on server.
Step 3 — Virtual scrolling
Keep only visible rows in DOM. Usually 20–30 rows on screen regardless of total size.
Use ResizeObserver to measure dynamic row heights.
Step 4 — Column resizing
Drag column header to resize. Persist widths to localStorage. Prevent layout shift during resize.
Step 5 — Keyboard accessibility
Arrow keys move focus between cells. Enter opens row detail. Tab cycles through focusable cells.
Step 6 — Gotchas
Virtual scroll plus dynamic heights = hard to measure accurately.
Filter performance: O(n) on client, needs server-side index.
Resizing columns while scrolling causes CLS.
Step 7 — 30-minute interview
0–5 min: "1M rows? Sort/filter? Keyboard nav?"
5–15 min: Explain server-side sort, client virtual scroll.
15–30 min: "How do you handle column resize? Keyboard nav?"
Step 8 — Interview simulation
Interviewer: "Design data table for 1M rows"
You: "Virtual scrolling for client, server-side sort and filter. Index on common columns. Drag column headers to resize, persist to localStorage. Keyboard nav: arrow keys, Enter for row detail. Sticky header."
Interviewer: "What about CLS from column resize?"
You: "Skip column resize during scroll. Use CSS contain: layout to isolate resize impact."
Step 9 — Tiered answer
| Level | Time | What You Say |
|---|---|---|
| Junior (15 min) | Simple HTML table with sort | |
| Mid (25 min) | Virtual scroll, server-side sort | |
| Senior (30 min) | Virtual + server sort + resize + keyboard + no CLS |
Step 10 — Final checklist
| Issue | Solution |
|---|---|
| Large datasets | Virtual scrolling + server-side sort |
| Performance | Index on sort columns |
| Dynamic heights | ResizeObserver to measure |
| Column resize | Drag header, persist to localStorage |
| Keyboard | Arrow keys, Enter, Tab |
| Sticky header | position: sticky, z-index |
| CLS | Disable resize during scroll |
| Export | CSV button, server-side generation |
"Virtual scrolling for 1M rows: render only visible 20–30. Server-side sort and filter with indexes on common columns. Drag column headers to resize, persist widths to localStorage. Keyboard nav: arrow keys move focus, Enter opens row. Sticky header. Disable column resize during scroll to prevent CLS."