Icons in Tables.

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I have to include an Icon in a table. I looked at the example in the demo. In there a container is used to provide a Resource as the Icon.
When having a BeanItemContainer that approach does not work. So here is my question: How can i add an Icon to a table?
Ideally there should be a way to add an icon to a cell, so that in one cell there is a text and an Icon. Any suggestions how I could do this?

Thanks in advance for any suggestions.

Greetings
Peer

2

Hi

I found a solution myself. It works like this:


            table.addGeneratedColumn("icon", new Table.ColumnGenerator() {
                @Override
                public Component generateCell(Table source, Object itemId, Object columnId) {
                        return new Embedded("",new ThemeResource("icons/flags/" + ((HasIcon) itemId).getIconName() + ".gif"));
                }

I still wonder if there would be a way to include an Icon in a table cell without having to add a second colum.

Greetings
Peer

3

Hi, I was about to reply to your question yesterday, but forgot it. But it looks like you found the solution yourself, the generated column is probably the only possibility.

I guess it might be possible to create some sort of container that includes the icons between actual container and the table, but that’s probably quite complex.

4

Hi,

There is a way to include an icon whithout adding a new column: you can recreate the same column using ColumnGenerator.

for instance:


Container c = new IndexedContainer();
c.addContainerProperty(PROP_USR_LASTNAME, String.class, null);
c.addContainerProperty(PROP_USR_FIRSTNAME, String.class, null);
c.addContainerProperty(PROP_USR_ENABLE, Boolean.class, null);


Table t = new Table();
t.setContainerDataSource(c);
t.addGeneratedColumn(PROP_USR_ENABLE, new Table.ColumnGenerator() {
	public Component generateCell(Table source, Object itemId, Object columnId) {
		return createIcon((Boolean) source.getItem(itemId).getItemProperty(PROP_USR_ENABLE)
				.getValue());
	}
});

The createIcon method create an HorizontalLayout containing Embedded for Icon and Label.


	private Component createIcon(Boolean value) {
		HorizontalLayout hl = new HorizontalLayout();
		Label l = new Label();
		Embedded e = new Embedded();
		e.setWidth(16, UNITS_PIXELS);
		if (value) {
			e.setSource(ImageResource.ICON_VALID_YES_16);
			l.setValue("Yes");

		} else {
			e.setSource(ImageResource.ICON_VALID_NO_16);
			l.setValue("No");
		}
		hl.addComponent(e);
		hl.addComponent(l);
		return hlFalse;
	}

This is the only way I’ve found to:

  • display both icon & text
  • still being able to sort this property