Interface: VirtuosoGridProps<D, C>
Extends
Type Parameters
• D
• C = unknown
Properties
atBottomStateChange()?
optional
atBottomStateChange: (atBottom
) =>void
Called with true / false when the list has reached the bottom / gets scrolled up.
Can be used to load newer items, like tail -f
.
Parameters
atBottom
boolean
Returns
void
atTopStateChange()?
optional
atTopStateChange: (atTop
) =>void
Called with true
/ false
when the list has reached the top / gets scrolled down.
Parameters
atTop
boolean
Returns
void
components?
optional
components:GridComponents
<C
>
Use the components
property for advanced customization of the elements rendered by the list.
computeItemKey?
optional
computeItemKey:GridComputeItemKey
<D
,C
>
If specified, the component will use the function to generate the key
property for each list item.
context?
optional
context:C
Additional context available in the custom components and content callbacks
customScrollParent?
optional
customScrollParent:HTMLElement
Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.
data?
optional
data: readonlyD
[]
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
) =>void
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.
Parameters
index
number
Returns
void
increaseViewportBy?
optional
increaseViewportBy:number
| {bottom
:number
;top
:number
; }
The property accepts pixel values.
Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
The property causes the component to render more items than the necessary, but can help with slow loading content.
Using { top?: number, bottom?: number }
lets you set the increase for each end separately.
initialItemCount?
optional
initialItemCount:number
Use for server-side rendering - if set, the list will render the specified amount of items regardless of the container / item size.
initialTopMostItemIndex?
optional
initialTopMostItemIndex:GridIndexLocation
isScrolling()?
optional
isScrolling: (isScrolling
) =>void
Called when the list starts/stops scrolling.
Parameters
isScrolling
boolean
Returns
void
itemClassName?
optional
itemClassName:string
Sets the grid items' className
itemContent?
optional
itemContent:GridItemContent
<D
,C
>
Set the callback to specify the contents of the item.
listClassName?
optional
listClassName:string
Sets the className for the list DOM element
logLevel?
optional
logLevel:LogLevel
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
; }
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 grid in both the main and the reverse scrollable directions.
See the increaseViewportBy
property for a similar behavior (equivalent to the overscan
in react-window).
rangeChanged()?
optional
rangeChanged: (range
) =>void
Called with the new set of items each time the list items are rendered due to scrolling.
Parameters
range
Returns
void
readyStateChanged()?
optional
readyStateChanged: (ready
) =>void
invoked with true after the grid has done the initial render and the items have been measured.
Parameters
ready
boolean
Returns
void
restoreStateFrom?
optional
restoreStateFrom:null
|GridStateSnapshot
scrollerRef()?
optional
scrollerRef: (ref
) =>any
Provides access to the root DOM element
Parameters
ref
null
| HTMLElement
Returns
any
scrollSeekConfiguration?
optional
scrollSeekConfiguration:false
|ScrollSeekConfiguration
Use to display placeholders if the user scrolls fast through the list.
Set components.ScrollSeekPlaceholder
to change the placeholder content.
startReached()?
optional
startReached: (index
) =>void
Called when the user scrolls to the start of the list.
Parameters
index
number
Returns
void
stateChanged()?
optional
stateChanged: (state
) =>void
reports when the grid state changes. The reported value can be stored and passed back to restoreStateFrom
to restore the grid to the same state.
Parameters
state
Returns
void
totalCount?
optional
totalCount:number
The total amount of items to be rendered.
useWindowScroll?
optional
useWindowScroll:boolean
Uses the document scroller rather than wrapping the grid in its own.
start?
optional
start:number
Inherited from
GridRootProps.start
cite?
optional
cite:string
Inherited from
GridRootProps.cite
form?
optional
form:string
Inherited from
GridRootProps.form
label?
optional
label:string
Inherited from
GridRootProps.label
slot?
optional
slot:string
Inherited from
GridRootProps.slot
span?
optional
span:number
Inherited from
GridRootProps.span
style?
optional
style:CSSProperties
Inherited from
GridRootProps.style
summary?
optional
summary:string
Inherited from
GridRootProps.summary
title?
optional
title:string
Inherited from
GridRootProps.title
pattern?
optional
pattern:string
Inherited from
GridRootProps.pattern
children?
optional
children:ReactNode
Inherited from
GridRootProps.children
tabIndex?
optional
tabIndex:number