CODEWITHSUNDEEP
cssgridvaadin
Miłosz Bąbliński
Miłosz Bąbliński

Reputation: 169

Vaadin 14 Grid autoWidth with wrap content

I`m working with Vaadin 14 and i have a problem with sizing cells in Grid. I would like to set autowidth on all columns to reduce size of column with small content size, but for long i want to achive max size of column without horizontall scroll ( i want to see all columns at once) and when it would exceed size of the table then i would like to wrap conten inside this column.

When i'm setting autoWidth for all columns then my long conten is shown in one line and i must scrolling horizontally to see other columns. When i`m setting

grid.addThemeVariants(GridVariant.LUMO_COMPACT,GridVariant.LUMO_WRAP_CELL_CONTENT); then my long column has this same size but with multi-line content as other columns with short content. Other columns are too long for their content.

I can`t set width separately for each column couse i dont know how many columns will be in the Grid and which column will have long or short content.

Upvotes: 3

Views: 1385

Answers (1)

Jouni
Jouni

Reputation: 2918

Here’s what I would try:

  • Use the LUMO_WRAP_CELL_CONTENT variant
  • For all other columns than the one with long content, set autoWidth and flexGrow=0
  • For the column with long content, set width to what you want as max-width and set flexGrow=1

Upvotes: 3

Related Questions