Grid Pro supports the following style variants:
Variant
Description
Supported by
highlight-editable-cells
Highlights editable cells with a background color
Aura, Lumo
highlight-read-only-cells
Highlights read-only cells with a background color
Aura, Lumo
Editable cells are indicated with a hover effect, by default. They can be highlighted by applying the highlight-editable-cells style variant.
Flow React Lit
Source code GridProThemeHighlightEditableCells.java
Expand code
GridProThemeHighlightEditableCells.java package com.vaadin.demo.component.gridpro;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.gridpro.GridPro;
import com.vaadin.flow.component.gridpro.GridProVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;
import java.util.List;
@Route("grid-pro-highlight-editable-cells")
public class GridProThemeHighlightEditableCells extends Div {
public GridProThemeHighlightEditableCells() {
// tag::snippet[]
GridPro<Person> grid = new GridPro<>();
grid.addThemeVariants(GridProVariant.LUMO_HIGHLIGHT_EDITABLE_CELLS);
// end::snippet[]
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)");
List<Person> people = DataService.getPeople();
grid.setItems(people);
add(grid);
}
}
grid-pro-highlight-editable-cells.tsx import React, { useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
const items = useSignal<Person[]>([]);
useEffect(() => {
getPeople().then(({ people }) => {
items.value = people;
});
}, []);
return (
// tag::snippet[]
<GridPro theme="highlight-editable-cells" items={items.value}>
<GridColumn path="firstName" />
<GridColumn path="lastName" />
<GridColumn path="membership" />
<GridProEditColumn path="email" header="Email (Editable)" />
</GridPro>
// end::snippet[]
);
}
grid-pro-highlight-editable-cells.ts import '@vaadin/grid/vaadin-grid-column.js';
import '@vaadin/grid-pro';
import '@vaadin/grid-pro/vaadin-grid-pro-edit-column.js';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { applyTheme } from 'Frontend/demo/theme';
@customElement('grid-pro-highlight-editable-cells')
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
return root;
}
@state()
private items: Person[] = [];
protected override async firstUpdated() {
const { people } = await getPeople();
this.items = people;
}
protected override render() {
return html`
<!-- tag::snippet[] -->
<vaadin-grid-pro theme="highlight-editable-cells" .items="${this.items}">
<!-- end::snippet[] -->
<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>
<!-- tag::snippet[] -->
</vaadin-grid-pro>
<!-- end::snippet[] -->
`;
}
}
You can also apply custom styling to editable cells by targeting the editable-cell part in CSS. The following example shows how to apply custom styling to all Grid Pro elements that have the editable-custom-effect class name:
Source code CSS vaadin-grid-pro.editable-custom-effect::part(editable-cell):hover,
vaadin-grid-pro.editable-custom-effect::part(editable-cell focused-cell) {
background: var(--lumo-contrast-10pct);
}
vaadin-grid-pro.editable-custom-effect::part(editable-cell) {
background: var(--lumo-contrast-5pct);
}
Read-only cells can be highlighted by applying the highlight-read-only-cells style variant.
Flow React Lit
Source code GridProThemeHighlightReadOnlyCells.java
Expand code
GridProThemeHighlightReadOnlyCells.java package com.vaadin.demo.component.gridpro;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.gridpro.GridPro;
import com.vaadin.flow.component.gridpro.GridProVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;
import java.util.List;
@Route("grid-pro-highlight-read-only-cells")
public class GridProThemeHighlightReadOnlyCells extends Div {
public GridProThemeHighlightReadOnlyCells() {
// tag::snippet[]
GridPro<Person> grid = new GridPro<>();
grid.addThemeVariants(GridProVariant.LUMO_HIGHLIGHT_READ_ONLY_CELLS);
// end::snippet[]
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)");
List<Person> people = DataService.getPeople();
grid.setItems(people);
add(grid);
}
}
grid-pro-highlight-read-only-cells.tsx import React, { useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
const items = useSignal<Person[]>([]);
useEffect(() => {
getPeople().then(({ people }) => {
items.value = people;
});
}, []);
return (
// tag::snippet[]
<GridPro theme="highlight-read-only-cells" items={items.value}>
<GridColumn path="firstName" />
<GridColumn path="lastName" />
<GridColumn path="membership" />
<GridProEditColumn path="email" header="Email (Editable)" />
</GridPro>
// end::snippet[]
);
}
grid-pro-highlight-read-only-cells.ts import '@vaadin/grid/vaadin-grid-column.js';
import '@vaadin/grid-pro';
import '@vaadin/grid-pro/vaadin-grid-pro-edit-column.js';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { applyTheme } from 'Frontend/demo/theme';
@customElement('grid-pro-highlight-read-only-cells')
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
return root;
}
@state()
private items: Person[] = [];
protected override async firstUpdated() {
const { people } = await getPeople();
this.items = people;
}
protected override render() {
return html`
<!-- tag::snippet[] -->
<vaadin-grid-pro theme="highlight-read-only-cells" .items="${this.items}">
<!-- end::snippet[] -->
<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>
<!-- tag::snippet[] -->
</vaadin-grid-pro>
<!-- end::snippet[] -->
`;
}
}