39 lines
No EOL
1.1 KiB
TypeScript
39 lines
No EOL
1.1 KiB
TypeScript
import { useRef } from 'react';
|
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
import { useDashboardData } from './hooks/useDashboardData';
|
|
import './App.css';
|
|
|
|
export default function App() {
|
|
const data = useDashboardData();
|
|
const parentRef = useRef<HTMLDivElement>(null);
|
|
|
|
const rowVirtualizer = useVirtualizer({
|
|
count: data.length,
|
|
getScrollElement: () => parentRef.current,
|
|
estimateSize: () => 35, // Consistent row height
|
|
});
|
|
|
|
return (
|
|
<div className="dashboard-container">
|
|
<h1>Market Live Stream</h1>
|
|
|
|
{/* Viewport for virtualization */}
|
|
<div ref={parentRef} className="table-viewport">
|
|
<div
|
|
className="table-content"
|
|
style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
|
|
>
|
|
{rowVirtualizer.getVirtualItems().map((virtualRow) => (
|
|
<div
|
|
key={virtualRow.key}
|
|
className="row"
|
|
style={{ transform: `translateY(${virtualRow.start}px)` }}
|
|
>
|
|
<span>{data[virtualRow.index].symbol}</span>
|
|
<span className="price-cell">${data[virtualRow.index].price}</span>
|
|
</div>
|
|
))} </div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |