Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

How to add images to table?

Anonymous Anonymous
2 decades ago Apr 02, 2007 10:31am
Joonas Lehtinen
2 decades ago Apr 02, 2007 10:56am
juha.huuhka
1 decade ago Aug 05, 2008 8:05am
Matti Tahvonen
1 decade ago Aug 06, 2008 6:29am
Matti Tahvonen
1 decade ago Aug 06, 2008 7:07am
juha.huuhka
1 decade ago Aug 06, 2008 7:32am
juha.huuhka
1 decade ago Aug 07, 2008 10:56am
Damien Boucquey
1 decade ago Nov 13, 2009 10:25pm
Matti Tahvonen
1 decade ago Nov 20, 2009 8:01am
Dennis Oleshko
1 decade ago Jan 24, 2011 11:32pm

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:

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()));
            }
        };

:*)

Nathalie Keymeulen
1 decade ago Feb 22, 2011 9:06am

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);
Last updated on Feb, 22nd 2011
Dennis Oleshko
1 decade ago Apr 25, 2011 9:26am
Yury Repeshov
1 decade ago Jul 20, 2011 7:37am
Tomas Vala
1 decade ago Jul 21, 2011 10:25am

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:

Tomas Vala
1 decade ago Jul 21, 2011 10:27am
Reuben Sivan
9 years ago Oct 15, 2013 8:56pm
Ed Tidwell
8 years ago Jul 16, 2014 2:03pm