> Markdown version of [Styling](https://vaadin.com/docs/next/components/grid-pro/styling). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# Grid Pro Styling

## <a id="style-variants"></a>Style Variants

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   |

In addition, Grid Pro also supports all [Grid Style Variants](https://vaadin.com/docs/next/components/grid/styling.md#style-variants).

### <a id="highlight-editable"></a>Highlight Editable

Editable cells are indicated with a hover effect, by default. They can be highlighted by applying the `highlight-editable-cells` style variant.

**Lit** — `grid-pro-highlight-editable-cells.ts`

```typescript
<vaadin-grid-pro theme="highlight-editable-cells" .items="${this.items}">
</vaadin-grid-pro>
```

**Flow** — `GridProThemeHighlightEditableCells.java`

```java
GridPro<Person> grid = new GridPro<>();
grid.addThemeVariants(GridProVariant.HIGHLIGHT_EDITABLE_CELLS);
```

**React** — `grid-pro-highlight-editable-cells.tsx`

```tsx
<GridPro theme="highlight-editable-cells" items={items.value}>
  <GridColumn path="firstName" />
  <GridColumn path="lastName" />
  <GridColumn path="membership" />
  <GridProEditColumn path="email" header="Email (Editable)" />
</GridPro>
```

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:

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

### <a id="highlight-read-only"></a>Highlight Read-Only

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

**Lit** — `grid-pro-highlight-read-only-cells.ts`

```typescript
<vaadin-grid-pro theme="highlight-read-only-cells" .items="${this.items}">
</vaadin-grid-pro>
```

**Flow** — `GridProThemeHighlightReadOnlyCells.java`

```java
GridPro<Person> grid = new GridPro<>();
grid.addThemeVariants(GridProVariant.HIGHLIGHT_READ_ONLY_CELLS);
```

**React** — `grid-pro-highlight-read-only-cells.tsx`

```tsx
<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>
```

## <a id="style-properties"></a>Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the `html {…​}` selector. See [Component Style Properties](https://vaadin.com/docs/next/styling/styling-components.md#component-style-properties) for more information on style properties.

| Property                                           | Supported by |
| -------------------------------------------------- | ------------ |
| `--vaadin-grid-pro-editable-cell-background-color` | Aura         |

In addition, Grid Pro also supports all [Grid Style Properties](https://vaadin.com/docs/next/components/grid/styling.md#style-properties).

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/next/styling.md) for more details on how to style components.

> **Important: Not for Shadow DOM**
>
> These selectors should be used in `styles.css` or another stylesheet loaded with the `@StyleSheet` annotation or the `@import` CSS rule. **They do not work in the shadow DOM of Vaadin components**, such as in stylesheets in the `components` sub-folder or loaded with the `@CssImport` annotation’s `themeFor` property.

---

- Root element

  `vaadin-grid-pro`

### <a id="cells"></a>Cells

- Cell (any)

  `vaadin-grid-pro::part(cell)`

- Header row cell

  `vaadin-grid-pro::part(header-cell)`

- Body cell

  `vaadin-grid-pro::part(body-cell)`

- Footer row cell

  `vaadin-grid-pro::part(footer-cell)`

- Focused cell

  `vaadin-grid-pro::part(focused-cell)`

- Editable cell

  `vaadin-grid-pro::part(editable-cell)`

- Cell contents

  `vaadin-grid-cell-content`

- Cell in first column

  `vaadin-grid-pro::part(first-column-cell)`

- Cell in last column

  `vaadin-grid-pro::part(last-column-cell)`

- Cell in first row

  `vaadin-grid-pro::part(first-row-cell)`

- Cell in last column

  `vaadin-grid-pro::part(last-row-cell)`

- Cell in odd row

  `vaadin-grid-pro::part(odd-row-cell)`

- Cell in even row

  `vaadin-grid-pro::part(even-row-cell)`

- Cell in selected row

  `vaadin-grid-pro::part(selected-row-cell)`

- Cell in first header row

  `vaadin-grid-pro::part(first-header-row-cell)`

- Cell in last header row

  `vaadin-grid-pro::part(last-header-row-cell)`

- Cell focus ring

  `vaadin-grid::part(cell)::before`

- Row focus ring

  `vaadin-grid::part(row)::before`

### <a id="selection-checkboxes"></a>Selection Checkboxes

- Row selection checkbox

  `vaadin-grid-pro > vaadin-checkbox`

- Select All checkbox

  `vaadin-grid-pro > #selectAllCheckbox`

### <a id="sorters"></a>Sorters

- Element

  `vaadin-grid-sorter`

- Active sorter

  `vaadin-grid-sorter[direction]`

- Column header content

  `vaadin-grid-sorter::part(content)`

- Sort indicators

  `vaadin-grid-sorter::part(indicators)`

- Sort indicator icons

  `vaadin-grid-sorter::part(indicators)::before`

- Sort order indicator

  `vaadin-grid-sorter::part(order)`

### <a id="item-details"></a>Item Details

- Item details cell (spans entire row)

  `vaadin-grid-pro::part(details-cell)`

- Cell in row with open details

  `vaadin-grid-pro::part(details-opened-row-cell)`

- Row with open details

  `vaadin-grid-pro::part(details-opened-row)`

### <a id="editors"></a>Editors

- Text field editor

  `vaadin-grid-pro-edit-text-field`

- Checkbox editor

  `vaadin-grid-pro-edit-checkbox`

- Select editor

  `vaadin-grid-pro-edit-select`

*See [Text Field](https://vaadin.com/docs/next/components/text-field/styling.md), [Select](https://vaadin.com/docs/next/components/select/styling.md) and [Checkbox](https://vaadin.com/docs/next/components/checkbox/styling.md) selectors for details on styling the editors*