VirtualGrid

Renders only visible cells of a large grid for better scroll performance. Use VirtualGrid when a dense grid would be too heavy to mount all at once.

#
Usage

Basic example with common props.

R0, C0

R0, C1

R0, C2

R0, C3

R1, C0

R1, C1

R1, C2

R1, C3

R2, C0

R2, C1

R2, C2

R2, C3

R3, C0

R3, C1

R3, C2

R3, C3

Name	Description	Type	Default	Required
cellProps	Extra props passed to the cell slot as `props`.	Object
class	CSS class name on the root element.	String
columnCount	Total number of columns in the grid.	Number		true
columnWidth	Column width as px, percent string, or a function of index.	Number String Function		true
defaultHeight	Initial grid height before measure; important for SSR.	Number	0
defaultWidth	Initial grid width before measure; important for SSR.	Number	0
dir	Text directionality for cell layout (ltr, rtl, or auto).	String
onCellsRendered	Called when the visible or overscan cell range changes.	Function
onResize	Called when the grid root resizes.	Function
overscanCount	Extra rows/columns rendered outside the visible area.	Number	3
rowCount	Total number of rows in the grid.	Number		true
rowHeight	Row height as px, percent string, or a function of index.	Number String Function		true
style	Inline styles; the grid fills the size defined here.	Object
tag	Root element tag.	String	div

Name	Description
cell	Render a single cell. Receives columnIndex, rowIndex, style, ariaAttributes, and props.
default	Optional content rendered after the virtualized cells.

Name	Description
scrollToCell	Scroll so the given cell (row and column) is visible.
scrollToColumn	Scroll so the given column index is visible.
scrollToRow	Scroll so the given row index is visible.
element	Root HTML element when mounted, otherwise null.