Grid

Styling API reference for the Grid component.

Style Properties
CSS Selectors

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 Lumo Style Properties for more information on style properties.

Feature Property Default Value

Feature	Property	Default Value
Row/cell background	`--vaadin-grid-cell-background`	`--lumo-base-color`
Row/cell padding	`--vaadin-grid-cell-padding`	`--lumo-space-xs` / `--lumo-space-m`

Row/cell background

--vaadin-grid-cell-background

--lumo-base-color

Row/cell padding

--vaadin-grid-cell-padding

--lumo-space-xs / --lumo-space-m

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

Rows

Row (any): vaadin-grid::part(row)
First row: vaadin-grid::part(first-row)
Last row: vaadin-grid::part(last-row)
Even row: vaadin-grid::part(even-row)
Odd row: vaadin-grid::part(odd-row)
Selected row: vaadin-grid::part(selected-row)
Hovered row: vaadin-grid::part(row):hover

Note: To set background colors based on row selectors, use the --vaadin-grid-cell-background style property.

Cells

Cell (any): vaadin-grid::part(cell)
Header row cell: vaadin-grid::part(header-cell)
Body cell: vaadin-grid::part(body-cell)
Footer row cell: vaadin-grid::part(footer-cell)
Focused cell: vaadin-grid::part(focused-cell)
Cell content wrapper: vaadin-grid-cell-content
Cell in first column: vaadin-grid::part(first-column-cell)
Cell in last column: vaadin-grid::part(last-column-cell)
Cell in first row: vaadin-grid::part(first-row-cell)
Cell in last row: vaadin-grid::part(last-row-cell)
Cell in even row: vaadin-grid::part(even-row-cell)
Cell in odd row: vaadin-grid::part(odd-row-cell)
Cell in selected row: vaadin-grid::part(selected-row-cell)
Cell in first header row: vaadin-grid::part(first-header-row-cell)
Cell in last header row: vaadin-grid::part(last-header-row-cell)
Cell focus ring: vaadin-grid::part(cell)::before
Row focus ring: vaadin-grid::part(row)::before
Collapsed cell: vaadin-grid::part(collapsed-row-cell)
Expanded cell: vaadin-grid::part(expanded-row-cell)

You can style individual cells, rows, and columns by applying custom part names to them. Cell padding can be configured using the --vaadin-grid-cell-padding style property.

Selection Checkboxes

Row selection checkbox: vaadin-grid > vaadin-checkbox
Select All checkbox: vaadin-grid > #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::part(details-cell)
Cell in row with open details: vaadin-grid::part(details-open-row-cell)
Row with open details: vaadin-grid::part(details-open-row)

Documentation