Build a Data Table with Virtualized Rows, Sorting & Filtering

Q: Build a Data Table with Virtualized Rows, Sorting & Filtering

**Target Audience:** React developers who can build a basic sortable table (the medium version is [Build a Data Table with sorting and filtering](/interview-question/build-a-data-table-with-sorting-and-filtering)) and a windowed list ([Build a Virtualized List](/interview-question/build-a-virtualized-list)), and now need both at 20,000 rows. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output was produced by running the solution on React 19.3.1 in jsdom, driven by real clicks, input events and scroll events; the timings come from headless Chromium 141. ## 1. Why This Even Matters — A Story First Think of an airport departures board for an airport with 20,000 flights a day. Nobody prints all 20,000 lines; the board shows the dozen or so that fit, the header ("Flight, Destination, Gate, Status") never scrolls away, and you can ask the board to show only flights to Paris, sorted by time. Behind the bo

The problem

Question presented to candidate: "Our admin panel lists 20,000 employees. Build the table: Name, Age, Role, Status and Joined columns, click a header to sort (ascending, descending, then back to the original order), a name search plus Role and Status filters, and it has to stay fast, so only render the rows that are on screen. The header should stay put while the rows scroll."

Requirements:

20,000 generated rows, 40px each, in a 440px scroll area with a sticky 40px header row.
Header buttons cycle a column through ascending, descending and unsorted; aria-sort reflects the state.
A case-insensitive name search and two select filters that combine; show "N of 20,000 employees" and an empty state.
Only the visible rows plus 4 of overscan are mounted, whatever the filter or sort.
Changing a filter or sort scrolls back to the top.
Table semantics for assistive technology: role="table", aria-rowcount, aria-rowindex on the rows that exist.

What a strong answer should cover:

The data pipeline: source rows -> filter -> sort -> window -> DOM, with every stage derived (memoised), not stored.
Filtering before sorting, sorting a copy, a deterministic tie-break, and the asc/desc/none cycle.
Typed comparisons (numbers numerically, ISO dates as strings), and pre-lowercased search keys.
Virtualizing the body while the header stays outside the windowing maths (sticky inside the scroller so horizontal scroll stays aligned), with the header height subtracted from the visible body height.
Resetting scroll on a new result set and why stale scroll offsets are a bug.
ARIA for a virtualized table: aria-rowcount for the full filtered count and aria-rowindex per rendered row; aria-sort on column headers.

Clarifying questions expected:

"Is the data all on the client, or do sort and filter happen on the server?"
"Do we need row selection, column resizing or horizontal scrolling on small screens?"
"Should sort and filter state survive a reload (for example in the URL)?"

Code / implementation expected: Yes. A table component with derived filtered and sorted views, header sort buttons, filter inputs and a virtualized body. Library names (TanStack Table plus a virtualizer) are worth mentioning but not required.

React
Data Grid
Virtualization
Sorting
Filtering

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: React developers who can build a basic sortable table (the medium version is Build a Data Table with sorting and filtering) and a windowed list (Build a Virtualized List), and now need both at 20,000 rows. Difficulty: Hard

How to read this doc: Plain language first, then 📌 Interview term: callouts. The Verified output was produced by running the solution on React 19.3.1 in jsdom, driven by real clicks, input events and scroll events; the timings come from headless Chromium 141.

1. Why This Even Matters — A Story First

Think of an airport departures board for an airport with 20,000 flights a day. Nobody prints all 20,000 lines; the board shows the dozen or so that fit, the header ("Flight, Destination, Gate, Status") never scrolls away,

The solution is hidden so you can try first

12 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useMemo } from "react";
import DataTable from "./src/components/DataTable";
import { makeEmployees } from "./src/data/data";

export default function App() {
  const rows = useMemo(() => makeEmployees(20000), []);
  return (
    <main className="dt-app">
      <h1>Employees</h1>
      <DataTable rows={rows} />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.