Status image in GroupTable

[uladzislau_chabatkou]

Hi,
I have a table with generated column with image. This image shows the status of item (green, red, yellow circle) based on field status:

public void onInit(InitEvent event) {
        myTable.addGeneratedColumn("status", this::renderStatusImage);       
    }

    private Component renderStatusImage(Entity entity) {
        String status = entity.getValue("status");
        Image image = uiComponents.create(Image.class);
        image.setSource(ClasspathResource.class).setPath(path);
        return image;
    }

This status image is changed in real time on some event which occurs every 1-2 seconds. So every 1-2 seconds I see how table is blinking, because it renders generated column.
How to avoid it? Can we change only one row for which status is changed, not all generated column?

[gorelov (Gleb Gorelov)]

Hi,

@uladzislau_chabatkou

Can we change only one row for which status is changed, not all generated column?

Unfortunately, not. This is Vaadin table behavior. In your case, I’d recommend get rid of images and generated columns at all. Instead, use styles to display different status. The idea is that you hide text representation of status and generate an icon using CSS, e.g. FontAwesome circle icon:

@Install(to = "customerTable", subject = "styleProvider")
protected String customerTableStyleProvider(Customer customer, String property) {
    if (property.equals("grade")) {
        switch (customer.getGrade()) {
            case PREMIUM:
                return "premium-grade";
            case HIGH:
                return "high-grade";
            case STANDARD:
                return "standard-grade";
        }
    }
    return null;
}

.premium-grade,
.high-grade,
.standard-grade {
  .v-table-cell-wrapper {
    color: transparent;  // hide text
    // generate an icon
    &:before {
      font-size: $v-font-size;
      font-family: FontAwesome;
      content: "\f111";
    }
  }
}

// Set different color depending on grade
.premium-grade .v-table-cell-wrapper:before {
  color: red;
}

.high-grade .v-table-cell-wrapper:before {
  color: blue;
}

.standard-grade .v-table-cell-wrapper:before {
  color: green;
}

This approach is much more lightweight than using images.

Regards,
Gleb

[uladzislau_chabatkou]

Thanks for the answer,
Could you please explain about method customerTableStyleProvider()? How to use it, where do I should call it?

[gorelov (Gleb Gorelov)]

You can add the style provider in two ways:

1. Inject a table and use the addStyleProvider method:

@Inject
private Table<Customer> customerTable;

@Subscribe
public void onInit(InitEvent event) {
    customerTable.addStyleProvider((entity, property) -> {
        ...
    });
}

2. Using the Install Delegate dialog: