You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Styling · Vaadin
Vaadin Elements - Grid - Styling

Styling

The appearance of vaadin-grid is designed to fit in with the Material Design language from Google. This section will explain how you can customize the look of your vaadin-grid to fit your own application theme. Some CSS properties such as font-family will be inherited from the containing page, while others may need to be changed with custom CSS properties and mixins.

Sizing

By default vaadin-grid takes all horizontal space available and set its height depending on the number of data rows. You can change this behavior by using standard sizing properties, such as width and height.

The height can also be defined as the number of rows to be displayed by using the visible-rows attribute or grid.visibleRows JavaScript property.

Custom Properties

The vaadin-grid element is compatible with paper-styles from the Polymer Element Catalog. The selection checkboxes and focus highlights inherit their color from the --primary-color defined in the paper-styles.

vaadin grid styling
Figure 1. An example of custom highlight color and row heights

You can also use some custom properties defined in vaadin-grid. Currently, they include both CSS properties and mixins. The CSS properties allow adjusting heights of different row types, while the mixins are applied on different types of row cells.

Table 1. Available custom properties

Custom property

Description

Default value

--vaadin-grid-row-height

Data row height

48px

--vaadin-grid-header-row-height

Header row height

56px

--vaadin-grid-footer-row-height

Footer row height

56px

--vaadin-grid-row-cell

Mixin applied on the cells.

-

--vaadin-grid-selected-row-cell

Mixin applied on the cells of the selected row.

-

--vaadin-grid-row-stripe-cell

Mixin applied on the cells of the striped rows.

-