DxTableEditRow Plugin Reference

A plugin that renders a row being edited.

Import

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

import { DxTableEditRow } from '@devexpress/dx-vue-grid-bootstrap4';

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

import { DxTableEditRow } from '@devexpress/dx-vue-grid';

Name	Type	Description
cellComponent	DxTableEditRow.DxCell	A component that renders an editable cell.
rowComponent	DxTableEditRow.DxRow	A component that renders an editable row.
rowHeight?	number	Specifies the editable row’s height.

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.
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.

Field	Description
default	The default Vue slot.

Field	Type	Description
valueChange	(newValue: any) => void	Handles value changes.

Field	Type	Description
tableRow	TableRow	A table row
row	any	A row to be edited.

Field	Description
default	The default Vue slot.

Name	Type	Description
DxTableEditRow.components.DxCell	DxTableEditRow.DxCell	A component that renders an editable cell.
DxTableEditRow.components.DxRow	DxTableEditRow.DxRow	A component that renders an editable row.

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	object?	A template that renders a table cell.
tableRow	Template	object?	A template that renders a table row.
valueEditor	Template	DxDataTypeProvider.DxValueEditor	A template that renders the editor.

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