Adding icon to table rows

Hi,

I would like to seek some help with a problem of mine. The table below has 3 columns which are Number, Username and Score. I would like to put in a picture in the username column infront of the username string. The output wil be (picture)user1 etc. The picture will come from a URL. Does anyone know how to go about doing this? Any help will be greatly appreciated. Thank you!

Code for the table:

        Table table = new Table();

        table.addStyleName(Runo.TABLE_BORDERLESS);

        table.addStyleName(Runo.TABLE_SMALL);

        table.setSizeFull();

        table.addContainerProperty("No.", Integer.class, null);

        table.addContainerProperty("Username", Link.class, null);

        table.addContainerProperty("Score", Integer.class, null);

        table.addItem(new Object[] { i - 1, username, rating }, i++);

You might be able to get the desired outcome when using components in table or Column Generators.
Have a look in the book
https://vaadin.com/book/-/page/components.table.html

Especially the subchapters “Components in Table”
and “5.21.5. Generated Table Columns”

Marius’s approach is right.

Here is (partial) code I’ve used to put a button displaying an icon in a table column. In your case you could simply replace the Button with a Label that has both an icon and a caption on it. Obviously you wouldn’t need a listener either.

        addGeneratedColumn("download_link", new ColumnGenerator() {
            public Component generateCell(CustomTable source, Object itemId, Object columnId) {
                    Button btn = new Button(FontAwesome.CLOUD_DOWNLOAD);
                    btn.addStyleName(ValoTheme.BUTTON_LINK);
                    btn.addClickListener(new ClickListener() {
                        @Override
                        public void buttonClick(ClickEvent event) {
                            // blah blah blah
                        }
                    });
                    return btn;
            }
        });

Thanks for the help!