120. Data Table - Row Selection

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

Requirements

1. Row Selection

• Checkbox in header to select/deselect all rows
• Individual row checkboxes
• Track selected rows
• Display count of selected rows
• Bulk actions on selected rows (optional)

2. Data Structure

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

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

Example Usage

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