Docs

Documentation versions (currently viewingVaadin 24)

Grid Pro

Styling API reference for the Grid Pro component.

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 for more details on how to style components.

Root element

vaadin-grid-pro

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

Selection Checkboxes

Row selection checkbox

vaadin-grid-pro > vaadin-checkbox

Select All checkbox

vaadin-grid-pro > #selectAllCheckbox

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)

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-open-row-cell)

Row with open details

vaadin-grid-pro::part(details-open-row)

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, Select and Checkbox selectors for details on styling the editors