Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Grid Pro

Source: TypeScript / Java
Note
Commercial feature

A commercial Vaadin subscription is required to use Grid Pro in your project.

Grid Pro is an extension of the Grid component that provides inline editing with full keyboard navigation.

Open in a
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, so that 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 save the changes and exit edit mode

  • Tab and Shift+Tab save the changes and focus 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.

Open in a
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 move 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 from edit mode.

Open in a
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 exits 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.

Open in a
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>
</vaadin-grid-pro>

Edit Column

Editing is enabled on a per-column basis.

Open in a
new tab
<vaadin-grid-pro .items="${this.items}" enter-next-row>
  <vaadin-grid-column
    header="Name (read-only)"
    ${columnBodyRenderer<Person>(
      (person) => html`${person.firstName} ${person.lastName}`,
      []
    )}
  ></vaadin-grid-column>
  <vaadin-grid-pro-edit-column
    header="Profession (editable)"
    path="profession"
  ></vaadin-grid-pro-edit-column>
</vaadin-grid-pro>

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.

Open in a
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"
    ${columnBodyRenderer<Person>(
      ({ birthday }) => html`${format(parseISO(birthday), 'MM/dd/yyyy')}`,
      []
    )}
    ${columnEditModeRenderer<Person>(
      ({ birthday }) =>
        html`
          <vaadin-date-picker style="width: 100%" .value="${birthday}"></vaadin-date-picker>
        `,
      []
    )}
  ></vaadin-grid-pro-edit-column>
</vaadin-grid-pro>

Prevent Saving Changes

You can rollback changes when the entered input is incorrect or invalid.

Open in a
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>

Distinguish Editable / Read-Only Cells

Editable cells are indicated with a hover effect by default, but you can give further help to users in distinguishing these by highlighting either editable or read-only cells. This is recommended for grids with both editable and read-only cells.

Highlight Editable Cells

Editable cells can be highlighted by applying the highlight-editable-cells theme variant.

Open in a
new tab
<vaadin-grid-pro theme="highlight-editable-cells" .items="${this.items}">
</vaadin-grid-pro>

Highlight Read-Only Cells

Read-only cells can be highlighted by applying the highlight-read-only-cells theme variant.

Open in a
new tab
<vaadin-grid-pro theme="highlight-read-only-cells" .items="${this.items}">
</vaadin-grid-pro>

You can also apply custom styling to both editable and read-only cells by targeting the editable-cell part name in CSS.

:host(.editable-custom-effect) [part~="editable-cell"]:hover,
:host(.editable-custom-effect) [part~="editable-cell"]:focus {
  background: var(--lumo-contrast-10pct);
}

:host(.editable-custom-effect) [part~="editable-cell"] {
  background: var(--lumo-contrast-5pct);
}

Best Practices

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 when:

  • there are 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 isn’t 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.

Component Usage recommendations

CRUD

Component for creating, displaying, updating and deleting tabular data.

Grid

Component for showing tabular data.

AACED59D-0972-417E-BA70-9464FEA8895C