advanced 9 min read

System Design: Scalable Large Data Table (100k+ Rows)

System design architecture for enterprise data grids (e.g. Airtable, Excel web, Walmart Inventory) with 100,000+ rows, 50+ columns, cell editing, multi-column sorting, filtering, and export.

Why it matters in interviews

Data table system design is a standard Walmart, Amazon, and enterprise SaaS interview round (Round 1 & 2) assessing virtualization, memoization, web workers, and keyboard navigation.

Visual & Interactive Explanation

Interactive Flow Execution

1. Viewport Scroll Event

SCROLL

User scrolls horizontally/vertically -> updates scrollTop & scrollLeft

2. 2D Windowing Engine

VIRTUALIZE

Calculates visible rows (e.g. #400–#425) and visible columns (e.g. #3–#8)

3. Web Worker Filter / Sort

WORKER

Background thread sorts 100k rows in 12ms and returns ordered index array

4. Memoized Cell Grid Paint

60 FPS

Renders ~150 lightweight cell DOM nodes positioned with CSS transforms

5. Inline Edit & Optimistic Sync

SYNC

User edits cell -> updates local normalized store instantly -> debounces HTTP PUT

Code Examples & Implementation

TanStack Table + Virtualization Architecture Setup

import React, { useRef } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';

export function VirtualizedDataTable({ data, columns }: { data: any[]; columns: any[] }) {
  const parentRef = useRef<HTMLDivElement>(null);

  // Virtualize 100,000 rows
  const rowVirtualizer = useVirtualizer({
    count: data.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 40, // 40px fixed row height
    overscan: 5,
  });

  return (
    <div
      ref={parentRef}
      className="h-[600px] overflow-auto border border-ink-border bg-ink rounded-lg"
    >
      <div
        style={{
          height: `${rowVirtualizer.getTotalSize()}px`,
          position: 'relative',
        }}
      >
        {rowVirtualizer.getVirtualItems().map((virtualRow) => {
          const rowData = data[virtualRow.index];
          return (
            <div
              key={virtualRow.key}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${virtualRow.size}px`,
                transform: `translateY(${virtualRow.start}px)`,
              }}
              className="flex items-center border-b border-ink-border px-4 text-xs hover:bg-ink-panel"
            >
              {columns.map((col) => (
                <div key={col.id} style={{ width: col.width }} className="truncate">
                  {rowData[col.accessorKey]}
                </div>
              ))}
            </div>
          );
        })}
      </div>
    </div>
  );
}

Interview-Ready Answers

A 100k-row data table uses 2D virtualization (rendering only visible rows AND columns in viewport), memoized cell renderers, and Web Workers for client-side multi-column sorting and filtering without blocking the UI.

Official Documentation & Specifications

ReactTanStack: TanStack Table Architecture Guide

web.devweb.dev: Virtualize large lists and data grids

Follow-up Questions & Deep Dives

Common Mistakes & Anti-Patterns

Re-rendering every cell in the table when a single cell is edited (missing React.memo / un-normalized state)
Running heavy multi-column sort algorithms on the main thread, freezing the UI for 400ms
Not supporting column width resizing without full table reflows

Real-World Architectural Scenario

Walmart inventory manager needs to edit quantities across 80,000 product rows in real time with instant filtering by category and supplier. How do you design the system?

Rate Your Readiness

Rate how comfortably you can explain this in an interview to update your global readiness gauge:

Rate your confidence: