Components
Cell(
__namedParameters):null
Declares the cell renderer for the current column.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
__namedParameters | Props |
Returns
Section titled “Returns”null
CellRenderFunction
Section titled “CellRenderFunction”CellRenderFunction = (
params) =>ReactNode
The render function used by a cell definition.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
params | CellRenderParams |
Returns
Section titled “Returns”ReactNode
CellRenderParams
Section titled “CellRenderParams”The parameters passed to a cell renderer.
Properties
Section titled “Properties”cellValue
Section titled “cellValue”unknown
column
Section titled “column”columnKey
Section titled “columnKey”string
columnState
Section titled “columnState”overlaidByScrollbar
Section titled “overlaidByScrollbar”boolean
Row<unknown>
Column
Section titled “Column”Column(
__namedParameters):Element
Declares a visible column in the table.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
__namedParameters | Props |
Returns
Section titled “Returns”Element
ColumnGroup
Section titled “ColumnGroup”ColumnGroup(
__namedParameters):Element
Groups related columns under a shared header.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
__namedParameters | Props |
Returns
Section titled “Returns”Element
ColumnGroupHeader
Section titled “ColumnGroupHeader”ColumnGroupHeader(
props):null
Declares the header renderer for the current column group.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
props | Props |
Returns
Section titled “Returns”null
ColumnGroupHeaderCustomComponent
Section titled “ColumnGroupHeaderCustomComponent”ColumnGroupHeaderCustomComponent =
React.ComponentType<ColumnGroupHeaderRenderParams>
A React component variant for a column group header.
ColumnGroupHeaderRenderFunction
Section titled “ColumnGroupHeaderRenderFunction”ColumnGroupHeaderRenderFunction = (
params) =>ReactNode
The render function used by a column group header.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
params | ColumnGroupHeaderRenderParams |
Returns
Section titled “Returns”ReactNode
ColumnGroupHeaderRenderParams
Section titled “ColumnGroupHeaderRenderParams”The parameters passed to a column group header renderer.
Properties
Section titled “Properties”columnKeys
Section titled “columnKeys”string[]
groupId
Section titled “groupId”string
totalWidth
Section titled “totalWidth”number
ColumnGroupInfo
Section titled “ColumnGroupInfo”Describes a registered column group.
Properties
Section titled “Properties”childColumnIds
Section titled “childColumnIds”string[]
childGroupIds
Section titled “childGroupIds”string[]
number
string
parentGroupId?: string
Section titled “parentGroupId?: string”sticky?: "left" | "right"
Section titled “sticky?: "left" | "right"”ColumnHeader
Section titled “ColumnHeader”ColumnHeader(
props):ReactElement<unknown,string|JSXElementConstructor<any>>[] |null
Declares the header renderer for the current column.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
props | Props |
Returns
Section titled “Returns”ReactElement<unknown, string | JSXElementConstructor<any>>[] | null
ColumnHeaderCustomComponent
Section titled “ColumnHeaderCustomComponent”ColumnHeaderCustomComponent =
React.ComponentType<ColumnHeaderRenderParams>
A React component variant for a column header.
ColumnHeaderRenderFunction
Section titled “ColumnHeaderRenderFunction”ColumnHeaderRenderFunction = (
params) =>ReactNode
The render function used by a column header.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
params | ColumnHeaderRenderParams |
Returns
Section titled “Returns”ReactNode
ColumnHeaderRenderParams
Section titled “ColumnHeaderRenderParams”The parameters passed to a column header renderer.
Properties
Section titled “Properties”column
Section titled “column”columnKey
Section titled “columnKey”string
columnState
Section titled “columnState”overlaidByScrollbar
Section titled “overlaidByScrollbar”boolean
ColumnInfo
Section titled “ColumnInfo”Describes a registered column in the table.
Extended by
Section titled “Extended by”Properties
Section titled “Properties”string
groupId?: string
Section titled “groupId?: string”sticky?: "left" | "right"
Section titled “sticky?: "left" | "right"”visible?: boolean
Section titled “visible?: boolean”DynamicColumns
Section titled “DynamicColumns”DynamicColumns<
Row,Group>(__namedParameters):Element
Declares columns from the table’s first non-empty data result.
DynamicColumns renders nothing until the table captures data, then calls
its render function with stable data and model references for the current
table engine lifetime. The render function follows normal React render
semantics and may be called again if React re-renders this component.
To discover columns again, remount the table by changing the key on
VirtuosoDataTable.
Type Parameters
Section titled “Type Parameters”| Type Parameter | Default type |
|---|---|
Row | - |
Group | never |
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
__namedParameters | DynamicColumnsProps<Row, Group> |
Returns
Section titled “Returns”Element
DynamicColumnsProps
Section titled “DynamicColumnsProps”The properties accepted by the DynamicColumns component.
Type Parameters
Section titled “Type Parameters”| Type Parameter | Default type |
|---|---|
Row | - |
Group | never |
Properties
Section titled “Properties”children()
Section titled “children()”children: (
params) =>ReactNode
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
params | DynamicColumnsRenderParams<Row, Group> |
Returns
Section titled “Returns”ReactNode
DynamicColumnsRenderParams
Section titled “DynamicColumnsRenderParams”The parameters passed to the DynamicColumns render function after the
table captures its first non-empty data result.
Type Parameters
Section titled “Type Parameters”| Type Parameter | Default type |
|---|---|
Row | - |
Group | never |
Properties
Section titled “Properties”data: readonly (
Row|Group)[]
DataModelHandle<Row | Group>
GroupHeaderCell
Section titled “GroupHeaderCell”GroupHeaderCell(
props):null
Declares the renderer used for group header rows.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
props | Props |
Returns
Section titled “Returns”null
GroupHeaderCustomComponent
Section titled “GroupHeaderCustomComponent”GroupHeaderCustomComponent =
React.ComponentType<GroupHeaderRenderParams>
A React component variant for a group header row.
GroupHeaderRenderFunction
Section titled “GroupHeaderRenderFunction”GroupHeaderRenderFunction = (
params) =>ReactNode
The render function used by a group header row.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
params | GroupHeaderRenderParams |
Returns
Section titled “Returns”ReactNode
GroupHeaderRenderParams
Section titled “GroupHeaderRenderParams”The parameters passed to a group header renderer.
Properties
Section titled “Properties”number
Row<unknown>
The properties accepted by the Cell component.
Properties
Section titled “Properties”children
Section titled “children”className?: string
Section titled “className?: string”The properties accepted by the Column component.
Extends
Section titled “Extends”Properties
Section titled “Properties”children?: ReactNode
Section titled “children?: ReactNode”string
Inherited from
Section titled “Inherited from”groupId?: string
Section titled “groupId?: string”Inherited from
Section titled “Inherited from”sticky?: "left" | "right"
Section titled “sticky?: "left" | "right"”Overrides
Section titled “Overrides”visible?: boolean
Section titled “visible?: boolean”Overrides
Section titled “Overrides”The properties accepted by the ColumnGroup component.
Properties
Section titled “Properties”children?: ReactNode
Section titled “children?: ReactNode”sticky?: "left" | "right"
Section titled “sticky?: "left" | "right"”Props = {
children:ColumnGroupHeaderRenderFunction;className?:string; } | {className?:string;component:ColumnGroupHeaderCustomComponent; }
The properties accepted by the ColumnGroupHeader component.
Props = {
children?:ColumnHeaderChildren;className?:string; } | {className?:string;component:ColumnHeaderCustomComponent; }
The properties accepted by the ColumnHeader component.
Props = {
children:GroupHeaderRenderFunction;className?:string; } | {className?:string;component:GroupHeaderCustomComponent; }
The properties accepted by the GroupHeaderCell component.
ScrollerProps
Section titled “ScrollerProps”ScrollerProps =
Omit<React.HTMLProps<HTMLDivElement>,"ref"|"data"|"onScroll">
The DOM attributes that you can pass to the VirtuosoDataTable component to customize the scroll element.
VirtuosoDataTableProps
Section titled “VirtuosoDataTableProps”The properties accepted by the VirtuosoDataTable component.
In addition to the properties listed here, you can pass any other props that are accepted by a div element. They will be passed to the root div element used for the scroll.
Extends
Section titled “Extends”Type Parameters
Section titled “Type Parameters”| Type Parameter | Default type | Description |
|---|---|---|
Data | - | The type of the data items in the table. |
Context | - | The type of the context passed to the table. |
Group | unknown | - |
Properties
Section titled “Properties”children?: ReactNode
Section titled “children?: ReactNode”Any children passed to the component.
Overrides
Section titled “Overrides”ScrollerProps.children
columnOverscanCount?: number
Section titled “columnOverscanCount?: number”The number of extra columns to render on each side of the visible columns. Useful for smooth horizontal scrolling. Defaults to 0 (no overscan).
components?: NoInfer<DataTableComponents<Context>>
Section titled “components?: NoInfer<DataTableComponents<Context>>”Component overrides for internal DOM elements like rows, sticky headers, and sticky column containers. See DataTableComponents for available slots.
computeRowKey?
Section titled “computeRowKey?”
optionalcomputeRowKey:NoInfer<(params) =>Key>
Computes the value for the React key prop for the item at the specified index. Use stable, unique keys to avoid rendering issues.
The parameters to compute the key.
context?: Context
Section titled “context?: Context”Any additional state that you need to use in the ItemContent, EmptyPlaceholder, etc.
customScrollParent?: HTMLElement | null
Section titled “customScrollParent?: HTMLElement | null”Pass an HTML element to use as the scroll element. This is useful when you want to include additional content in the scrollable area, or if you want to use a complex custom scroll component.
EmptyPlaceholder?: NoInfer<ContextAwareComponent<Context>>
Section titled “EmptyPlaceholder?: NoInfer<ContextAwareComponent<Context>>”An optional React component to render when the table has zero data items.
engineId?: string
Section titled “engineId?: string”Optional stable engine ID for remote access via useRemote* hooks.
When provided, sibling or ancestor components can read from and publish to the table engine using this ID.
engineRef?: EngineRef
Section titled “engineRef?: EngineRef”Optional reactive ref to expose the table engine instance.
Create it with useEngineRef() and use it with useRemote* hooks from outside the table tree.
increaseViewportBy?: number
Section titled “increaseViewportBy?: number”Artificially extends the viewport size in both directions, causing more items to be rendered.
Useful if you have relatively heavy items or want images to be loaded before the user scrolls to them.
For example, setting the value to 100 would increase the viewport in both directions by 100 pixels, causing more items to be rendered.
initialLocation?: RowLocation
Section titled “initialLocation?: RowLocation”The initial location to scroll to. It will be applied the first time the table is rendered with data. Using this property allows you to skip rendering of the items at the top of the table.
DataModelHandle<Data | Group>
A data model handle that provides data to the table through a message-exchange protocol.
onRenderedDataChange()?
Section titled “onRenderedDataChange()?”
optionalonRenderedDataChange: (range) =>void
A callback that’s invoked when the currently visible items change
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
range | Data[] |
Returns
Section titled “Returns”void
onScroll()?
Section titled “onScroll()?”
optionalonScroll: (location) =>void
A callback that’s invoked when the table is scrolled. See ListScrollLocation for the details of the parameter received.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
location | ListScrollLocation |
Returns
Section titled “Returns”void
ScrollElement?: NoInfer<ScrollElementComponent<Context>>
Section titled “ScrollElement?: NoInfer<ScrollElementComponent<Context>>”An optional React component to replace the default scroller element. The default value is a div element.
useWindowScroll?: boolean
Section titled “useWindowScroll?: boolean”Set to true to make the table use the document scroller rather than wrapping in its own.