<vaadin-grid-pro> has the helper for inline cell editing in specific columns.
Edit mode can be activated in one of the following ways:
When edit mode is activated for the cell, the following keys change behavior:
NOTE: You must explicitly specify path property for the edit column in order to use it
NOTE: You must explicitly import <vaadin-grid-pro-edit-column> in order to use it
The editorType property allows to configure column editor type. The following types are supported:
text - default type, renders a <vaadin-text-field> componentcheckbox - renders a <vaadin-checkbox> componentselect - renders a <vaadin-select> component
The editorOptions property is used to pass additional data to the component, especially the list
of options to be rendered as <vaadin-item> components in the select.
When singleCellEdit is set on the grid element, focusing the next editable cell from keyboard will exit the edit mode.
When editOnClick is set on the grid element, cell edit mode gets activated on a single click
instead of the default double click.
When enterNextRow is set on the grid element, the following keys change behavior:
Before exiting the cell edit mode, item-property-changed event is fired. You can listen to it
and call event.preventDefault() to prevent saving change. The example below demonstrates
how to silently rollback change in case of the unexpected value.
The custom editor component can be rendered for cell edit mode using editModeRenderer
function. Please make sure to render the component as a first child to the root provided as a first
argument for the renderer. See <vaadin-grid> demo
for more details.
By default, the value property of the editor component will be set based on the
column path. You can use editorValuePath property of the column
element to map cell value to another property (or a sub-property).
The demo below is an example of using <input> element and
<vaadin-combo-box> component as cell editors. Grid edit mode styling does not apply
to the custom editor components, but you can use CSS, same as for cell content in non-edit mode.
The custom editor component can be also rendered for cell edit mode using <template>
element with the editor class name. The requirements for the custom editor component are
the same as when using editModeRenderer.