Interface: TableVirtuosoProps<D, C>
Type parameters
Name |
---|
D |
C |
Hierarchy
-
Omit
<VirtuosoProps
<D
,C
>,"components"
|"headerFooterTag"
|"topItemCount"
>↳
TableVirtuosoProps
Properties
components
• Optional
components: TableComponents
<D
, C
>
Use the components
property for advanced customization of the elements rendered by the table.
fixedHeaderContent
• Optional
fixedHeaderContent: () => ReactNode
Set the contents of the table header.
Type declaration
▸ (): ReactNode
Returns
ReactNode
fixedFooterContent
• Optional
fixedFooterContent: () => ReactNode
Set the contents of the table footer.
Type declaration
▸ (): ReactNode
Returns
ReactNode
totalCount
• Optional
totalCount: number
The total amount of items to be rendered.
Overrides
Omit.totalCount
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.
Overrides
Omit.data
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 list in both the main and the reverse scrollable directions.
See the increaseViewportBy
property for a similar behavior (equivalent to the overscan
in react-window
).
Overrides
Omit.overscan
increaseViewportBy
• Optional
increaseViewportBy: number
| { top
: number
; bottom
: number
}
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.
Overrides
Omit.increaseViewportBy
initialTopMostItemIndex
• Optional
initialTopMostItemIndex: number
Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
Overrides
Omit.initialTopMostItemIndex
initialScrollTop
• Optional
initialScrollTop: number
Set this value to offset the initial location of the list.
Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
If possible, avoid using it and stick to initialTopMostItemIndex
instead.
Overrides
Omit.initialScrollTop
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.
Overrides
Omit.initialItemCount
itemContent
• Optional
itemContent: ItemContent
<D
, C
>
Set the callback to specify the contents of the item.
Overrides
Omit.itemContent
computeItemKey
• Optional
computeItemKey: ComputeItemKey
<D
, C
>
If specified, the component will use the function to generate the key
property for each list item.
Overrides
Omit.computeItemKey
defaultItemHeight
• Optional
defaultItemHeight: number
By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
If the first item turns out to be an outlier (very short or tall), the rest of the rendering will be slower, as multiple passes of rendering should happen for the list to fill the viewport.
Setting defaultItemHeight
causes the component to skip the "probe" rendering and use the property
value as default height instead.
Overrides
Omit.defaultItemHeight
itemSize
• Optional
itemSize: SizeFunction
Allows customizing the height/width calculation of Item
elements.
The default implementation reads el.getBoundingClientRect().height
and el.getBoundingClientRect().width
.
Overrides
Omit.itemSize
fixedItemHeight
• Optional
fixedItemHeight: number
Can be used to improve performance if the rendered items are of known size. Setting it causes the component to skip item measurements.
Overrides
Omit.fixedItemHeight
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.
Overrides
Omit.scrollSeekConfiguration
followOutput
• Optional
followOutput: FollowOutput
If set to true
, the list automatically scrolls to bottom if the total count is changed.
Set to "smooth"
for an animated scrolling.
By default, followOutput
scrolls down only if the list is already at the bottom.
To implement an arbitrary logic behind that, pass a function:
<Virtuoso
followOutput={(isAtBottom: boolean) => {
if (expression) {
return 'smooth' // can be 'auto' or false to avoid scrolling
} else {
return false
}
}} />
Overrides
Omit.followOutput
firstItemIndex
• Optional
firstItemIndex: number
Use when implementing inverse infinite scrolling - decrease the value this property
in combination with data
or totalCount
to prepend items to the top of the list.
Warning: the firstItemIndex should be a positive number, based on the total amount of items to be displayed.
Overrides
Omit.firstItemIndex
isScrolling
• Optional
isScrolling: (isScrolling
: boolean
) => void
Called when the list starts/stops scrolling.
Type declaration
▸ (isScrolling
): void
Parameters
Name | Type |
---|---|
isScrolling | boolean |
Returns
void
Overrides
Omit.isScrolling
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
Overrides
Omit.endReached
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
Overrides
Omit.startReached
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
Overrides
Omit.rangeChanged
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
Overrides
Omit.atBottomStateChange
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
Overrides
Omit.atTopStateChange
totalListHeightChanged
• Optional
totalListHeightChanged: (height
: number
) => void
Called when the total list height is changed due to new items or viewport resize.
Type declaration
▸ (height
): void
Parameters
Name | Type |
---|---|
height | number |
Returns
void
Overrides
Omit.totalListHeightChanged
itemsRendered
• Optional
itemsRendered: (items
: ListItem
<D
>[]) => void
Called with the new set of items each time the list items are rendered due to scrolling.
Type declaration
▸ (items
): void
Parameters
Name | Type |
---|---|
items | ListItem <D >[] |
Returns
void
Overrides
Omit.itemsRendered
alignToBottom
• Optional
alignToBottom: boolean
Setting alignToBottom
to true
aligns the items to the bottom of the list if the list is shorter than the viewport.
Use followOutput
property to keep the list aligned when new items are appended.
Overrides
Omit.alignToBottom
useWindowScroll
• Optional
useWindowScroll: boolean
Uses the document scroller rather than wrapping the list in its own.
Overrides
Omit.useWindowScroll
customScrollParent
• Optional
customScrollParent: HTMLElement
Pass a reference to a scrollable parent element, so that the table won't wrap in its own.
Overrides
Omit.customScrollParent
scrollerRef
• Optional
scrollerRef: (ref
: HTMLElement
| Window
) => any
Provides access to the root DOM element
Type declaration
▸ (ref
): any
Parameters
Name | Type |
---|---|
ref | HTMLElement | Window |
Returns
any
Overrides
Omit.scrollerRef
atTopThreshold
• Optional
atTopThreshold: number
By default 0
. Redefine to change how much away from the top the scroller can be before the list is not considered not at top.
Overrides
Omit.atTopThreshold
atBottomThreshold
• Optional
atBottomThreshold: number
By default 4
. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom.
Overrides
Omit.atBottomThreshold
restoreStateFrom
• Optional
restoreStateFrom: StateSnapshot
pass a state obtained from the getState() method to restore the list state - this includes the previously measured item sizes and the scroll location. Notice that you should still pass the same data and totalCount properties as before, so that the list can match the data with the stored measurements. This is useful when you want to keep the list state when the component is unmounted and remounted, for example when navigating to a different page.
Overrides
Omit.restoreStateFrom
className
• Optional
className: string
Inherited from
Omit.className
type
• Optional
type: string
Inherited from
Omit.type
label
• Optional
label: string
Inherited from
Omit.label
id
• Optional
id: string
Inherited from
Omit.id
href
• Optional
href: string
Inherited from
Omit.href
title
• Optional
title: string
Inherited from
Omit.title
kind
• Optional
kind: string
Inherited from
Omit.kind
style
• Optional
style: CSSProperties
Inherited from
Omit.style
alt
• Optional
alt: string
Inherited from
Omit.alt
src
• Optional
src: string
Inherited from
Omit.src
width
• Optional
width: string
| number
Inherited from
Omit.width
height
• Optional
height: string
| number
Inherited from
Omit.height
target
• Optional
target: string
Inherited from
Omit.target
color
• Optional
color: string
Inherited from
Omit.color
value
• Optional
value: string
| number
| readonly string
[]
Inherited from
Omit.value
children
• Optional
children: ReactNode
Inherited from
Omit.children
cite
• Optional
cite: string
Inherited from
Omit.cite
form
• Optional
form: string
Inherited from
Omit.form
slot
• Optional
slot: string
Inherited from
Omit.slot
span
• Optional
span: number
Inherited from
Omit.span
summary
• Optional
summary: string
Inherited from
Omit.summary
pattern
• Optional
pattern: string
Inherited from
Omit.pattern
as
• Optional
as: string
Inherited from
Omit.as
sandbox
• Optional
sandbox: string
Inherited from
Omit.sandbox
key
• Optional
key: Key
Inherited from
Omit.key
start
• Optional
start: number
Inherited from
Omit.start
onClick
• Optional
onClick: MouseEventHandler
<HTMLDivElement
>
Inherited from
Omit.onClick
tabIndex
• Optional
tabIndex: number
Inherited from
Omit.tabIndex
accept
• Optional
accept: string
Inherited from
Omit.accept
acceptCharset
• Optional
acceptCharset: string
Inherited from
Omit.acceptCharset
action
• Optional
action: string
Inherited from
Omit.action
allowFullScreen
• Optional
allowFullScreen: boolean
Inherited from
Omit.allowFullScreen
allowTransparency
• Optional
allowTransparency: boolean
Inherited from
Omit.allowTransparency
async
• Optional
async: boolean
Inherited from
Omit.async
autoComplete
• Optional
autoComplete: string
Inherited from
Omit.autoComplete
autoPlay
• Optional
autoPlay: boolean
Inherited from
Omit.autoPlay
capture
• Optional
capture: boolean
| "environment"
| "user"
Inherited from
Omit.capture
cellPadding
• Optional
cellPadding: string
| number
Inherited from
Omit.cellPadding
cellSpacing
• Optional
cellSpacing: string
| number
Inherited from
Omit.cellSpacing
charSet
• Optional
charSet: string
Inherited from
Omit.charSet
challenge
• Optional
challenge: string
Inherited from
Omit.challenge
checked
• Optional
checked: boolean
Inherited from
Omit.checked
classID
• Optional
classID: string
Inherited from
Omit.classID
cols
• Optional
cols: number
Inherited from
Omit.cols
colSpan
• Optional
colSpan: number
Inherited from
Omit.colSpan
controls
• Optional
controls: boolean
Inherited from
Omit.controls
coords
• Optional
coords: string
Inherited from
Omit.coords
crossOrigin
• Optional
crossOrigin: CrossOrigin
Inherited from
Omit.crossOrigin
dateTime
• Optional
dateTime: string
Inherited from
Omit.dateTime
default
• Optional
default: boolean
Inherited from
Omit.default
defer
• Optional
defer: boolean
Inherited from
Omit.defer
disabled
• Optional
disabled: boolean
Inherited from
Omit.disabled
download
• Optional
download: any
Inherited from
Omit.download
encType
• Optional
encType: string
Inherited from
Omit.encType
formAction
• Optional
formAction: string
Inherited from
Omit.formAction
formEncType
• Optional
formEncType: string
Inherited from
Omit.formEncType
formMethod
• Optional
formMethod: string
Inherited from
Omit.formMethod
formNoValidate
• Optional
formNoValidate: boolean
Inherited from
Omit.formNoValidate
formTarget
• Optional
formTarget: string
Inherited from
Omit.formTarget
frameBorder
• Optional
frameBorder: string
| number
Inherited from
Omit.frameBorder
headers
• Optional
headers: string
Inherited from
Omit.headers
high
• Optional
high: number
Inherited from
Omit.high
hrefLang
• Optional
hrefLang: string
Inherited from
Omit.hrefLang
htmlFor
• Optional
htmlFor: string
Inherited from
Omit.htmlFor
httpEquiv
• Optional
httpEquiv: string
Inherited from
Omit.httpEquiv
integrity
• Optional
integrity: string
Inherited from
Omit.integrity
keyParams
• Optional
keyParams: string
Inherited from
Omit.keyParams
keyType
• Optional
keyType: string
Inherited from
Omit.keyType
list
• Optional
list: string
Inherited from
Omit.list
loop
• Optional
loop: boolean
Inherited from
Omit.loop
low
• Optional
low: number
Inherited from
Omit.low
manifest
• Optional
manifest: string
Inherited from
Omit.manifest
marginHeight
• Optional
marginHeight: number
Inherited from
Omit.marginHeight
marginWidth
• Optional
marginWidth: number
Inherited from
Omit.marginWidth
max
• Optional
max: string
| number
Inherited from
Omit.max
maxLength
• Optional
maxLength: number
Inherited from
Omit.maxLength
media
• Optional
media: string
Inherited from
Omit.media
mediaGroup
• Optional
mediaGroup: string
Inherited from
Omit.mediaGroup
method
• Optional
method: string
Inherited from
Omit.method
min
• Optional
min: string
| number
Inherited from
Omit.min
minLength
• Optional
minLength: number
Inherited from
Omit.minLength
multiple
• Optional
multiple: boolean
Inherited from
Omit.multiple
muted
• Optional
muted: boolean
Inherited from
Omit.muted
name
• Optional
name: string
Inherited from
Omit.name
noValidate
• Optional
noValidate: boolean
Inherited from
Omit.noValidate
open
• Optional
open: boolean
Inherited from
Omit.open
optimum
• Optional
optimum: number
Inherited from
Omit.optimum
placeholder
• Optional
placeholder: string
Inherited from
Omit.placeholder
playsInline
• Optional
playsInline: boolean
Inherited from
Omit.playsInline
poster
• Optional
poster: string
Inherited from
Omit.poster
preload
• Optional
preload: string
Inherited from
Omit.preload
readOnly
• Optional
readOnly: boolean
Inherited from
Omit.readOnly
required
• Optional
required: boolean
Inherited from
Omit.required
reversed
• Optional
reversed: boolean
Inherited from
Omit.reversed
rows
• Optional
rows: number
Inherited from
Omit.rows
rowSpan
• Optional
rowSpan: number
Inherited from
Omit.rowSpan
scope
• Optional
scope: string
Inherited from
Omit.scope
scoped
• Optional
scoped: boolean
Inherited from
Omit.scoped
scrolling
• Optional
scrolling: string
Inherited from
Omit.scrolling
seamless
• Optional
seamless: boolean
Inherited from
Omit.seamless
selected
• Optional
selected: boolean
Inherited from
Omit.selected
shape
• Optional
shape: string
Inherited from
Omit.shape
size
• Optional
size: number
Inherited from
Omit.size
sizes
• Optional
sizes: string
Inherited from
Omit.sizes
srcDoc
• Optional
srcDoc: string
Inherited from
Omit.srcDoc
srcLang
• Optional
srcLang: string
Inherited from
Omit.srcLang
srcSet
• Optional
srcSet: string
Inherited from
Omit.srcSet
step
• Optional
step: string
| number
Inherited from
Omit.step
useMap
• Optional
useMap: string
Inherited from
Omit.useMap
wmode
• Optional
wmode: string
Inherited from
Omit.wmode
wrap
• Optional
wrap: string
Inherited from
Omit.wrap
defaultChecked
• Optional
defaultChecked: boolean
Inherited from
Omit.defaultChecked
defaultValue
• Optional
defaultValue: string
| number
| readonly string
[]
Inherited from
Omit.defaultValue
suppressContentEditableWarning
• Optional
suppressContentEditableWarning: boolean
Inherited from
Omit.suppressContentEditableWarning
suppressHydrationWarning
• Optional
suppressHydrationWarning: boolean
Inherited from
Omit.suppressHydrationWarning
accessKey
• Optional
accessKey: string
Inherited from
Omit.accessKey
autoFocus
• Optional
autoFocus: boolean
Inherited from
Omit.autoFocus
contentEditable
• Optional
contentEditable: "inherit"
| Booleanish
| "plaintext-only"
Inherited from
Omit.contentEditable
contextMenu
• Optional
contextMenu: string
Inherited from
Omit.contextMenu
dir
• Optional
dir: string
Inherited from
Omit.dir
draggable
• Optional
draggable: Booleanish
Inherited from
Omit.draggable
hidden
• Optional
hidden: boolean
Inherited from
Omit.hidden
lang
• Optional
lang: string
Inherited from
Omit.lang
nonce
• Optional
nonce: string
Inherited from
Omit.nonce
spellCheck
• Optional
spellCheck: Booleanish
Inherited from
Omit.spellCheck
translate
• Optional
translate: "yes"
| "no"
Inherited from
Omit.translate
radioGroup
• Optional
radioGroup: string
Inherited from
Omit.radioGroup
role
• Optional
role: AriaRole
Inherited from
Omit.role
about
• Optional
about: string
Inherited from
Omit.about
content
• Optional
content: string
Inherited from
Omit.content
datatype
• Optional
datatype: string
Inherited from
Omit.datatype
inlist
• Optional
inlist: any
Inherited from
Omit.inlist
prefix
• Optional
prefix: string
Inherited from
Omit.prefix
property
• Optional
property: string
Inherited from
Omit.property
rel
• Optional
rel: string
Inherited from
Omit.rel
resource
• Optional
resource: string
Inherited from
Omit.resource
rev
• Optional
rev: string
Inherited from
Omit.rev
typeof
• Optional
typeof: string
Inherited from
Omit.typeof
vocab
• Optional
vocab: string
Inherited from
Omit.vocab
autoCapitalize
• Optional
autoCapitalize: string
Inherited from
Omit.autoCapitalize
autoCorrect
• Optional
autoCorrect: string
Inherited from
Omit.autoCorrect
autoSave
• Optional
autoSave: string
Inherited from
Omit.autoSave
itemProp
• Optional
itemProp: string
Inherited from
Omit.itemProp
itemScope
• Optional
itemScope: boolean
Inherited from
Omit.itemScope
itemType
• Optional
itemType: string
Inherited from
Omit.itemType
itemID
• Optional
itemID: string
Inherited from
Omit.itemID
itemRef
• Optional
itemRef: string
Inherited from
Omit.itemRef
results
• Optional
results: number
Inherited from
Omit.results
security
• Optional
security: string
Inherited from
Omit.security
unselectable
• Optional
unselectable: "on"
| "off"
Inherited from
Omit.unselectable
inputMode
• Optional
inputMode: "url"
| "search"
| "none"
| "text"
| "tel"
| "email"
| "numeric"
| "decimal"
Hints at the type of data that might be entered by the user while editing the element or its contents
See
https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
Inherited from
Omit.inputMode
is
• Optional
is: string
Specify that a standard HTML element should behave like a defined custom built-in element
See
https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
Inherited from
Omit.is
aria-activedescendant
• Optional
aria-activedescendant: string
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
Inherited from
Omit.aria-activedescendant
aria-atomic
• Optional
aria-atomic: Booleanish
Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
Inherited from
Omit.aria-atomic
aria-autocomplete
• Optional
aria-autocomplete: "none"
| "list"
| "inline"
| "both"
Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
Inherited from
Omit.aria-autocomplete
aria-braillelabel
• Optional
aria-braillelabel: string
Defines a string value that labels the current element, which is intended to be converted into Braille.
See
aria-label.
Inherited from
Omit.aria-braillelabel
aria-brailleroledescription
• Optional
aria-brailleroledescription: string
Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
See
aria-roledescription.
Inherited from
Omit.aria-brailleroledescription
aria-busy
• Optional
aria-busy: Booleanish
Inherited from
Omit.aria-busy
aria-checked
• Optional
aria-checked: boolean
| "true"
| "false"
| "mixed"
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
See
- aria-pressed
- aria-selected.
Inherited from
Omit.aria-checked
aria-colcount
• Optional
aria-colcount: number
Defines the total number of columns in a table, grid, or treegrid.
See
aria-colindex.
Inherited from
Omit.aria-colcount
aria-colindex
• Optional
aria-colindex: number
Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
See
- aria-colcount
- aria-colspan.
Inherited from
Omit.aria-colindex
aria-colindextext
• Optional
aria-colindextext: string
Defines a human readable text alternative of aria-colindex.
See
aria-rowindextext.
Inherited from
Omit.aria-colindextext
aria-colspan
• Optional
aria-colspan: number
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
See
- aria-colindex
- aria-rowspan.
Inherited from
Omit.aria-colspan
aria-controls
• Optional
aria-controls: string
Identifies the element (or elements) whose contents or presence are controlled by the current element.
See
aria-owns.
Inherited from
Omit.aria-controls
aria-current
• Optional
aria-current: boolean
| "time"
| "step"
| "true"
| "false"
| "page"
| "location"
| "date"
Indicates the element that represents the current item within a container or set of related elements.
Inherited from
Omit.aria-current