react-virtualized

import React, { useRef, useCallback } from 'react'; import { List, AutoSizer, ListRowRenderer } from 'react-virtualized'; import 'react-virtualized/styles.css'; // Essential for basic styling interface Item { id: number; name: string; description: string; } const generateData = (count: number): Item[] => { const data: Item[] = []; for (let i = 0; i < count; i++) { data.push({ id: i, name: `Item ${i}`, description: `This is the description for item number ${i}. It can be quite long, demonstrating content within a virtualized row.` }); } return data; }; const items = generateData(10000); // Generate 10,000 dummy items function MyVirtualizedList() { const listRef = useRef<List>(null); const rowRenderer: ListRowRenderer = useCallback(({ index, key, style }) => { const item = items[index]; return ( <div key={key} style={{ ...style, borderBottom: '1px solid #eee', padding: '10px' }}> <h3 style={{ margin: 0 }}>{item.name}</h3> <p style={{ margin: '5px 0 0' }}>{item.description}</p> </div> ); }, [items]); // Dependencies for useCallback to prevent unnecessary re-renders return ( <div style={{ width: '100%', height: '500px' }}> <AutoSizer> {({ width, height }) => ( <List ref={listRef} width={width} height={height} rowCount={items.length} rowHeight={80} // Fixed height for simplicity; dynamic heights require more complex setup rowRenderer={rowRenderer} overscanRowCount={3} // Render a few extra rows for smoother scrolling /> )} </AutoSizer> </div> ); } export default MyVirtualizedList;