> Markdown version of [Grid Pro](https://vaadin.com/docs/v14/ds/components/grid-pro). Section index: [llms.txt](https://vaadin.com/docs/v14/ds/llms.txt)

# Grid Pro

> **Note: Commercial feature**
>
> A commercial Vaadin subscription is required to use Grid Pro in your project.
>
> - [Start Free Trial](https://vaadin.com/trial)
>
> - [See Pricing](https://vaadin.com/pricing)

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

`GridProBasic.java`

```java
GridPro<Person> grid = new GridPro<>();

grid.addEditColumn(Person::getFirstName)
        .text(Person::setFirstName)
        .setHeader("First name");

grid.addEditColumn(Person::getLastName)
        .text(Person::setLastName)
        .setHeader("Last name");

grid.addEditColumn(Person::getEmail)
        .text(Person::setEmail)
        .setHeader("Email");

grid.addEditColumn(Person::getProfession)
        .text(Person::setProfession)
        .setHeader("Profession");
```

> **Note: Features shared with Grid**
>
> Grid Pro is an extension of the [Grid](https://vaadin.com/docs/v14/ds/components/grid.md) component and all Grid’s features are applicable to Grid Pro as well.

## <a id="usage"></a>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

## <a id="modes"></a>Modes

### <a id="edit-on-single-click"></a>Edit on Single Click

Single Click Edit is a mode that enables the user to begin editing by single clicking on an editable cell.

`GridProSingleClick.java`

```java
GridPro<Person> grid = new GridPro<>();
grid.setEditOnClick(true);
```

### <a id="single-cell-edit"></a>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.

`GridProSingleCellEdit.java`

```java
GridPro<Person> grid = new GridPro<>();
grid.setSingleCellEdit(true);
```

### <a id="enter-next-row"></a>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.

`GridProEnterNextRow.java`

```java
GridPro<Person> grid = new GridPro<>();
grid.setEnterNextRow(true);
```

## <a id="edit-column"></a>Edit Column

Editing is enabled on a per column basis.

`GridProEditColumn.java`

```java
GridPro<Person> grid = new GridPro<>();

grid.addColumn(Person::getFullName)
        .setHeader("Name (read-only)");

grid.addEditColumn(Person::getProfession)
        .text(Person::setProfession)
        .setHeader("Profession (editable)");
```

### <a id="recommended-built-in-editors"></a>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.

`GridProEditor.java`

```java
GridPro<Person> grid = new GridPro<>();

grid.addEditColumn(Person::getFirstName)
        .text(Person::setFirstName)
        .setHeader("First name");

List<String> membershipOptions = Arrays.asList("Regular", "Premium", "VIP");
grid.addEditColumn(Person::getMembership)
        .select(Person::setMembership, membershipOptions)
        .setHeader("Membership");

grid.addEditColumn(Person::isSubscriber)
        .checkbox(Person::setSubscriber)
        .setHeader("Subscriber");

DatePicker datePicker = new DatePicker();
datePicker.setWidthFull();

grid.addEditColumn(GridProEditor::getBirthdayAsLocalDate, birthdayDateRenderer)
        .custom(datePicker, (person, newValue) ->
                person.setBirthday(dateFromLocalDate(newValue))
        ).setHeader("Birthday");
```

## <a id="prevent-saving-changes"></a>Prevent Saving Changes

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

`GridProPreventSave.java`

```java
GridPro<Person> grid = new GridPro<>();

grid.addEditColumn(Person::getFirstName)
        .text(Person::setFirstName)
        .setHeader("First name");

grid.addEditColumn(Person::getLastName)
        .text(Person::setLastName)
        .setHeader("Last name");

grid.addEditColumn(Person::getEmail)
        .text((person, newValue) -> {
            if (isValidEmail(newValue)) {
                person.setEmail(newValue);
            } else {
                showErrorNotification("Please enter a valid email address");
            }
        })
        .setHeader("Email");

grid.addEditColumn(person -> person.getAddress().getPhone())
        .text((person, newValue) -> {
            if (isValidPhoneNumber(newValue)) {
                person.getAddress().setPhone(newValue);
            } else {
                showErrorNotification("Please enter a valid phone number");
            }
        })
        .setHeader("Phone");
```

## <a id="styling-editable-cells"></a>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)”.

`GridProStylingEditableCells.java`

```java
GridPro<Person> grid = new GridPro<>();
grid.addClassNames("editable-custom-effect");

grid.addColumn(Person::getFirstName).setHeader("First name");
grid.addColumn(Person::getLastName).setHeader("Last name");
grid.addColumn(Person::getMembership).setHeader("Membership");

grid.addEditColumn(Person::getEmail)
        .text(Person::setEmail)
        .setHeader("Email (Editable)");
```

`vaadin-grid-pro-editable-cells.css`

```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);
}
```

## <a id="best-practises"></a>Best Practises

### <a id="inline-vs-non-inline-editing"></a>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](https://vaadin.com/docs/v14/ds/components/crud.md).

## <a id="related-components"></a>Related Components

| Component                                                           | Usage recommendations                                                   |
| ------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| [CRUD](https://vaadin.com/docs/v14/ds/components/crud.md)           | Component for creating, displaying, updating and deleting tabular data. |
| [Grid](https://vaadin.com/docs/v14/ds/components/grid.md)           | Component for showing tabular data.                                     |
| [Tree Grid](https://vaadin.com/docs/v14/ds/components/tree-grid.md) | Component for showing hierarchical data.                                |

`1EF2EA01-DD67-42D0-A2C3-34AA957EE054`