Interface: VirtuosoGridProps<D, C>
Type parameters
Name | Type |
---|---|
D | D |
C | unknown |
Hierarchy
-
↳
VirtuosoGridProps
Properties
totalCount
• Optional
totalCount: number
The total amount of items to be rendered.
data
• Optional
data: readonly D
[]
The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
context
• Optional
context: C
Additional context available in the custom components and content callbacks
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.
itemContent
• Optional
itemContent: GridItemContent
<D
, C
>
Set the callback to specify the contents of the item.
components
• Optional
components: GridComponents
<C
>
Use the components
property for advanced customization of the elements rendered by the list.
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).
increaseViewportBy
• Optional
increaseViewportBy: number
| { top
: number
; bottom
: 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.
computeItemKey
• Optional
computeItemKey: GridComputeItemKey
<D
, C
>
If specified, the component will use the function to generate the key
property for each list item.
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.
isScrolling
• Optional
isScrolling: (isScrolling
: boolean
) => void
Called when the list starts/stops scrolling.
Type declaration
▸ (isScrolling
): void
Parameters
Name | Type |
---|---|
isScrolling | boolean |
Returns
void
endReached
• Optional
endReached: (index
: number
) => 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.
Type declaration
▸ (index
): void
Parameters
Name | Type |
---|---|
index | number |
Returns
void
startReached
• Optional
startReached: (index
: number
) => void
Called when the user scrolls to the start of the list.
Type declaration
▸ (index
): void
Parameters
Name | Type |
---|---|
index | number |
Returns
void
rangeChanged
• Optional
rangeChanged: (range
: ListRange
) => void
Called with the new set of items each time the list items are rendered due to scrolling.
Type declaration
▸ (range
): void
Parameters
Name | Type |
---|---|
range | ListRange |
Returns
void
stateChanged
• Optional
stateChanged: (state
: GridStateSnapshot
) => 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.
Type declaration
▸ (state
): void
Parameters
Name | Type |
---|---|
state | GridStateSnapshot |
Returns
void
restoreStateFrom
• Optional
restoreStateFrom: GridStateSnapshot
atBottomStateChange
• Optional
atBottomStateChange: (atBottom
: boolean
) => 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
.
Type declaration
▸ (atBottom
): void
Parameters
Name | Type |
---|---|
atBottom | boolean |
Returns
void
atTopStateChange
• Optional
atTopStateChange: (atTop
: boolean
) => void
Called with true
/ false
when the list has reached the top / gets scrolled down.
Type declaration
▸ (atTop
): void
Parameters
Name | Type |
---|---|
atTop | boolean |
Returns
void
scrollerRef
• Optional
scrollerRef: (ref
: HTMLElement
) => any
Provides access to the root DOM element
Type declaration
▸ (ref
): any
Parameters
Name | Type |
---|---|
ref | HTMLElement |
Returns
any
listClassName
• Optional
listClassName: string
Sets the className for the list DOM element
itemClassName
• Optional
itemClassName: string
Sets the grid items' className
useWindowScroll
• Optional
useWindowScroll: boolean
Uses the document scroller rather than wrapping the grid in its own.
customScrollParent
• Optional
customScrollParent: HTMLElement
Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.
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.
initialTopMostItemIndex
• Optional
initialTopMostItemIndex: GridIndexLocation
readyStateChanged
• Optional
readyStateChanged: (ready
: boolean
) => void
invoked with true after the grid has done the initial render and the items have been measured.
Type declaration
▸ (ready
): void
Parameters
Name | Type |
---|---|
ready | boolean |
Returns
void
className
• Optional
className: string
Inherited from
GridRootProps.className
type
• Optional
type: string
Inherited from
GridRootProps.type
label
• Optional
label: string
Inherited from
GridRootProps.label
id
• Optional
id: string
Inherited from
GridRootProps.id
href
• Optional
href: string
Inherited from
GridRootProps.href
title
• Optional
title: string
Inherited from
GridRootProps.title
name
• Optional
name: string
Inherited from
GridRootProps.name
kind
• Optional
kind: string
Inherited from
GridRootProps.kind
style
• Optional
style: CSSProperties
Inherited from
GridRootProps.style
alt
• Optional
alt: string
Inherited from
GridRootProps.alt
src
• Optional
src: string
Inherited from
GridRootProps.src
width
• Optional
width: string
| number
Inherited from
GridRootProps.width
height
• Optional
height: string
| number
Inherited from
GridRootProps.height
target
• Optional
target: string
Inherited from
GridRootProps.target
color
• Optional
color: string
Inherited from
GridRootProps.color
value
• Optional
value: string
| number
| readonly string
[]
Inherited from
GridRootProps.value
children
• Optional
children: ReactNode
Inherited from
GridRootProps.children
cite
• Optional
cite: string
Inherited from
GridRootProps.cite
form
• Optional
form: string
Inherited from
GridRootProps.form
slot
• Optional
slot: string
Inherited from
GridRootProps.slot
span
• Optional
span: number
Inherited from
GridRootProps.span
summary
• Optional
summary: string
Inherited from
GridRootProps.summary
pattern
• Optional
pattern: string
Inherited from
GridRootProps.pattern
as
• Optional
as: string
Inherited from
GridRootProps.as
sandbox
• Optional
sandbox: string
Inherited from
GridRootProps.sandbox
key
• Optional
key: Key
Inherited from
GridRootProps.key
start
• Optional
start: number
Inherited from
GridRootProps.start
onClick
• Optional
onClick: MouseEventHandler
<HTMLDivElement
>
Inherited from
GridRootProps.onClick
tabIndex
• Optional
tabIndex: number
Inherited from
GridRootProps.tabIndex
accept
• Optional
accept: string
Inherited from
GridRootProps.accept
acceptCharset
• Optional
acceptCharset: string
Inherited from
GridRootProps.acceptCharset
action
• Optional
action: string
Inherited from
GridRootProps.action
allowFullScreen
• Optional
allowFullScreen: boolean
Inherited from
GridRootProps.allowFullScreen
allowTransparency
• Optional
allowTransparency: boolean
Inherited from
GridRootProps.allowTransparency
async
• Optional
async: boolean
Inherited from
GridRootProps.async
autoComplete
• Optional
autoComplete: string
Inherited from
GridRootProps.autoComplete
autoPlay
• Optional
autoPlay: boolean
Inherited from
GridRootProps.autoPlay
capture
• Optional
capture: boolean
| "environment"
| "user"
Inherited from
GridRootProps.capture
cellPadding
• Optional
cellPadding: string
| number
Inherited from
GridRootProps.cellPadding
cellSpacing
• Optional
cellSpacing: string
| number
Inherited from
GridRootProps.cellSpacing
charSet
• Optional
charSet: string
Inherited from
GridRootProps.charSet
challenge
• Optional
challenge: string
Inherited from
GridRootProps.challenge
checked
• Optional
checked: boolean
Inherited from
GridRootProps.checked
classID
• Optional
classID: string
Inherited from
GridRootProps.classID
cols
• Optional
cols: number
Inherited from
GridRootProps.cols
colSpan
• Optional
colSpan: number
Inherited from
GridRootProps.colSpan
controls
• Optional
controls: boolean
Inherited from
GridRootProps.controls
coords
• Optional
coords: string
Inherited from
GridRootProps.coords
crossOrigin
• Optional
crossOrigin: CrossOrigin
Inherited from
GridRootProps.crossOrigin
dateTime
• Optional
dateTime: string
Inherited from
GridRootProps.dateTime
default
• Optional
default: boolean
Inherited from
GridRootProps.default
defer
• Optional
defer: boolean
Inherited from
GridRootProps.defer
disabled
• Optional
disabled: boolean
Inherited from
GridRootProps.disabled
download
• Optional
download: any
Inherited from
GridRootProps.download
encType
• Optional
encType: string
Inherited from
GridRootProps.encType
formAction
• Optional
formAction: string
Inherited from
GridRootProps.formAction
formEncType
• Optional
formEncType: string
Inherited from
GridRootProps.formEncType
formMethod
• Optional
formMethod: string
Inherited from
GridRootProps.formMethod
formNoValidate
• Optional
formNoValidate: boolean
Inherited from
GridRootProps.formNoValidate
formTarget
• Optional
formTarget: string
Inherited from
GridRootProps.formTarget
frameBorder
• Optional
frameBorder: string
| number
Inherited from
GridRootProps.frameBorder
headers
• Optional
headers: string
Inherited from
GridRootProps.headers
high
• Optional
high: number
Inherited from
GridRootProps.high
hrefLang
• Optional
hrefLang: string
Inherited from
GridRootProps.hrefLang
htmlFor
• Optional
htmlFor: string
Inherited from
GridRootProps.htmlFor
httpEquiv
• Optional
httpEquiv: string
Inherited from
GridRootProps.httpEquiv
integrity
• Optional
integrity: string
Inherited from
GridRootProps.integrity
keyParams
• Optional
keyParams: string
Inherited from
GridRootProps.keyParams
keyType
• Optional
keyType: string
Inherited from
GridRootProps.keyType
list
• Optional
list: string
Inherited from
GridRootProps.list
loop
• Optional
loop: boolean
Inherited from
GridRootProps.loop
low
• Optional
low: number
Inherited from
GridRootProps.low
manifest
• Optional
manifest: string
Inherited from
GridRootProps.manifest
marginHeight
• Optional
marginHeight: number
Inherited from
GridRootProps.marginHeight
marginWidth
• Optional
marginWidth: number
Inherited from
GridRootProps.marginWidth
max
• Optional
max: string
| number
Inherited from
GridRootProps.max
maxLength
• Optional
maxLength: number
Inherited from
GridRootProps.maxLength
media
• Optional
media: string
Inherited from
GridRootProps.media
mediaGroup
• Optional
mediaGroup: string
Inherited from
GridRootProps.mediaGroup
method
• Optional
method: string
Inherited from
GridRootProps.method
min
• Optional
min: string
| number
Inherited from
GridRootProps.min
minLength
• Optional
minLength: number
Inherited from
GridRootProps.minLength
multiple
• Optional
multiple: boolean
Inherited from
GridRootProps.multiple
muted
• Optional
muted: boolean
Inherited from
GridRootProps.muted
noValidate
• Optional
noValidate: boolean
Inherited from
GridRootProps.noValidate
open
• Optional
open: boolean
Inherited from
GridRootProps.open
optimum
• Optional
optimum: number
Inherited from
GridRootProps.optimum
placeholder
• Optional
placeholder: string
Inherited from
GridRootProps.placeholder
playsInline
• Optional
playsInline: boolean
Inherited from
GridRootProps.playsInline
poster
• Optional
poster: string
Inherited from
GridRootProps.poster
preload
• Optional
preload: string
Inherited from
GridRootProps.preload
readOnly
• Optional
readOnly: boolean
Inherited from
GridRootProps.readOnly
required
• Optional
required: boolean
Inherited from
GridRootProps.required
reversed
• Optional
reversed: boolean
Inherited from
GridRootProps.reversed
rows
• Optional
rows: number
Inherited from
GridRootProps.rows
rowSpan
• Optional
rowSpan: number
Inherited from
GridRootProps.rowSpan
scope
• Optional
scope: string
Inherited from
GridRootProps.scope
scoped
• Optional
scoped: boolean
Inherited from
GridRootProps.scoped