127. Data Table - Column Resizing

Build a production-ready Data Table component that extends the base Data Table with column resizing functionality. This builds on top of the sorting feature from the base Data Table.

Requirements

1. Column Resizing

• Drag column borders to resize
• Maintain minimum column width
• Visual feedback during resize
• Update table layout dynamically

3. Data Structure

interface Column {
  key: string;
  label: string;
  sortable?: boolean;
  resizable?: boolean;
  width?: number;
  minWidth?: number;
}

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

Example Usage

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