Data Table Component

Design a data table with sorting, filtering, pagination, and virtualization for large datasets.

R - Requirements

Key Questions:

• How many rows? (100, 1k, 10k+)
• Sorting needed? (single/multi-column)
• Filtering needed? (per column, global)
• Pagination or infinite scroll?
• Column resizing/reordering?

Common Answers:

• Small (< 100): Render all, client-side sort/filter
• Large (1k+): Virtualization, server-side sort/filter

A - Architecture

Table Operations Flow:

Table Architecture:

Architecture Decisions:

• Client-side vs server-side sorting/filtering - Client for < 1k rows, server for larger
• Virtualization for large datasets - Only render visible rows (performance)
• Column management (resize, reorder, show/hide) - Persist preferences in localStorage

Relevant Content:

• Windowing Virtualization - Virtual scrolling
• Data Fetching Strategies - Server-side operations

D - Data Model

State Management:

• Sort state (column, direction)
• Filter state (per column, global)
• Pagination state (page, page size)
• Column visibility/order

Caching:

• Result cache (avoid refetch on sort/filter)
• Column preferences (localStorage)

Relevant Content:

• Caching Patterns - Cache strategies
• Pagination Strategies - Pagination patterns

I - Interface

Features:

• Sortable headers (click to sort)
• Filter inputs (per column)
• Pagination controls
• Column resizing
• Column reordering
• Row selection (single/multi)
• Loading states
• Empty states

Accessibility:

• Keyboard navigation (arrow keys, Tab)
• Screen reader support
• ARIA table roles
• Sort announcements

Relevant Content:

• Accessible Forms - Filter inputs
• Keyboard Shortcuts - Navigation

O - Optimizations

Performance:

• Virtualization for large datasets (1000+ rows)
• Memoization (prevent re-renders on sort/filter)
• Debounce filters (don't filter on every keystroke)
• Server-side operations (sort/filter on backend for large data)

UX:

• Optimistic UI (show sorted/filtered immediately)
• Loading states (skeleton while fetching)

Relevant Content:

• List Animation Performance - Smooth updates
• Optimistic Updates - Instant feedback

Implementation Checklist

• Sortable columns (single/multi)
• Filter inputs (per column, global)
• Pagination (page, page size)
• Virtualization (for large datasets)
• Column resizing/reordering
• Row selection
• Loading states
• Empty states
• Keyboard navigation
• Accessibility (ARIA, screen readers)

Common Pitfalls

❌ Rendering all rows → Performance issues
✅ Virtualize for 1000+ rows, paginate or infinite scroll

❌ No debounce on filters → Too many operations
✅ Debounce filter input (300ms)

❌ Client-side sort/filter for large data → Slow, memory issues
✅ Server-side operations for large datasets

❌ No loading states → Users don't know status
✅ Show skeleton/loading while fetching