How to increase row height in vaadin grid accordingly to data in the cell - css

Question

I am consuming data from the list and some list may contain multiple line data, so how that can be reflected in the vaadin grid at runtime.
This is the code
public Grid GridBasic() {
grid.removeAllColumns();
grid.addColumn(TopicConsumedDetails::getPartitionNumber).setHeader("PARTITION ");
grid.addColumn(TopicConsumedDetails::getOffset).setHeader("OFFSET");
grid.addColumn(TopicConsumedDetails::getMessage).setHeader("MESSAGE");
grid.setItems(details);
grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);
grid.getColumns().forEach( col -> col.setAutoWidth(true));
return grid;
}
This just displays all the data in a single line and it requires scrolling left to right.
Vaadin Version :23.3.1

Answer 1

Use the built-in "wrap cell content" variant: https://vaadin.com/docs/latest/components/grid/#wrap-cell-content
grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);

Answer 2

As per the previous answer, I think that using this is the correct approach:
grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);
However, you are overriding this setting by calling
grid.getColumns().forEach( col -> col.setAutoWidth(true));
According to the documentation, this automatically sets the column width based on the contents, leading to the right scroll problem.
If you remove this call, you should get the proper wrapping behavior. I was able to reproduce the problem and then see a result like this once I removed the auto width setting:
Alternatively, if you have sensible line breaks in the content you want to wrap, you can do that--but it won't happen automatically, as mentioned by #Rolf in a comment above. That is because the line breaks in the text are basically just whitespace and aren't respected as such by the HTML. So in order to do that, one option is to add an "Html" component column. You can then replace your text's line breaks with <br/> tags, which you could do with a regular expression. It would look like this:
String myColumnText = colText.replaceAll(....); //Some regex to match on your particular line breaks
grid.addComponentColumn(item -> new Html("<p>" + myColumnText +"</p>");
The <p> tags (or some wrapper tags) are required as the Html component requires a wrapper tag.
Note that (1) using this approach means that you won't get the automatic wrapping behavior any more so the line breaks in your source need to be sensible and (2) you have to be certain you trust the incoming content or it is otherwise sanitized, as this kind of rendering-text-as-html opens up some security holes with untrusted content.