Column Grouping

Columns can be grouped together with <vaadin-grid-column-group> elements. Grouped columns can have a common header and footer cells.

Note: Remember to define explicit bounds for images in order to avoid glitches once an image has fully loaded.

NOTE: You must explicitly import the vaadin-grid-column-group.html in order to use <vaadin-grid-column-group>.

Freezing Columns

Applying frozen on a column will make it frozen. It can be also be applied to a column group to freeze all of its child columns.

Note: Columns are frozen in-place, freeze columns from left to right for a consistent outcome.

Hiding Columns

Applying hidden on a column or column group will hide it.

Hint: Using hidden together with <iron-media-query> is an easy way to create a responsive grid.

Reordering and Resizing Columns

Applying column-reordering-allowed on the grid will make all columns reordeable.

Applying resizable on a column will make it resizable.

Note: When using column groups, columns can be reordered only within their parent group.

Dynamic Columns using dom-repeat