DevExtremeReactive
Version 2.7.4DemosDocsBlogGitHubBuy

VirtualTable Plugin Reference

A plugin that renders a scrollable table instead of a static table. Contains the VirtualTable.Row and VirtualTable.Cell components that provide ways to customize virtual table rows and columns. These components can be extended by other plugins.

Import

Use the following statement to import a plugin with embedded theme components:

import { VirtualTable } from '@devexpress/dx-react-grid-material-ui';
// import { VirtualTable } from '@devexpress/dx-react-grid-bootstrap4';
// import { VirtualTable } from '@devexpress/dx-react-grid-bootstrap3';

User Reference

Dependencies

Properties

Name Type Default Description
height number | string 530 The virtual table's height.
estimatedRowHeight number 49 for Bootstrap4; 37 for Bootstrap; 53 for Material-UI Estimated row height. Specify the average value for a table whose rows have different heights.
columnExtensions? Array<VirtualTable.ColumnExtension> Additional column properties that the plugin can handle.
tableComponent ComponentType<object> A component that renders a table.
headComponent ComponentType<object> A component that renders a table head.
bodyComponent ComponentType<object> A component that renders a table body.
footerComponent ComponentType<object> A component that renders a table footer.
containerComponent ComponentType<object> A component that renders a table's container.
cellComponent ComponentType<Table.DataCellProps> A component that renders a table cell.
rowComponent ComponentType<Table.DataRowProps> A component that renders a table row.
noDataCellComponent ComponentType<Table.NoDataCellProps> A component that renders a table cell when the table is empty.
noDataRowComponent ComponentType<Table.RowProps> A component that renders a table row when the table is empty.
stubRowComponent ComponentType<Table.RowProps> A component that renders a stub table row if the row type is not recognized.
stubCellComponent ComponentType<Table.CellProps> A component that renders a stub table cell if the cell value is not provided.
stubHeaderCellComponent ComponentType<Table.CellProps> A component that renders a stub header cell if the cell value is not provided.
messages? Table.LocalizationMessages An object that specifies the localization messages.
onTopRowChange? (rowId: number | string) => void Handles a change of the top row.
ref? React.RefObject<typeof VirtualTable> A reference to the VirtualTable instance

Methods

Name Type Description
scrollToRow (rowId: number | string) => void Scrolls table to a row with the specified ID.

Interfaces

VirtualTable.ColumnExtension

Describes additional column properties that the plugin can handle.

Field Type Description
columnName string The name of the column to extend.
width? number | string The table column width in pixels. Can be specified using numeric (for example, 10) or string values (10px).
align? 'left' | 'right' | 'center' The table column alignment.
wordWrapEnabled? boolean Specifies whether word wrap is enabled in a column's cells.

Plugin Components

Name Properties Description
VirtualTable.Table object A component that renders a table.
VirtualTable.TableHead object A component that renders a table head.
VirtualTable.TableBody object A component that renders a table body.
VirtualTable.Container object A component that renders a table's container.
VirtualTable.Cell Table.DataCellProps Renders a table data cell.
VirtualTable.Row Table.DataRowProps Renders a table data row.
VirtualTable.NoDataCell Table.CellProps Renders a table cell when the table is empty.
VirtualTable.NoDataRow Table.RowProps Renders a table row when the table is empty.
VirtualTable.StubRow Table.RowProps A component that renders a stub table row.
VirtualTable.StubCell Table.CellProps Renders a stub table cell.
VirtualTable.StubHeaderCell Table.CellProps Renders a stub table header cell.

Additional properties are added to the component's root element.

Static Fields

Field Type Description
COLUMN_TYPE symbol The data column type's indentifier.
ROW_TYPE symbol The data row type's indentifier.
NODATAROWTYPE symbol The nodata row type's indentifier.
TOP_POSITION symbol The top position of the table. Used in scrolling.
BOTTOM_POSITION symbol The bottom position of the table. Used in scrolling.

Plugin Developer Reference

Imports

Name Plugin Type Description
rows Getter Array<any> Rows to be rendered by the virtual table view.
columns Getter Array<Column> Columns the virtual table view should render.
getRowId Getter (row: any) => number | string A function used to get a unique row identifier.
getCellValue Getter (row: any, columnName: string) => any A function used to get a cell’s value.

Exports

Name Plugin Type Description
tableHeaderRows Getter Array<TableRow> Header rows to be rendered.
tableBodyRows Getter Array<TableRow> Body rows to be rendered.
tableFooterRows Getter Array<TableRow> Footer rows to be rendered.
tableColumns Getter Array<TableColumn> Columns to be rendered.
table Template object? A template that renders the virtual table.
tableCell Template Table.CellProps A template that renders a virtual table cell.
tableRow Template Table.RowProps A template that renders a virtual table row.

Grid

Chart

Scheduler

Common Concepts

Core