Insert a <br> in a grid cell based on the existence of a certain character

Flow
1

is there a way to insert a
in a grid cell based on the existence of a certain character.

For example I have 3 addresses i would like to show like

123 main st
anywhere ny 01010,

222 main st
somewhere ny 07001,

222 main st
somewhere ny 07001

I am inserting ā€˜,ā€™ char(10) and or char(13) at these locations but they do not cause a break in the display

2

There are two ways of inserting line breaks into a grid cell. Either by setting the css property white-space (to something like pre or pre-line) or by defining a custom renderer (in your case Iā€™d recommend a lit renderer).

When using white-space the browser will (depending on the selected white-space value) preserve spaces, tabs and newlines: white-space - CSS: Cascading Style Sheets | MDN

With the custom renderer you can basically display your value any way you want, but it might take a bit more effort: Using renderers in the Vaadin Grid component

1 Like
3

Maybe a note regarding the white-space: if you want to apply it only depending on the content or only for some columns, you will need a part name generator for that column. The respective css will then need to target that specific part using the ::part selector, for instance

vaadin-grid::part(ws-normal) { /* part name generator returned "ws-normal" */
	white-space: normal;
}

vaadin-grid::part(ws-pre) { /* part name generator returned "ws-pre" */
	white-space: pre;
}

/* ... and so on ...*/

See How to style the Grid component | Vaadin components