TemplateRenderer for `vaadin-avatar-group`


I have a grid and I am trying to create a column with a template renderer where I can put a Vaadin avatar group.

I have a class Request that is the class used for the rows of the grid, it is like (I omit getters/settlers etc)

class Request {
    List<User> users;

so the it’s grid<Request>

and User is like:

class User {

  long id;
  String surname;
  String name;

I created an helper class for the template for having name and colorIndex as properties name, I need the id too in the real case.

class UserBadge {
   long id;
   String name;
   int colorIndex;


and this is the template:

        return TemplateRenderer.<Request>of(
                "<vaadin-avatar-group maxItemsVisible=\"1\" items=[[item.data]]></vaadin-avatar-group>"
                withProperty("data", r -> {

                                          int index 0;
                                          List<UserBadge> users = new ArrayList<>();
                                          for(User u : r.getUsers()){

                                              users.add(new UserBadge(u.getId(), 
                                              u.getSurname() + " " + u.getName(),
                                          return users;

First I ask if this is a correct approach to create the template for this case, it seems to work but I am not sure.

Then the problem: the colorIndex doesn’t have any effect, the colors of the avatar in the group is the same for every avatar.

Thanks for the help.

Do you have some specific reason to use TemplateRenderer instead of just a composition of components (aka pure Java)?

I have never used TemplateRenderer’s myself.

Performance :smirk:

I tend to use TemplaRenderer when I can after I read this time ago https://vaadin.com/blog/top-5-most-common-vaadin-performance-pitfalls-and-how-to-avoid-them

For one component (VaadinAvatar) the difference of performance is quite limited.
TemplateRenderer is deprecated, you should use LitRenderer instead.

(and check if there is a gain of performance since you’re losing a bit of maintainability)

Even tho with thousand or millions of rows? But of course, using LitRenderer over TemplateRenderer is a must do

I tried this: Dynamic HTML using a Vaadin LitRenderer - Stack Overflow
and didn’t see a big difference. That might be wrong for some other cases.
But what can cost a lot is when you have a lot of components inside one ComponentRenderer. (even for div or span) and that cost ‘nothing’ inside a litrenderer.

I didn’t try with millions of rows

Maybe the issue is the custom class data object; might be worth a try to use a JsonObject instead

my bad, I didn’t write it I am still on V14

@vital-koala you mean JsonObject from Gson ?

I managed to work with JsonFactory from elemental.json, I used

                    return users.stream().map(u -> {

                        JsonObject jsonObject = jsonFactory.createObject();
                        jsonObject.put("name", u.getName());
                        jsonObject.put("colorIndex", u.getColorIndex());

                        return jsonObject;


but still the same, colorIndex is ignored, very strange

Capitalization might differ?

@vital-koala considering that I am using v14, but looking at the doc here https://github.com/vaadin/vaadin-avatar it’s colorIndex

If you investigate the element in browser developer tools, you should be able to see whether the property is set or not