126. Data Table - Column Filtering

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

Requirements

1. Column Filtering

• Filter input for each filterable column
• Real-time filtering as user types
• Clear filter button for each column
• Multiple column filters work together (AND logic)

2. Data Structure

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

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

Example Usage

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