Display Icons on my table

Vaadin 6 / 7 / 8
1

Hi, I have a table with 2 columns (String and Object). According to results from somewhere, my second column (object) display String or display Icon (that’s why I set Object.class to my second column). But I haven’t succeeded to display icons… I tried with Label.setIcon, Image, Resource, Embbeded,… no resultat, my icon doesn’t display on my table

How can I do ?

2

Did you tried with a table ColumnGenerator?

table.addGeneratedColumn("columnName", (source, itemId, columnId) -> {
    if (...) { return "<a String>"; }
    else {
       return new Image("", new ExternalResource("...."));
    }
});
table.setVisibleColumns("...", "columnName");
3

Thanks for your quick answer :slight_smile:
It doesn’t work… An example of my code, Initialy, I have 5 columns (Column number 2 have to display string or icon)

tableResultatsProduits.addContainerProperty(1, String.class, null); tableResultatsProduits.addContainerProperty(2, Object.class, null); tableResultatsProduits.addContainerProperty(3, String.class, null); tableResultatsProduits.addContainerProperty(4, String.class, null); tableResultatsProduits.addContainerProperty(5, Button.class, null); In this case, I can display String, not an icon.

Now, you tell me to use GeneratedColumns, so :

[code]
tableResultatsProduits.addContainerProperty(1, String.class, null);
tableResultatsProduits.addGeneratedColumn(2, new Table.ColumnGenerator() {

   @Override
   public Object generateCell(Table pSource, Object pItemId, Object pColumnId) {
       return new Image("", new ExternalResource("path"));
   }

});
tableResultatsProduits.addContainerProperty(2, Object.class, null);
tableResultatsProduits.addContainerProperty(3, String.class, null);
tableResultatsProduits.addContainerProperty(4, String.class, null);
tableResultatsProduits.addContainerProperty(5, Button.class, null);
[/code]At this step, I don’t manage string or icon, I just want to display an icon when my column is of type “Object”

4

That’s weird. I just tried your code and it works for me (see attached screenshot)

Table table = new Table();
table.setWidth("100%");
table.addContainerProperty(1, String.class, null);
table.addGeneratedColumn(2, new Table.ColumnGenerator() {

@Override
public Object generateCell(Table pSource, Object pItemId, Object pColumnId) {
return new Image("", new ExternalResource("https://vaadin.com/vaadin-theme/images/vaadin/vaadin-logo.svg"));
}
});
table.addContainerProperty(2, Object.class, null);
table.addContainerProperty(3, String.class, null);
table.addContainerProperty(4, String.class, null);
table.addContainerProperty(5, Button.class, null);
table.addItem();
table.addItem();
table.addItem();

26117.png

5

Ok it works MArco !! Thanks !

But now I would like to manage if I set String or Image :

[code]
public void construireTableResultats(List pExeDispersionResultatSynthese) {
this.exeDispersionResultatSynthese = pExeDispersionResultatSynthese;

    for (final ExeDispersionResultatSynthese resultat : exeDispersionResultatSynthese) {
        
        String dateDebut = null;
        Object dateFin = null;
        final String typeResultat = resultat.getTypeResultat().getTexte();

        //Si une date de début n'existe pas dans la base, alors on affiche rien
        if (null != resultat.getDateDebut()) {
            dateDebut = DateOutil.getDateTimeFormateeStandard(resultat.getDateDebut());
        }

        [b]

tableResultatsProduits.addGeneratedColumn(2, new Table.ColumnGenerator() {

            @Override
            public Object generateCell(Table pSource, Object pItemId, Object pColumnId) {
                if (null != resultat.getDateFin()) {
                    return resultat.getDateFin();

                }
                else {
                    return new Image("", new ThemeResource("img/correct.png"));
                }

            }
        });

[/b]

        //Ajoute la ligne au tableau de résultats
        [b]

tableResultatsProduits.addItem(
new Object{dateDebut, dateFin, typeResultat, “”, new Button()}, resultat.getId());
[/b]
}
}
[/code]I have a function which build my table by a DAO. How can I get back these returns and set them on my variable “dateFin” (Object) ?
In reality, I don’t know how to work addGeneratedColumn… :slight_smile:

6

Hi Dimitri,
from what I can undeestand from your code I’ll suggest you a different solution:

  • use a BeanItemContainer as table datasource (don’t forget to implement hashcode and equals in your bean class)
  • add nested properties to the container when needed
  • use converters to supply a string representation for object properties (ie StringToDateConverter)
  • use generated columns to add components to the table

Here is some example code based on your previuos post (not tested).

Configure the table once (in view constructor for example)

BeanItemContainer<ExeDispersionResultatSynthese> container = new BeanItemContainer<>();

// Configure container
container.addNestedContainerProperty("typeResultat.texte"); // nested property

// Configure table
Table table = new Table(null, container);
// custom convert date -> string
table.setConverter("dateDebut", new Converter<String, Date>() {
    @Override
    public Date convertToModel(String value, Class<? extends Date> targetType, Locale locale) throws ConversionException {
        throw new UnsupportedOperationException();
    }

    @Override
    public String convertToPresentation(Date value, Class<? extends String> targetType, Locale locale) throws ConversionException {
        if (value != null) {
             return DateOutil.getDateTimeFormateeStandard(value);
        }
        return null;
    }

    @Override
    public Class<Date> getModelType() {
        return Date.class;
    }

    @Override
    public Class<String> getPresentationType() {
        return String.class;
    }
});
table.addGeneratedColumn("dateFin", (source, itemId, columnId) -> {
    if (null != ((ExeDispersionResultatSynthese)resultat).getDateFin()) {
        return resultat.getDateFin();
    } else {
    return new Image("", new ThemeResource("img/correct.png"));
    }
});
table.addGeneratedColumn("emptyStringColumn", (source, itemId, columnId) -> "");
table.addGeneratedColumn("buttonColumn", (source, itemId, columnId) -> new Button());
table.setVisibleColumns("dateDebut", "dateFin", "typeResultat.texte", "emptyStringColumn", "buttonColumn");

Then to fill the table with your data simple clear and add items to the container instance

// fill container with items
void construireTableResultats(List<ExeDispersionResultatSynthese> pExeDispersionResultatSynthese) {
    container.removeAllItems();
    container.addAll(pExeDispersionResultatSynthese)
}

HTH
Marco