How can I see details to grid in Vaadin flow?

Question

In my Vaadin flow project, I have a grid and I set some items but it shows like grid data items

I want a decent format that a user can see specific details not like. Any idea or is there any component in vaadin to make this pretty?

Answer 1

There are two options to do that:

• provide a better ValueProvider than the .toString(), that is used in your property right now. E.g.

grid.addColumn(person -> Integer.toString(person.getYearOfBirth()))
        .setHeader("Year of birth");

• TemplateRenderer: You can provide a "complex" HTML structure where to place content. The docs contain an example: https://github.com/vaadin/flow-and-components-documentation/blob/master/documentation/components/tutorial-flow-grid.asciidoc#using-template-renderers E.g.:

grid.addColumn(TemplateRenderer.<Person> of("<b>[[item.name]]</b>")
              .withProperty("name", Person::getName)).setHeader("Name");