Grid Pro
Grid Pro is an extension of the Grid component that provides inline editing with full keyboard navigation.
new tab
<vaadin-grid-pro .items="${this.items}">
<vaadin-grid-pro-edit-column path="firstName"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="lastName"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="email"></vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="profession"></vaadin-grid-pro-edit-column>
</vaadin-grid-pro>Note | Features shared with Grid Grid Pro is an extension of the Grid component and all Grid’s features are applicable to Grid Pro as well. |
Usage
Begin editing by:
Double clicking on the editable cell
Pressing Enter, Space or typing an alphanumeric character when an editable cell is focused
When editing:
Esc discards the changes and exits edit mode
Enter and Shift+Enter saves the changes and exits edit mode
Tab and Shift+Tab saves the changes and focuses the next and previous editable cell, respectively, while remaining in edit mode
Modes
Edit on Single Click
Single Click Edit is a mode that enables the user to begin editing by single clicking on an editable cell.
new tab
<vaadin-grid-pro .items="${this.items}" edit-on-click>
<vaadin-grid-pro-edit-column path="firstName"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="lastName"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="email"></vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="profession"></vaadin-grid-pro-edit-column>
</vaadin-grid-pro>Single Cell Edit
By default, when in edit mode, Tab and Shift+Tab moves to the next and previous editable cell, respectively, while remaining in edit mode.
Single Cell Edit is a mode that makes tabbing from one cell to another exit edit mode.
new tab
<vaadin-grid-pro .items="${this.items}" single-cell-edit>
<vaadin-grid-pro-edit-column path="firstName"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="lastName"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="email"></vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="profession"></vaadin-grid-pro-edit-column>
</vaadin-grid-pro>Enter Next Row
Pressing Enter and Shift+Enter saves the changes and exists edit mode by default.
Enter and Shift+Enter can be made to focus the editable cell in the next and previous row, respectively, by using the Enter Next Row mode.
new tab
<vaadin-grid-pro .items="${this.items}" enter-next-row>
<vaadin-grid-pro-edit-column path="firstName"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="lastName"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="email"></vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="profession"></vaadin-grid-pro-edit-column>="subscriber" editor-type="checkbox">
</vaadin-grid-pro-edit-column>
</vaadin-grid-pro>Edit Column
Editing is enabled on a per column basis.
new tab
<vaadin-grid-pro .items="${this.items}" enter-next-row>
<vaadin-grid-column
header="Name (read-only)"
.renderer="${(
root: HTMLElement,
_column?: GridColumnElement,
model?: GridItemModel<Person>
) => {
if (model?.item) {
const { firstName, lastName } = model.item;
root.textContent = `${firstName} ${lastName}`;
}
}}"
></vaadin-grid-column>
<vaadin-grid-pro-edit-column
header="Profession (editable)"
path="profession"
></vaadin-grid-pro-edit-column>
</vaadin-grid-pro>Recommended Built-in Editors
Grid Pro features three recommended built-in editors: Text Field, Checkbox, and Select.
| Editor | Usage Recommendation |
|---|---|
Text | Editing basic text. |
Checkbox | Editing boolean (binary) values. |
Select | Selecting a single value from a set of options. |
Although Grid Pro can be configured to use any input field for editing, the built-in editors have better keyboard usability and rendering.
new tab
<vaadin-grid-pro .items="${this.items}" enter-next-row>
<vaadin-grid-pro-edit-column path="firstName"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column
path="membership"
editor-type="select"
.editorOptions="${['Regular', 'Premium', 'VIP']}"
>
</vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="subscriber" editor-type="checkbox">
</vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column
path="birthday"
.renderer="${(
root: HTMLElement,
_column?: GridColumnElement,
model?: GridItemModel<Person>
) => {
if (!model) {
return;
}
const person = model.item;
root.textContent = format(parseISO(person.birthday), 'MM/dd/yyyy');
}}"
.editModeRenderer="${(
root: HTMLElement,
_column?: GridColumnElement,
model?: GridItemModel<Person>
) => {
if (!model) {
return;
}
const person = model.item;
let datePicker = root.querySelector('vaadin-date-picker');
if (!datePicker) {
root.innerHTML = '';
datePicker = document.createElement('vaadin-date-picker');
datePicker.style.width = '100%';
root.appendChild(datePicker);
}
datePicker.value = person.birthday;
}}"
></vaadin-grid-pro-edit-column>
</vaadin-grid-pro>Prevent Saving Changes
You can rollback changes when the entered input is incorrect or invalid.
new tab
<vaadin-grid-pro .items="${this.items}" @item-property-changed="${this.itemPropertyListener}">
<vaadin-grid-pro-edit-column path="firstName"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="lastName"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="email"> </vaadin-grid-pro-edit-column>
<vaadin-grid-pro-edit-column path="address.phone"> </vaadin-grid-pro-edit-column>
</vaadin-grid-pro>Styling Editable Cells
Unless all columns are editable, apply styling to visually distinguish between editable and non-editable cells using the editable-cell part name selector.
For example, you can suffix read-only columns with “(read-only)” and/or editable columns with “(editable)”.
new tab
<vaadin-grid-pro class="editable-custom-effect" .items="${this.items}">
<vaadin-grid-column path="firstName"> </vaadin-grid-column>
<vaadin-grid-column path="lastName"> </vaadin-grid-column>
<vaadin-grid-column path="membership"></vaadin-grid-column>
<vaadin-grid-pro-edit-column
path="email"
header="Email (Editable)"
></vaadin-grid-pro-edit-column>
</vaadin-grid-pro>Best Practises
Inline vs Non-Inline Editing
Inline editing is recommended when:
the user typically needs to make a lot of small changes to different items
quick editing is important
Non-inline editing is preferable
there’s a lot of columns/fields
users typically need to edit only one item at a time
adding new items is common (as you might want to have edit and create modes work the same way, and creating new items with inline editing is not recommended with Grid Pro).
any of the editors need to be bigger than a simple field, such as a Text Area or multi-select field of any kind
fields alone may be insufficient, for example when helpers, validation errors or other features are needed
explicit save/cancel actions are beneficial, for example to prevent accidental edits
If your use case would benefit more from non-inline editing, consider using CRUD.