A plugin that renders a cell being edited.
Use the following statement to import the plugin with embedded theme components:
import { TableInlineCellEditing } from '@devexpress/dx-react-grid-material-ui';
// import { TableInlineCellEditing } from '@devexpress/dx-react-grid-bootstrap4';
// import { TableInlineCellEditing } from '@devexpress/dx-react-grid-bootstrap3';If you want to use custom components, you can import the themeless plugin:
import { TableInlineCellEditing } from '@devexpress/dx-react-grid';| Name | Type | Default | Description |
|---|---|---|---|
| cellComponent | ComponentType<TableInlineCellEditing.CellProps> | A component that renders an editable cell. | |
| startEditAction | 'click' | 'doubleClick' | 'click' | The action that switches a cell to edit mode. |
| selectTextOnEditStart | boolean | false | Specifies whether cell value should be selected when the cell switches to edit mode. |
Describes properties passed to a component that renders an editable cell.
Extends Table.CellProps
| Field | Type | Description |
|---|---|---|
| row | any | The cell's row. |
| column | Column | The cell's column. |
| value | any | The cell's value. |
| editingEnabled | boolean | Specifies whether cells in this column can be edited. |
| onValueChange | (newValue: any) => void | Handles value changes. |
| autoFocus | boolean | Specifies whether the cell should be automatically focused when it switches to edit mode. The default value is true. |
| onFocus | (event: any) => void | An event raised when the cell gets focus. |
| onBlur | () => void | An event raised when the cell loses focus. |
| onKeyDown | (key: string) => void | An event raised when a key on the keyboard is pressed. |
| Name | Properties | Description |
|---|---|---|
| TableInlineCellEditing.Cell | TableInlineCellEditing.CellProps | A component that renders an editable cell. |
Additional properties are added to the component's root element.
| Name | Plugin | Type | Description |
|---|---|---|---|
| editingCells | Getter | Array<{rowId: number | string, columnName: string}> | Edited cells identified by the row ID and column name. |
| getCellValue | Getter | (row: any, columnName: string) => any | A function used to get the value of a cell identified by the row ID and column name. |
| createRowChange | Getter | (row: any, value: any, columnName: string) => any | A function that allows you to modify edited cell values before they are added to the rowChanges array. This function is called each time an editor's value changes and should return an object of the following format: { columnName1: value1, columnName2: value2, ... } |
| rowChanges | Getter | { [key: string]: any } | An associative array in which each item consists of a row ID (the key field) and changes made to this row. |
| isColumnEditingEnabled | Getter | (columnName: string) => boolean | A function that returns a Boolean value that specifies whether users are allowed to edit the column identified by the columnName. |
| changeRow | Action | ({ rowId: number | string, change: object }) => void | Applies a change to a row identified by ID. |
| startEditCells | Action | ({ editingCells: Array<{rowId: number | string, columnName: string}> }) => void | Switches cells identified by the row ID and column name to edit mode. |
| stopEditCells | Action | ({ editingCells: Array<{rowId: number | string, columnName: string}> }) => void | Switches cells identified by the row ID and column name to normal mode. |
| cancelChangedRows | Action | ({ rowIds: Array<number | string> }) => void | Cancels uncommitted changes in rows with the specified IDs. |
| commitChangedRows | Action | ({ rowIds: Array<number | string> }) => void | Raises the onCommitChanges event with the corresponding ChangeSet and removes the specified rows from the rowChanges array. |
| tableCell | Template | Table.CellProps | A template that renders a table cell. |
none