Changing font colour in table rows

General
1

Hi,

I would like to implement a feature that changes the text of the top 3 results in my table to gold, silver and bronze respectively. The other results are unchanged. The colour will be applied to all the columns in the table. Does anyone know how to do this? Any help would be greatly appreciated. Thank you!

Table code:

        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++);
2

You can use the cellstylegenerator for this:
https://vaadin.com/forum/#!/thread/1065548/

3

Thanks that looks like what I need. Is there anywhere that I could get a step by step explanation of the code that was used? I havent touched vaadin for 6 months and its a little hard for me to understand. Thanks again!

4

Well first you should define your styles like:

[code]
.v-table .v-table-cell-content-gold {
color: …; //instead of … use the hex or rgb value of your desired color
}

.v-table .v-table-cell-content-silver {
color: …; //instead of … use the hex or rgb value of your desired color
}

…
[/code]Then you can add the CellStyleGenerator to your table and return the desired styles accordingly:

[code]
table.setCellStyleGenerator(new Table.CellStyleGenerator() {
public String getStyle(Object itemId, Object propertyId) {
int row = ((Integer) itemId).intValue();
if (row = 0) {
return “gold”
}else if(row = 1){
return “silver”;
}else if(row = 2){
return “bronze”;
}

        return "";
    }
});

[/code]Not sure if that coding works correctly as i didn’t write it with an IDE.

5

Thank you very much!