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.

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

Examples

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