Interface: TableVirtuosoProps<D, C>
Type parameters
Name |
---|
D |
C |
Hierarchy
-
Omit
<VirtuosoProps
<D
,C
>,"components"
|"headerFooterTag"
>↳
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
topItemCount
• Optional
topItemCount: number
Set the amount of items to remain fixed at the top of the table.
Overrides
Omit.topItemCount
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
| IndexLocationWithAlign
Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
Pass in an object to achieve additional effects similar to scrollToIndex
.
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