Dynamic Row & Column Sizing
Demonstrate how to dynamically adjust the row and column sizes in TanStack Virtual Grid based on content, using the `useVirtual` hook.
import { useRef } from 'react';
import { useVirtual } from '@tanstack/react-virtual';
This imports the necessary hooks from React and the useVirtual hook from TanStack Virtual.
const parentRef = useRef(null);
Creates a ref for the grid container to measure and track its scrollable area.
const rowVirtualizer = useVirtual({
size: 1000, // Number of rows
parentRef,
estimateSize: useCallback(() => 50, []), // Starting estimate for row height
horizontal: false, // Indicates vertical scrolling
});
Initializes the vertical virtualizer for rows with an initial estimated size.
const columnVirtualizer = useVirtual({
size: 1000, // Number of columns
parentRef,
estimateSize: useCallback(() => 100, []), // Starting estimate for column width
horizontal: true, // Indicates horizontal scrolling
});
Initializes the horizontal virtualizer for columns with an initial estimated size.
const cells = rowVirtualizer.getVirtualItems().flatMap((row) =>
columnVirtualizer.getVirtualItems().map((column) => ({
rowIndex: row.index,
columnIndex: column.index,
rowStart: row.start,
columnStart: column.start,
}))
);
Creates a flat array of cell data, combining rows and columns, ready for rendering.
<div style={{ position: 'relative', height: '100vh', width: '100vw' }} ref={parentRef}>
{cells.map(({ rowIndex, columnIndex, rowStart, columnStart }) => (
<div
style={{
position: 'absolute',
top: rowStart,
left: columnStart,
width: columnVirtualizer.getSize(columnIndex),
height: rowVirtualizer.getSize(rowIndex),
}}
>
{/* Render cell content here */}
`Row ${rowIndex}, Column ${columnIndex}`
</div>
))}
</div>
Renders the actual grid, positioning each cell based on its virtualized start position and dynamically adjusts its size.