123. Data Table - Virtual Scrolling

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

Requirements

1. Virtual Scrolling

• Render only visible rows in viewport
• Calculate row heights dynamically
• Smooth scrolling performance
• Handle large datasets efficiently (1000+ rows)
• Maintain scroll position

2. Data Structure

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

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

Example Usage

<DataTable 
  data={data} 
  columns={columns}
  rowHeight={40}
  overscan={5}
/>