You can combine all of these variants together, e.g. <vaadin-grid theme="compact no-row-borders row-stripes">
<vaadin-grid theme="compact">
The following styles changes are applied by setting <theme="compact">
min-height
is decreased from --lumo-size-xl
to --lumo-size-m
min-height
is decreased from --lumo-size-m
to --lumo-size-s
----lumo-space-m
to --lumo-space-s
<vaadin-grid theme="no-border">
When setting theme="no-border"
, the outer border on the grid is removed.
<vaadin-grid theme="no-row-borders">
When setting theme="no-row-borders"
, all the borders on the grid rows are removed.
<vaadin-grid theme="column-borders">
When setting theme="column-borders"
,
all the cells (except row details) have the border-right set.
This doesn't apply to the last column, to ensure proper outer grid border appearance.
<vaadin-grid theme="row-stripes">
When setting theme="row-stripes"
,
all the even grid rows (their body and details cells) are filled with the background of
--lumo-contrast-5pct
.
The odd rows cells appearance is left unchanged.
<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.