119. Data Table - Global Search

Build an enhanced Data Table component that extends the base Data Table with global search functionality. This builds on top of the sorting feature from the base Data Table.

Requirements

1. Global Search

• Single search input that filters across all columns
• Debounced search input (optional enhancement)
• Clear search button
• Highlight matching text (optional)

2. Data Structure

interface Column {
  key: string;
  label: string;
  sortable?: boolean;
}

interface DataTableProps {
  data: Record<string, any>[];
  columns: Column[];
}

Example Usage

<DataTable 
  data={data} 
  columns={columns}
/>