How to set the column of grid to auto fit text in Vaadin 10 Grid Flow

Flow
1

As the title,How to set the column of grid auto fit text in Vaadin 10 Grid Flow?
the attachment image show the “name” column,but it doesn’t show completely.
17419255.png

2

Hello Guoguo,

You can use white-space: normal and word-wrap: break-word to split it into many lines and not just one.

The styles of the grid can be edited using a theme-module for the vaadin-grid component.

<dom-module id="grid-style" theme-for="vaadin-grid">
    <template>
        <style>
			:host(.your-grid-class) [part="cell body-cell"]
,
			:host(.hour-report-grid) [part="cell footer-cell"]
,
			:host(.hour-report-grid) [part="cell header-cell"]
 {
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: normal;
			}
        </style>
    </template>
</dom-module>
3

Dear Villafruela,
Thanks for your solution, I do it with your code “white-space: normal !important;”, then the content of grid can show mutilate lines. But I still wonder the auto fit column.

4

Hello Guoguo,

I found out that there are already predefined styles that you can use for your Grid.

com.vaadin.flow.component.grid.GridVariant

public enum GridVariant {
    LUMO_NO_BORDER("no-border"), 
	LUMO_NO_ROW_BORDERS("no-row-borders"), 
	LUMO_COLUMN_BORDERS("column-borders"), 
	LUMO_ROW_STRIPES("row-stripes"), 
	LUMO_COMPACT("compact"), 
	LUMO_WRAP_CELL_CONTENT("wrap-cell-content"), 
	MATERIAL_COLUMN_DIVIDERS("column-dividers");
													
}

You can take a look to them here: https://cdn.vaadin.com/vaadin-grid/5.2.5/demo/#grid-theme-demos