How to add images to table?

Created table with column “icon”:

table.addContainerProperty("icon", Resource.class, null);

How do I add images to that column? I tried to create ThemeResource object and adding it to table but it didn’t work.

Resource iconResource = new ThemeResource("icons/something.png");
someItemInTable.getItemProperty("icon").setValue(iconResource);

It only shows “icons/something.png” text in that row/column.

The Table component only supports icons directly in the row-header (that is the leftmost “columnt”). In order to put any images (icons for example) freely into any column or cell of the Table, you should use Embedded component.

Use of row-header icons is as simple as:

table.setItemIcon(itemId,new ThemeResource("icons/something.png"))

Also remember to enable row headers. To show only the icons, use:

table.setRowHeaderMode(Table.ROW_HEADER_MODE_ICON_ONLY)

In order to use icons freely in any other columns, do as you did, but instead of putting ThemeResource directly into cell, wrap it with Embedded component. See IT Mill Ltd is now Vaadin Ltd for more info.

Hello,
could you point out what I’m missing while trying to show icons on Table.

In the following example the Tree component works fine but Table doesn’t show icons. The Table reserves a place for an icon, but nothing is shown. I cannot find any trace of using any icon when using FireBug-add on of FireFox.

While debugging AbstractSelect.java it seems that setItemIcon() and getItemIcon() methods are executed.

If the resource for the Tree-component is missing, I’ll get an error on log:
Requested resource [ITMILL/themes/default/aicon.png]
not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/ITMILL folder.

The missing resource for Table component doesn’t append the log.

Example code:


class TableTest extends SplitPanel {
        public TableTest() {
            super(SplitPanel.ORIENTATION_VERTICAL);
            setSplitPosition(50, Sizeable.UNITS_PERCENTAGE);

            Table table = new Table();
            table.addContainerProperty("Time", String.class,  null);
            table.setRowHeaderMode(Table.ROW_HEADER_MODE_ICON_ONLY);
            /* Add a few items in the table. */
            table.addItem(new Object[] {""+System.currentTimeMillis()}, 1);

            for (Object itemId : table.getItemIds()) {
                    table.setItemIcon(itemId, new ThemeResource("icon.png") );
            }
            setFirstComponent(table);

            Tree tree = new Tree();
            tree.addContainerProperty("Time", String.class,  null);
            tree.addItem(""+System.currentTimeMillis());

            for (Object itemId : tree.getItemIds()) {
                    tree.setItemIcon(itemId, new ThemeResource("icon.png") );
            }
            setSecondComponent(tree);
        }

Please inform where to upload an screenshot, if you should need one.

I’m using version 5.2.5beta.
Thanks,
Juha

Hi!

It looks to me that version 5 client side still lacks support for item icons in table (aka row icons). I’ll implement that asap. Apparently not very common features.

matti

TK5 support is in trunk now (#1963). Too bad I have no guts to recommend using trunk atm due rather large scale changes in layouts.

I hope we can push out a release soon.

BTW. I noticed that column icons also have just a todo not in the source. I’ll fix that right away also.

Thanks for a quick response time again. We have found a workaround for our use case (distinguish different kinds items in a table) and we can wait for the next stable 5.2 release. We still need this feature, though.

Thanks,
Juha

Hello,

I tried a workaround and made getItemProperty(Object id) to return different kinds of objects as following:


public Property getItemProperty(Object id){
            Layout oL = new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL);
            oL.addComponent(new Embedded("", new ThemeResource("icon.png")));
            oL.addComponent(new Label("Name"));
            return new ObjectProperty(oL);
}

This shows the icon and text nicely, but the cell is not selectable anymore! Same happens with


return new ObjectProperty(new Embedded("", new ThemeResource("img/icons/notfullscreen.png")));

Of course my table could have two columns: icon and text (string). Then the icon would not be clickable and I’d must manually set the columnWidth to match the icon width. This would not be nice.

Do you have any more suggestions to have “clickable labels with icons” on a table?

Hi there, sorry to jump in this discussion, but my question is very similar.

I do not figure out where
setItemIcon
should be called.
In the examples of this conversation, it is done once when the table is initially populated. I work with a
BeanItemContainer
and would like to have row icons depend on the Item properties (like opened mail vs. unread mail).

Is there a suitable method in the Table API (a kind of onRowPopulate event) which I could overwrite to compute the proper icon and call
setItemIcon
on a row per row basis ?

I probabkly miss something…

Thanks in advance,

Damien

Hi!

You could add generated column (and use embedded inside it) that creates a separate column for icons. Then reorder columns so that the generated one is as first one.

cheers,
matti

I had the same problem, the only thing I could do is Vaadin Table Fix (C).

  1. Replace Files at Vaadin jar from vaadin_table_fix.jar

  2. When You create table overrite :
    public Object customFormatProperty(Object rowId, Object colId, Property o) {}

  3. User Embedded Type to use image

return new Embedded(“Image from a theme resource”,
new ExternalResource($path));
where $path is your path;

at least you should get something like this:

[code]

final Table table = new Table() {
public Object customFormatProperty(Object rowId, Object colId, Property o) {

                return new Embedded("Image from a theme resource",
                    new ExternalResource(o.getValue().toString()));
        }
    };

[/code]:*)
11564.jar (54.6 KB)

This is how I solved it :

IndexedContainer indexedContainer = new IndexedContainer();
indexedContainer.addContainerProperty("status", Embedded.class, null);
ThemeResource statusGreen = new ThemeResource("../icons/status-green.png");
Item row = this.addItem("first");
Embedded statusImage = new Embedded("status",statusGreen);
row.getItemProperty("status").setValue(statusImage);

what will you do if you need to format a date?

Table table = new Table() {
			@Override
			protected String formatPropertyValue(final Object rowId, final Object colId, final Property property) {
				if (property.getType() == Calendar.class) {
					Calendar calendar = (Calendar) property.getValue();
					Date date = calendar.getTime();
					SimpleDateFormat df = new SimpleDateFormat("dd.MM.yyyy HH:mm");
					return df.format(date);
				}

There’s a also an alternate method to display small static icons in table cell using CSS-only. It’s elegant, lightweighted and serves the purpose for simple stuff.

CSS:
.v-table-cell-content-failure {
color: red;
background-image: url(“icons/stop16.png”);
background-repeat: no-repeat;
background-position: 5px;
text-indent: 20px;
}

.v-table-cell-content-success {
color: green;
background-image: url(“icons/accept16.png”);
background-repeat: no-repeat;
background-position: 5px;
text-indent: 20px;
}

Java:
this.t.ablesetCellStyleGenerator(new Table.CellStyleGenerator() {
@Override
public String getStyle(final Object itemId, final Object propertyId) {
if(someCondition) {
return “success”;
} else {
return “failure”;
}
}
});

Outcome:

Hi,
there’s a also an alternate method to display small static icons in table cell using CSS-only. It’s elegant, lightweighted and serves the purpose for simple stuff.


CSS:

.v-table-cell-content-failure {
	color: red;
	background-image: url("icons/stop16.png");
	background-repeat: no-repeat;
	background-position: 5px;
	text-indent: 20px;
}

.v-table-cell-content-success {
	color: green;
	background-image: url("icons/accept16.png");
	background-repeat: no-repeat;
	background-position: 5px;
	text-indent: 20px;
}


Java:

this.t.ablesetCellStyleGenerator(new Table.CellStyleGenerator() {
	@Override
	public String getStyle(final Object itemId, final Object propertyId) {
		if(someCondition) {
			return "success";
		} else {
			return "failure";
		}
	}
});


Outcome:

Hi,
there’s a also an alternate method to display small static icons in table cell using CSS-only. It’s elegant, lightweighted and serves the purpose for simple stuff.


CSS:

.v-table-cell-content-failure {
	color: red;
	background-image: url("icons/stop16.png");
	background-repeat: no-repeat;
	background-position: 5px;
	text-indent: 20px;
}

.v-table-cell-content-success {
	color: green;
	background-image: url("icons/accept16.png");
	background-repeat: no-repeat;
	background-position: 5px;
	text-indent: 20px;
}


Java:

this.t.ablesetCellStyleGenerator(new Table.CellStyleGenerator() {
	@Override
	public String getStyle(final Object itemId, final Object propertyId) {
		if(someCondition) {
			return "success";
		} else {
			return "failure";
		}
	}
});


Outcome:

Hi,
there’s a also an alternate method to display small static icons in table cell using CSS-only. It’s elegant, lightweighted and serves the purpose for simple stuff.


CSS:

.v-table-cell-content-failure {
	color: red;
	background-image: url("icons/stop16.png");
	background-repeat: no-repeat;
	background-position: 5px;
	text-indent: 20px;
}

.v-table-cell-content-success {
	color: green;
	background-image: url("icons/accept16.png");
	background-repeat: no-repeat;
	background-position: 5px;
	text-indent: 20px;
}


Java:

this.t.ablesetCellStyleGenerator(new Table.CellStyleGenerator() {
	@Override
	public String getStyle(final Object itemId, final Object propertyId) {
		if(someCondition) {
			return "success";
		} else {
			return "failure";
		}
	}
});


Outcome:

This is very useful, I was using the same pattern for my table but my pattern was using padding instead of position/indent, which messed up my columns. Thanks for the tip.

Tomas Vala: GREAT example. Thank you sir!

Cheers