Build a Data Table with sorting and filtering | Interview Question

Q: Build a Data Table with sorting and filtering

**Target Audience:** Developers preparing for a frontend machine coding round who know React state and lists and want to build a correct, reusable sortable and filterable table. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Code excerpts are copied from the runnable solution, and the Verified section quotes what it printed on React 19.3.1 while a script clicked headers, typed and changed filters. ## 1. Why This Even Matters — A Story First Think of a stack of index cards, one per employee. Someone asks "who joined first?", so you sort the stack by date. Then "only engineers, please", so you pull those cards out. Then "show me five at a time". If you physically re-sort the original stack every time, you can never get back to the order the cards arrived in, and two people sharing a desk end up sorting the same stack in different directions. The fix is to never touch the original stack: keep it, and produce a fi

The problem

Question presented to candidate: "Here is an array of employee records. Render it as a table where clicking a column header sorts by that column, ascending, then descending, then back to the original order. Add a search box and a role dropdown to filter it, and show five rows per page. The columns have different types: text, numbers, dates and a yes or no flag."

Requirements:

Columns described by config (key, label, type), not hard-coded markup.
Header click cycles none, ascending, descending; a new column starts ascending. Only one column sorts at a time.
Correct comparison per type: locale-aware text, numeric numbers, real dates, booleans; empty values always last.
Stable sort: rows that tie keep their original relative order.
A search box (name or role, case-insensitive, trimmed) and a role select, combined with AND.
Five rows per page with Prev / Next and "Page x of y"; any filter or sort change returns to page 1; an empty-state row when nothing matches.
Accessible headers: real buttons inside th, aria-sort on the sorted column, a caption that states the count and the sort.

What a strong answer should cover:

A derived pipeline: source rows, then filter, then sort, then slice. Only the inputs (query, role, sort, page) are state; every stage is computed and memoised.
Why sort() on the source array is a bug (it mutates props or state), and copying first.
Comparators by type, Intl.Collator for text, and an index tiebreaker so the result is stable and deterministic.
Clamping or resetting the page when the row count changes.
aria-sort, scope="col", buttons for keyboard access, and horizontal scrolling on narrow screens.

Clarifying questions expected:

"Is the data small enough to sort in the browser, or should sorting and filtering go to the server?"
"Do you want multi-column sort (shift-click) or one column at a time?"
"How should empty values sort?"

Code / implementation expected: Yes. A reusable table component driven by a column config, in React, Vue or Angular, with the sorting and filtering logic in plain functions.

React
Data
Sorting

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: Developers preparing for a frontend machine coding round who know React state and lists and want to build a correct, reusable sortable and filterable table. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. Code excerpts are copied from the runnable solution, and the Verified section quotes what it printed on React 19.3.1 while a script clicked headers, typed and changed filters.

1. Why This Even Matters — A Story First

Think of a stack of index cards, one per employee. Someone asks "who joined first?", so you sort the stack by date. Then "only engineers, please", so you pull those cards out. Then "show me five at a time". If you physically re-sort the original stack every time, you can never get back to the order the cards arrived in, and two people sharing a desk end up sorting the same stack in differe

The solution is hidden so you can try first

13 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 DataTable from "./src/components/DataTable";
import { COLUMNS, PEOPLE } from "./src/data/data";

export default function App() {
  return (
    <main className="demo">
      <h1>Team directory</h1>
      <DataTable columns={COLUMNS} rows={PEOPLE} />
    </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.