> Markdown version of [Grid Pro](https://vaadin.com/docs/next/components/grid-pro). Section index: [llms.txt](https://vaadin.com/docs/next/components/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.
**Lit** — `grid-pro-basic.ts`
```typescript
```
**Flow** — `GridProBasic.java`
```java
GridPro 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");
```
**React** — `grid-pro-basic.tsx`
```tsx
```
> **Note: Features Shared with Grid**
>
> Grid Pro is an extension of the [Grid](https://vaadin.com/docs/next/components/grid.md) component. As a result, all of Grid’s features are also available with Grid Pro.
## Usage
To use Grid Pro, begin by double-clicking on an editable cell. Then press `Enter`, `Space`, or type an alphanumeric character when an editable cell is focused.
When editing, there are a few keyboard shortcuts available:
- `Esc` discards the changes and exits edit mode.
- `Enter` and `Shift`+`Enter` save changes and exit edit mode.
- `Tab` and `Shift`+`Tab` save changes and move focus to the next or previous editable cell, respectively, while remaining in edit mode.
## Modes
Grid Pro has a few modes: edit on single-click; single cell edit; and enter next row. These are described in the sub-sections that follow.
### Edit on Single-Click
Single-Click Edit is a mode that enables the user to begin editing by single-clicking on an editable cell.
**Lit** — `grid-pro-single-click.ts`
```typescript
```
**Flow** — `GridProSingleClick.java`
```java
GridPro grid = new GridPro<>();
grid.setEditOnClick(true);
```
**React** — `grid-pro-single-click.tsx`
```tsx
```
### Single Cell Edit
By default, when in edit mode, `Tab` moves the focus to the next cell and `Shift`+`Tab` moves the focus to the previous editable cell — while remaining in edit mode. With Single Cell Edit, tabbing from one cell to another will exit from edit mode.
**Lit** — `grid-pro-single-cell-edit.ts`
```typescript
```
**Flow** — `GridProSingleCellEdit.java`
```java
GridPro grid = new GridPro<>();
grid.setSingleCellEdit(true);
```
**React** — `grid-pro-single-cell-edit.tsx`
```tsx
```
### Enter Next Row
Pressing `Enter` or `Shift`+`Enter` saves any changes and exits edit mode, by default. However, `Enter` can be made to move focus to the editable cell in the next row, by using the Enter Next Row mode. The same can be done for `Shift`+`Enter`, but to move the focus to the editable cell in the previous row.
**Lit** — `grid-pro-enter-next-row.ts`
```typescript
```
**Flow** — `GridProEnterNextRow.java`
```java
GridPro grid = new GridPro<>();
grid.setEnterNextRow(true);
```
**React** — `grid-pro-enter-next-row.tsx`
```tsx
```
## Edit Column
Editing is enabled on a per-column basis.
**Lit** — `grid-pro-edit-column.ts`
```typescript
(
(person) => html`${person.firstName} ${person.lastName}`,
[]
)}
>
```
**Flow** — `GridProEditColumn.java`
```java
GridPro grid = new GridPro<>();
grid.addColumn(Person::getFullName).setHeader("Name (read-only)");
grid.addEditColumn(Person::getProfession).text(Person::setProfession)
.setHeader("Profession (editable)");
```
**React** — `grid-pro-edit-column.tsx`
```tsx
```
## Recommended Built-in Editors
Grid Pro features three recommended built-in editors: Text Field; Checkbox; and Select. They’re described in the table here.
| 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.
**Lit** — `grid-pro-editors.ts`
```typescript
(
({ birthday }) => html`${format(parseISO(birthday), 'MM/dd/yyyy')}`,
[]
)}
${columnEditModeRenderer(
({ birthday }) => html`
`,
[]
)}
>
```
**Flow** — `GridProEditor.java`
```java
GridPro grid = new GridPro<>();
grid.addEditColumn(Person::getFirstName).text(Person::setFirstName)
.setHeader("First name");
List 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");
```
**React** — `grid-pro-editors.tsx`
```tsx
(
)}
/>
```
## Prevent Saving Changes
Whenever you enter incorrect or invalid data, it’s possible to rollback changes.
**Lit** — `grid-pro-prevent-save.ts`
```typescript
```
**Flow** — `GridProPreventSave.java`
```java
GridPro 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("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("Enter a valid phone number");
}
}).setHeader("Phone");
```
**React** — `grid-pro-prevent-save.tsx`
```tsx
```
## Conditional Editability
In some situations you may need to disable editing of specific cells in an edit column. This can be done through a function that determines the editability of each cell. This function is automatically re-evaluated when an item in the Grid is modified. As a result, modifying the value in one cell can immediately affect the editability of other cells.
**Lit** — `grid-pro-cell-editability.ts`
```typescript
```
**Flow** — `GridProCellEditability.java`
```java
grid.addEditColumn(Person::getEmail)
.withCellEditableProvider(item -> item.isSubscriber())
.text(Person::setEmail).setHeader("Email");
```
**React** — `grid-pro-cell-editability.tsx`
```tsx
```
## Best Practices
### Inline vs. Non-Inline Editing
Inline editing is recommended when the user will usually need to make many small changes to different items, and when quick editing is essential.
Non-inline editing is preferable when there are plenty of columns or fields, and when users typically need to edit only one item at a time. It’s also preferred when 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.
Use non-inline editing when any of the editors need to be larger than a simple field (e.g., Text Area and multi-select fields), or when fields alone may be insufficient (e.g., when helpers, validation errors or other features are needed). Also, use it when explicit save or cancel actions are beneficial, for example, to prevent accidental edits.
Incidentally, if your situation would benefit more from non-inline editing, consider using [CRUD](https://vaadin.com/docs/next/components/crud.md).
## Related Components
| Component | Usage Recommendations |
| ------------------------------------------------------- | ----------------------------------------------------------------------- |
| [CRUD](https://vaadin.com/docs/next/components/crud.md) | Component for creating, displaying, updating and deleting tabular data. |
| [Grid](https://vaadin.com/docs/next/components/grid.md) | Component for showing tabular data. |
`AACED59D-0972-417E-BA70-9464FEA8895C`