wrap text in a grid cell

Flow
1

How can I wrap long text in a grid cell?

I tried the following:

/*
		 * The grid that will hold the products
		 */
		Grid<Product> productGrid = new Grid<>();

		productGrid.addColumn(TemplateRenderer.<Product>of("<div><img src = '[[item.thumbnailUrl]
]'></img></div>")
				.withProperty("thumbnailUrl", Product::getThumbnailImage)).setHeader("Image").setFlexGrow(0).setWidth("10em");

		productGrid.addColumn(Product::getName).setHeader("Name");
		productGrid.addColumn(Product::getSalePrice).setHeader("Price").setFlexGrow(0);
		productGrid.addColumn(
				TemplateRenderer.<Product>of("<div style='text-align:right'>[[item.description]
]</div>")
						.withProperty("description", Product::getLongDescription))
				.setHeader("Description").setFlexGrow(1);
		productGrid.addComponentColumn(product->{
			Label label = new Label(product.getLongDescription());
            label.getStyle().set("text-align", "right");
			return label;
		}).setHeader("Description").setFlexGrow(1);

The last 2 cells are the same description column. I tried both labels and TemplateRenderer. I can change the label color, etc using the getStyle, but how to force it to wrap long text? Or am I going about it the wrong way?

2

I would prefer the TemplateRenderer and text wrapping styles into it. As you have already style='text-align:right' you can add style='white-space:normal' etc.

Alternatively there is --vaadin-grid-cell which you can define in custom styles i.e. style mixins as described here: https://github.com/vaadin/vaadin-grid/issues/605

3

Thanks, I used style=‘white-space:normal’ with the TemplateRenderer and it works!

4

If you are using the default Lumo theme, you can also simply use the theme="wrap-cell-content" theme variant. See a demo here: https://vaadin.com/components/vaadin-grid/html-examples/grid-lumo-theme-demos#wrap-cell-content