DevExtremeReactive
Version 2.7.4DemosDocsBlogGitHubBuy

Table Plugin Reference

A plugin that renders Grid data as a table. This plugin enables you to customize table rows and columns, and contains the Table Row and Table Cell components that can be extended by other plugins

Import

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

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

If you want to use custom components, you can import the themeless plugin:

import { Table } from '@devexpress/dx-react-grid';

User Reference

Dependencies

Properties

Name Type Default Description
columnExtensions? Array<Table.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.

Interfaces

Table.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 or CSS-accepted units (auto, px, %, em, rem, vm, vh, vmin, vmax).
align? 'left' | 'right' | 'center' The table column alignment.
wordWrapEnabled? boolean Specifies whether word wrap is enabled in a column's cells.

TableRow

Describes properties of a table row that the Table plugin renders.

Field Type Description
key string A unique table row identifier.
type symbol Specifies the table row type. The specified value defines which cell template is used to render the row.
rowId? number | string Specifies the associated row's ID.
row? any Specifies the associated row.
height? number Specifies the table row height.

TableColumn

Describes properties of a table column that the Table plugin renders.

Field Type Description
key string A unique table column identifier.
type symbol Specifies the table column type. The specified value defines which cell template is used to render the column.
column? Column Specifies the associated user column.
width? number Specifies the table column width.
align? 'left' | 'right' | 'center' Specifies the table's column alignment.
fixed? 'left' | 'right' Specifies the fixed table's column alignment.

Table.CellProps

Describes properties passed to a component that renders a generic table cell.

Field Type Description
tableRow TableRow Specifies a table row.
tableColumn TableColumn Specifies a table column.
colSpan? number The count of columns that the root cell element spans.
rowSpan? number The count of rows that the root cell element spans.

Table.DataCellProps

Describes properties passed to a component that renders a table cell.

Extends Table.CellProps

Field Type Description
value any Specifies a value to be rendered within the cell.
row any Specifies the cell's row.
column Column Specifies the cell's column.
children? ReactNode A React node used to render the cell content.

Table.NoDataCellProps

Describes properties passed to a component that renders a table cell when the table is empty.

Extends Table.CellProps

Field Type Description
getMessage (messageKey: string) => string Returns the text displayed in a cell when a table is empty.

Table.RowProps

Describes properties passed to a component that renders a generic table row.

Field Type Description
tableRow TableRow A table row.
children ReactNode A React node used to render a table row.

Table.DataRowProps

Describes properties passed to a component that renders a table row.

Extends Table.RowProps

Field Type Description
row any A row.

Localization Messages

Field Type Default Description
noData? string 'No data' Specifies text shown when the Grid does not contain data.

Plugin Components

Name Properties Description
Table.Table object A component that renders a table.
Table.TableHead object A component that renders a table head.
Table.TableBody object A component that renders a table body.
Table.Container object A component that renders a table's container.
Table.Cell Table.DataCellProps A component that renders a table data cell.
Table.Row Table.DataRowProps A component that renders a table data row.
Table.NoDataCell Table.NoDataCellProps A component that renders a table cell when the table is empty.
Table.NoDataRow Table.RowProps A component that renders a table row when the table is empty.
Table.StubRow Table.RowProps A component that renders a stub table row.
Table.StubCell Table.CellProps A component that renders a stub table cell.
Table.StubHeaderCell Table.CellProps A component that 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.

Plugin Developer Reference

Imports

Name Plugin Type Description
rows Getter Array<any> Rows to be rendered by the table view.
columns Getter Array<Column> Columns to be rendered by the table view.
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.
valueFormatter Template DataTypeProvider.ValueFormatterProps A template that renders the formatted 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 table.
tableCell Template Table.CellProps A template that renders a table cell.
tableRow Template Table.RowProps A template that renders a table row.

Grid

Chart

Scheduler

Common Concepts

Core