Build a Data Table with sorting and filtering

Question

Accepted Answer

## Building a Data Table (sorting + filtering) in React

**Mental model:** Keep the raw rows immutable. The displayed rows are *derived*: filter by the search text, then sort by the active column/direction. Header clicks cycle the sort state. `useMemo` keeps the derivation cheap. Never mutate the source array — always sort a copy.

### Step 1 — Source rows + view state
```jsx
const [query, setQuery] = useState('');
const [sort, setSort] = useState({ key: null, dir: 'asc' });
```

### Step 2 — Filter then sort (derived)
```jsx
const view = useMemo(() => {
  let r = rows.filter((row) => Object.values(row).join(' ').toLowerCase().includes(query.toLowerCase()));
  if (sort.key) {
    r = [...r].sort((a, b) => {
      const x = a[sort.key], y = b[sort.key];
      return (x > y ? 1 : x < y ? -1 : 0) * (sort.dir === 'asc' ? 1 : -1);
    });
  }
  return r;
}, [rows, query, sort]);
```

### Step 3 — Cycle sort on header click
```jsx
const toggleSort = (key) => setSort((s) =>
  s.key !== key ?

Build a Data Table with sorting and filtering

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)