TableEditRow Plugin Reference

A plugin that renders a row being edited.

Import

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

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

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

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

User Reference

Dependencies

Properties

Name Type Default Description
cellComponent ComponentType<TableEditRow.CellProps> A component that renders an editable cell.
rowComponent ComponentType<TableEditRow.RowProps> A component that renders an editable row.
rowHeight? number Specifies the editable row's height.

Interfaces

TableEditRow.CellProps

Describes properties passed to a component that renders an editable cell.

Extends Table.CellProps

Field Type Description
row any A row to be edited.
column Column A column.
value any A value to be edited.
editingEnabled boolean Specifies whether editing a column is enabled.
onValueChange (newValue: any) => void Handles value changes.

TableEditRow.RowProps

Describes properties passed to a component that renders an editable row.

Extends Table.RowProps

Field Type Description
row any A row to be edited.

Plugin Components

Name Properties Description
TableEditRow.Cell TableEditRow.CellProps A component that renders an editable cell.
TableEditRow.Row TableEditRow.RowProps A component that renders an editable row.

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

Static Fields

Field Type Description
ADDED_ROW_TYPE symbol The added row type's identifier.
EDIT_ROW_TYPE symbol The edit row type's identifier.

Plugin Developer Reference

Imports

Name Plugin Type Description
tableBodyRows Getter Array<TableRow> Table body rows.
editingRowIds Getter Array<number | string> IDs of the rows that are being edited.
addedRows Getter Array<any> Created but not committed rows.
isColumnEditingEnabled Getter (columnName: string) => boolean A function that returns a value that specifies if editing by a column is enabled.
changeAddedRow Action ({ rowId: number, change: any }) => void Applies a change to a created but uncommitted row. Note: rowId is a row index within the addedRows array.
rowChanges Getter { [key: string]: any } An associative array that stores changes made to existing rows. Each array item specifies changes made to a row. The item's key specifies the associated row's ID.
changeRow Action ({ rowId: number | string, change: object }) => void Applies a change to an existing row.
getCellValue Getter (row: any, columnName: string) => any A function used to get the specified row's column value.
createRowChange Getter (row: any, value: any, columnName: string) => any A function that returns a value that specifies row changes depending on the row's editable cell values. This function is called each time an editor's value changes.
tableCell Template Table.CellProps A template that renders a table cell.
tableRow Template Table.RowProps A template that renders a table row.
valueEditor Template DataTypeProvider.ValueEditorProps A template that renders the editor.

Exports

Name Plugin Type Description
tableBodyRows Getter Array<TableRow> Table body rows including editable rows.