1function VirtualTable({ data, rowHeight = 35 }) {
2  const [scrollTop, setScrollTop] = useState(0);
3  const containerRef = useRef(null);
4  const totalHeight = data.length * rowHeight;
5  
6  const visibleRows = useMemo(() => {
7    const startIndex = Math.floor(scrollTop / rowHeight);
8    const endIndex = startIndex + Math.ceil(containerRef.current?.clientHeight / rowHeight);
9    
10    return data.slice(startIndex, endIndex).map((row, index) => ({
11      ...row,
12      virtualIndex: startIndex + index
13    }));
14  }, [scrollTop, data, rowHeight]);
15
16  const handleScroll = (event) => {
17    setScrollTop(event.target.scrollTop);
18  };
19
20  return (
21    <div 
22      ref={containerRef}
23      style={{ height: '400px', overflow: 'auto' }}
24      onScroll={handleScroll}
25    >
26      <div style={{ height: totalHeight, position: 'relative' }}>
27        {visibleRows.map(row => (
28          <div
29            key={row.id}
30            style={{
31              position: 'absolute',
32              top: row.virtualIndex * rowHeight,
33              height: rowHeight
34            }}
35          >
36            {row.content}
37          </div>
38        ))}
39      </div>
40    </div>
41  );
42}