Add icon in table cell having container content


I have a problem with filling a table the way I want and I would hope to get some help from the great minds of this forum!

You see, I have a table which has a set of columns that get its content from a container who in its turn get its from a database.
The thing is, in two of the table columns I would like to have a specific icon added in front of the cell content depending on what the content is.

Now, my problem is I know how to add database content to the table using imsiTable.setContainerDataSource(imsiContainer)
and I know how to add a column of icons using imsiTable.addGeneratedColumn("networkStatus", new IconAndLabelCell());

However, I have no idea of how to combine the two into one column… Needless to say I’m still learning the framework. So if YOU know if there is any good approach of how to iterate the content of an existing column in a table and add an icon after the table is created, I would be extremely grateful… =)

I will provide more information if needed, please don’t hesitate to ask!

Thanks in advance!

What you need is called FieldFactory. Take a look at the
book of vaadin
. Scroll down to section 5.14.5 for an example.

In the createField()-method return a HorizontalLayout containing the icon and your value.

Hope this helps.



I think you are completely on the right track with addGeneratedColumn : what is the problem that you are facing with that? You can return (as Kurt suggests) a HorizontalLayout with both an Icon and a Label.



Thank you both!

I sorted it out by creating a HorizontalLayout component holding both an image and a label. And set the icon resource and label depending on the value in the database when each cell was generated! Works great! =)


I’m using this solution for showing a red icon in a Table-cell next to the cell’s content:


 tblConditions.addGeneratedColumn("condition", (source, itemId, columnId) -> {
            ConditionBDO conditionBDO = (ConditionBDO) itemId; 

            final HorizontalLayout components = new HorizontalLayout(); //which will hold the text and the icon

            final Label descriptionNL = new Label(); //the text to be displayed
            descriptionNL.setValue("geen wachttijd");

            Label warningIcon = new Label(); //the icon
            warningIcon.setContentMode(ContentMode.HTML); //use content and not .setIcon: because your icon floats above the content, even if it's empty
            warningIcon.setValue("<span style=\'color: red !important;\'> " + FontAwesome.EXCLAMATION_TRIANGLE.getHtml()  + "</span>"); //the icon (colored red)
            warningIcon.setDescription("tooltip"); //tooltip

            warningIcon.setVisible(false); //rule when the icon can be displayed
            if (1==1) {
            components.addComponents(descriptionNL, warningIcon);

            return components;