Doesn't change color of cell depending on cell content

Flow
1

Hi guys,

I have a grid and I would like to change the color of the cell depending on the number inside the cell.

This is what I have:

I have a Css file inside Styles called grid-dashboard-style.css:

.v-grid-cell.lowProjectTime {
    background-color: #b30000;
}
.v-grid-cell.averageProjectTime {
    background-color: #ff8c1a;
}
.v-grid-cell.highProjectTime {
    background-color: #2d8659;
}
.v-grid-cell.overMaxProjectTime {
    background-color: #004d00;
}

In my Java code I have on top of the class:

@CssImport("./styles/grid-dashboard-style.css")
public class GeneralView extends VerticalLayout {

And then I have plenty of columns and I fill them like this:

for (Week week: weekRepository.findAll()) {
                Grid.Column<Employee> gridColumn = grid.addColumn(employee -> employee.getPercentageOnProjects(week)).setHeader("Week " + week.getWeekNumber() + " " + week.getYear()).setWidth("120px");

                double averageOnProject = getAveragePercentage(week);
                DecimalFormat df = new DecimalFormat("#.##");
                filterRow.getCell(gridColumn).setText(df.format(averageOnProject) + " %");

                gridColumn.setClassNameGenerator(cell -> {
                    if(cell.getPercentageOnProjects(week) < 50)
                        return "lowProjectTime";
                    else if (cell.getPercentageOnProjects(week) < 75)
                        return "averageProjectTime";
                    else if (cell.getPercentageOnProjects(week) <= 100)
                        return "highProjectTime";
                    else if (cell.getPercentageOnProjects(week) > 100)
                        return "overMaxProjectTime";
                    else
                        return null;
                });
            }

But the color of the cells aren’t changed… What do I do wrong?

Thanks in advance for taking the time :slight_smile:

2

Hello. In order to make it work, you should modify your CSS file like this:

[part~="cell"]
.lowProjectTime {
    background-color: #b30000;
}
[part~="cell"]
.averageProjectTime {
    background-color: #ff8c1a;
}
[part~="cell"]
.highProjectTime {
    background-color: #2d8659;
}
[part~="cell"]
.overMaxProjectTime {
    background-color: #004d00;
}

And then you need to load it like this:

@CssImport(value = "./styles/grid-dashboard-style.css", themeFor = "vaadin-grid")
3

Awesome great thank you! I had tried with the [part~=“cell”]
but had forgotten the ThemeFor!