How would you build a data table with sorting & filtering in React?

🧩 Scenario

Create a reusable data table component that supports:

• Column sorting (asc/desc/none)
• Global search (debounced)
• Column filters (e.g., status, date range)
• Pagination (client-side)
• Performance optimizations (memoization, virtualization note)
• Accessibility (keyboard focus, ARIA attributes)

🧠 Answer (Design Overview)

Key Decisions

1. Client vs Server: Choose based on dataset size. We'll demo client-side behavior for simplicity.
2. Immutable Data Flow: Keep original data and derive visible rows using memoized selectors (useMemo).
3. Sorting Strategy: Store sortBy: { key, direction }. Toggling cycles through asc -> desc -> none.
4. Filtering Strategy: Keep a filters object per column and a globalQuery for full-text search.
5. Pagination: Apply after filtering & sorting. Use page size and current page state.
6. Virtualization: For very large tables, integrate react-window after implementing sorting/filtering.

Tradeoffs:

• Client-side filtering is fast for small datasets but memory-heavy for large ones.
• Complex multi-column sorts may require stable sort implementations.

🎮 Live Demo: Data Table with Sorting & Filtering

🔍 Real-World Tips

• Add column resizing and column visibility toggles for power users.
• Use server-side cursors and filtering for scalable apps.
• Use a stable sort to ensure deterministic ordering when values are equal.
• Cache filtered results when filters are expensive.

🧭 Diagram

flowchart TD
  A[Raw Data] --> B[Global Search Filter]
  B --> C[Column Filters]
  C --> D[Sorting]
  D --> E[Pagination]
  E --> F[Rendered Rows]

Quick Practice

1. Implement column visibility toggles and remember preferences in localStorage.
2. Add export CSV for the current filtered view.
3. Replace client-side pagination with server-side and update UI accordingly.

Summary

• Use useMemo to avoid recalculating filtered/sorted rows unnecessarily.
• Decide client vs server strategy based on data size.
• For very large tables use virtualization libraries and server-side queries.