Valo Theme source code

Grid

You can combine all of the theme variants together, e.g. theme="compact borderless row-dividers"

Default

Compact

<vaadin-grid theme="compact">

Borderless

<vaadin-grid theme="borderless">

Row dividers

<vaadin-grid theme="row-dividers">

Column dividers

<vaadin-grid theme="column-dividers">

Row stripes

<vaadin-grid theme="row-stripes">

Wrap cell content

<vaadin-grid theme="wrap-cell-content">

By default, cell contents don’t wrap and all overflowing content is either clipped or truncated. Apply the wrap-cell-content theme to make the cell content wrap instead.

This example is also using the row-dividers theme variant to make the content easier to read.

Column grouping, column resizing, frozen columns and footers

Tree/hierarchy

Tree connectors (experimental)

<vaadin-grid-tree-toggle theme="connectors">

Styling API

Shadow parts and states

See the API documentation for vaadin-grid