Applying auto-width
on the <vaadin-grid-column>
will set the width of the column
to automatically fit the content.
The column width will be calculated and set only once based on the contents of the initially rendered cells.
You can manually trigger the auto sizing behavior again by calling grid.recalculateColumnWidths()
.
By default the column might still expand if there is more space available, unless you also set flex-grow="0"
.
Note: If all the columns have flex-grow="0"
there might be empty space after the last column
if the grid is wider than what is needed to fit all the columns. You probably want to leave at least one column
without flex-grow="0"
so that column will take all the remaining space that is left.
Note: When using column renderer functions, those should be set before setting the grid items
or
dataProvider
. Otherwise the initial column widths may be calculated before the renderers have been run and
the widths of the renderer columns might be wrong initially.
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
in order to use it.
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.
Applying hidden
on a column or column group will hide it.
Applying column-reordering-allowed
on the grid will make all
columns reorderable. Drag and drop the columns by headers to reorder.
Applying resizable
on a column will make it resizable.
Note: When using column groups, columns can be reordered only within their parent group.