Trouble coloring individual cells in a table

I have a very basic example here where I’m trying to color specific cells based on a specific string value being present in that cell. I put in print statements and I’m hitting the return “green”, return “orange”, etc… points, but at run time I’m only getting the gray and white alternating row colors, none of my specific cell colors. The css I’m using I pulled directly from book of vaadin, thought this would be straightforward. Maybe there’s something small I’m missing.

Cell style generator code:

table.setCellStyleGenerator(new Table.CellStyleGenerator() { @Override public String getStyle(Table source, Object itemId, Object propertyId) { if(propertyId != null ) { Item item = source.getItem(itemId); if(item.getItemProperty(propertyId).getValue().getClass() == String.class) { String cellValue = (String)item.getItemProperty(propertyId).getValue(); if( cellValue.equals("AA") ) { return "green"; } else if( cellValue.equals("BB") ) { return "orange"; } else if( cellValue.equals("AB") ) { return "yellow"; } else { return "white"; } } else { return "white"; } } else { return null; } } }); CSS:

.v-table-cell-content-green {
background: #33BB00;

.v-table-cell-content-orange {
background: #FCB724;

.v-table-cell-content-yellow {
background: #FFFF00;

.v-table-cell-content-white {
background: #FFFFFF;
[/code]What it looks like rendered in the browser when I dive into the HTML:

<td class="v-table-cell-content v-table-cell-content-green" style="width: 59px;"><div class="v-table-cell-wrapper" style="text-align: left; width: 59px;">AA</div></td>

I remember this being an issue before, when v-table-cell-wrapper had specified colorings. Try .v-table-cell-content-yellow .v-table-cell-wrapper { background-color: #FFFF00; }

Thanks, I tried this, but no such luck, still no colors on any of the cells…

Ok, I was making my css changes inside myprojectname.scss as opposed to styles.css. Apparently I was in the wrong spot. Thanks for looking at this though.

If you have a styles.css, Vaadin will not compile a new theme from your scss files. Ideally you should delete the css file and make changes in the scss files instead.