Build a Data Table with Virtualized Rows, Sorting & Filtering

Question

Accepted Answer

**Requirements**
- Table with 6 columns (Name, Age, Role, Status, Joined, Actions); click header to sort (cycle asc/desc/none); per-column filter (text/select).
- Sticky header, zebra rows, row selection (checkbox), and virtualized body for 50k rows.
- Pagination or virtual scroll; export CSV; show empty & loading states.

**Architecture**
- State `sort: {key, dir}` + `filters: Map<col, value>`. Derived `filtered = rows.filter(f)` then `sorted = [...filtered].sort(...)` — memoize with `useMemo`.
- Virtualize body with `react-window` or `TanStack Virtual`; header outside virtualizer stays sticky.
- Sorting: stable sort, handle numeric vs string vs date; filter: case-insensitive substring / select equals.

**What interviewers look for:** derived + memoized computation, stable sort, sticky header outside virtualizer, checkbox selection with shift-range, CSV export via blob.

**Reference implementation**
```jsx
function useDataTable(rows) {
  const [sort, setSort] = React.useState(null);

Build a Data Table with Virtualized Rows, Sorting & Filtering

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.