Build a Searchable Data Table

Objective

Build a <DataTable> React component that handles large datasets efficiently. This is a common frontend interview take-home challenge.

Requirements

1. Search/Filter

• Text input that filters rows across all columns
• Debounced input (300ms) to avoid filtering on every keystroke
• Show the number of matching results

2. Sorting

• Click column headers to sort ascending/descending
• Visual indicator for current sort column and direction
• Support sorting strings and numbers correctly

3. Pagination

• Display 20 rows per page
• Previous/Next page navigation
• Show current page number and total pages
• Reset to page 1 when search query changes

4. Performance

• Must handle 10,000+ rows without noticeable lag
• Search and sort should feel instant (< 100ms)
• Minimize unnecessary re-renders

5. Keyboard Navigation

• Arrow Up/Down to navigate between rows
• Enter to select a row
• Escape to clear search

Data Schema

Your component should work with this data shape:

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
  department: string;
  salary: number;
  joinDate: string; // ISO date string
}

interface DataTableProps {
  data: User[];
  columns: {
    key: keyof User;
    label: string;
    sortable?: boolean;
  }[];
}

Example Usage

<DataTable
  data={users}
  columns={[
    { key: 'name', label: 'Name', sortable: true },
    { key: 'email', label: 'Email', sortable: true },
    { key: 'role', label: 'Role', sortable: true },
    { key: 'department', label: 'Department', sortable: true },
    { key: 'salary', label: 'Salary', sortable: true },
  ]}
/>

Hints

• Use useMemo to memoize filtered and sorted results
• Use useCallback for event handlers passed to child components
• Consider useRef for the search input focus management
• Debounce the search using a custom useDebounce hook
• For 10K+ rows, consider only rendering visible rows (virtualization) or rely on pagination