display hyperlink in Vaadin Grid

Question

I'm trying to display a HTML link in a Vaadin grid column.

I have the following code:

Grid<DetailInfoRow> grid = new Grid<>();
grid.addColumn(LitRenderer.<DetailInfoRow> of("<span>${item.name}</span>").withProperty("name", DetailInfoRow::getName)).setTextAlign(ColumnTextAlign.START);
grid.addColumn(LitRenderer.<DetailInfoRow> of("<span>${item.value}</span>").withProperty("value", DetailInfoRow::getValue)).setTextAlign(ColumnTextAlign.START);
grid.setSelectionMode(Grid.SelectionMode.NONE);
grid.setAllRowsVisible(true);

The value field of DetailInfoRow is of String type, and sometimes has a value like "<a href="http://10.1.194.60:8888/update">10.1.194.60</a>". But in browser it is rendered as literal and not interpreted as a link to external resource. I thought that's what LitRenderer could do.

What's wrong with the above code, please? Thank you.

Answer 1

The answer is in Dynamic HTML using a Vaadin LitRenderer.

I chose to go with ComponentRenderer to render unsafe HTML:

grid.addColumn(new ComponentRenderer<>(info -> new Html(String.format("<span>%s</span>", info.getValue())))).setTextAlign(ColumnTextAlign.START);