Alternating Row Color Issue When Sorting

Vaadin 6 / 7 / 8 Framework UI
1 

	table.setCellStyleGenerator(new Table.CellStyleGenerator() {
	    public String getStyle(Object itemId, Object propertyId) {
	        int row = ((Integer)itemId).intValue();
	        //int col = Integer.parseInt((String)propertyId);
	       if (row % 2 == 1) 
	       {
	    	   return "rowStyleGray";   
	       }
	       return "";
	    }
	});

My alternating row colors get messed up when sorting. Any suggestions on how to fix this problem? Thanks.
Paul

2

I suggest you implement the alternate row colors using CSS, just like they are already done with the Runo theme (but I guess the default alternating color is too light, right?).

Using item ids to color them will definitely not work in situations like this, since the order of the rows will not affect the item ids.

To color them using CSS:

.v-table-row-odd {
    background-color: gray;
    }
3

Thank you for your response Jouni.

Actually, the row colors for the Runo theme are fine. However when I insert this line of code for the borderless table, I lose my alternating row colors:

table.addStyleName(Runo.TABLE_BORDERLESS);

Is there a way to set borderless directly in the CSS rather than doing it this way so I don’t lose my alternating row colors?

Paul

4

I forgot that I had removed the stripes and the white background color from the borderless table. But here’s a simple CSS snippet that will just remove the border without losing the row colors (use stylename “borderless2”).

.v-table-borderless2 .v-table-header-wrap,
.v-table-borderless2 .v-table-body {
    border: none;
    }
5

That worked!
Thank you again Jouni.
Paul