124. Data Table - Column Reordering

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

Requirements

1. Column Reordering

• Drag and drop column headers to reorder
• Visual feedback during drag
• Persist column order
• Smooth drag animations

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}
/>