A plugin that renders a row being edited.
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';| 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. |
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. |
Describes properties passed to a component that renders an editable row.
Extends Table.RowProps
| Field | Type | Description |
|---|---|---|
| row | any | A row to be edited. |
| 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.
| Field | Type | Description |
|---|---|---|
| ADDED_ROW_TYPE | symbol | The added row type's identifier. |
| EDIT_ROW_TYPE | symbol | The edit row type's identifier. |
| 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. |
| Name | Plugin | Type | Description |
|---|---|---|---|
| tableBodyRows | Getter | Array<TableRow> | Table body rows including editable rows. |