Virtuoso Grid API Reference

All properties are optional - by default, the component will render empty.

If you are using TypeScript and want to use correctly typed component ref, you can use VirtuosoGridHandle types.

import { VirtuosoGrid, VirtuosoGridHandle } from 'react-virtuoso'
//...
const ref = useRef<VirtuosoGridHandle>(null)
//...
<VirtuosoGrid ref={ref} /*...*/ />

Properties

"component-interfaces/VirtuosoGrid".VirtuosoGridProps

Type parameters

NameDefault
D-
Cunknown

Hierarchy

  • {}

    VirtuosoGridProps

Properties

atBottomStateChange

Optional atBottomStateChange: (atBottom: boolean) => void

Defined in component-interfaces/VirtuosoGrid.ts:88

Called with true / false when the list has reached the bottom / gets scrolled up. Can be used to load newer items, like tail -f.


atTopStateChange

Optional atTopStateChange: (atTop: boolean) => void

Defined in component-interfaces/VirtuosoGrid.ts:93

Called with true / false when the list has reached the top / gets scrolled down.


components

Optional components: GridComponents<C>

Defined in component-interfaces/VirtuosoGrid.ts:42

Use the components property for advanced customization of the elements rendered by the list.


computeItemKey

Optional computeItemKey: GridComputeItemKey<D, C>

Defined in component-interfaces/VirtuosoGrid.ts:54

If specified, the component will use the function to generate the key property for each list item.


context

Optional context: C

Defined in component-interfaces/VirtuosoGrid.ts:26

Additional context available in the custom components and content callbacks


customScrollParent

Optional customScrollParent: HTMLElement

Defined in component-interfaces/VirtuosoGrid.ts:118

Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.


data

Optional data: readonly D[]

Defined in component-interfaces/VirtuosoGrid.ts:21

The data items to be rendered. If data is set, the total count will be inferred from the length of the array.


endReached

Optional endReached: (index: number) => void

Defined in component-interfaces/VirtuosoGrid.ts:72

Gets called when the user scrolls to the end of the list. Receives the last item index as an argument. Can be used to implement endless scrolling.


initialItemCount

Optional initialItemCount: number

Defined in component-interfaces/VirtuosoGrid.ts:32

Use for server-side rendering - if set, the list will render the specified amount of items regardless of the container / item size.


isScrolling

Optional isScrolling: (isScrolling: boolean) => void

Defined in component-interfaces/VirtuosoGrid.ts:66

Called when the list starts/stops scrolling.


itemClassName

Optional itemClassName: string

Defined in component-interfaces/VirtuosoGrid.ts:108

Sets the grid items' className


itemContent

Optional itemContent: GridItemContent<D, C>

Defined in component-interfaces/VirtuosoGrid.ts:37

Set the callback to specify the contents of the item.


listClassName

Optional listClassName: string

Defined in component-interfaces/VirtuosoGrid.ts:103

Sets the className for the list DOM element


logLevel

Optional logLevel: LogLevel

Defined in component-interfaces/VirtuosoGrid.ts:125

set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.

Ensure that you have "all levels" enabled in the browser console too see the messages.


overscan

Optional overscan: number | { main: number ; reverse: number }

Defined in component-interfaces/VirtuosoGrid.ts:49

Set the overscan property to make the component "chunk" the rendering of new items on scroll. The property causes the component to render more items than the necessary, but reduces the re-renders on scroll. Setting { main: number, reverse: number } lets you extend the list in both the main and the reverse scrollable directions.


rangeChanged

Optional rangeChanged: (range: ListRange) => void

Defined in component-interfaces/VirtuosoGrid.ts:82

Called with the new set of items each time the list items are rendered due to scrolling.


scrollSeekConfiguration

Optional scrollSeekConfiguration: ScrollSeekConfiguration | false

Defined in component-interfaces/VirtuosoGrid.ts:61

Use to display placeholders if the user scrolls fast through the list.

Set components.ScrollSeekPlaceholder to change the placeholder content.


scrollerRef

Optional scrollerRef: (ref: HTMLElement | null) => any

Defined in component-interfaces/VirtuosoGrid.ts:98

Provides access to the root DOM element


startReached

Optional startReached: (index: number) => void

Defined in component-interfaces/VirtuosoGrid.ts:77

Called when the user scrolls to the start of the list.


totalCount

Optional totalCount: number

Defined in component-interfaces/VirtuosoGrid.ts:16

The total amount of items to be rendered.


useWindowScroll

Optional useWindowScroll: boolean

Defined in component-interfaces/VirtuosoGrid.ts:113

Uses the document scroller rather than wrapping the grid in its own.

Methods

"component-interfaces/VirtuosoGrid".VirtuosoGridHandle

Hierarchy

  • VirtuosoGridHandle

Methods

scrollBy

scrollBy(location: ScrollToOptions): void

Defined in component-interfaces/VirtuosoGrid.ts:131

Parameters:

NameType
locationScrollToOptions

Returns: void


scrollTo

scrollTo(location: ScrollToOptions): void

Defined in component-interfaces/VirtuosoGrid.ts:130

Parameters:

NameType
locationScrollToOptions

Returns: void


scrollToIndex

scrollToIndex(location: number | IndexLocationWithAlign): void

Defined in component-interfaces/VirtuosoGrid.ts:129

Parameters:

NameType
locationnumber | IndexLocationWithAlign

Returns: void