How to set cell background color in grid/table in view in Vaadin?

Question

I am using Vaadin and I would like to set backgroung color to specific cell in my grid/table or if there is no possible to set background color to specific cell I would like to

Answer 1

You have two options to style the content of a Grid in Vaadin.

First, to set the style of a row, you can do the following:

grid.setStyleGenerator(stockRow -> 
  "1".equals(stockRow.getValue1()) ? "highlighted" : null);

The css class highlighted will be added to each grid row, were the condition applies. You can then style the row in SCSS using the following selector:

.v-grid-row.highlighted {
  color: red;
}

To select and style the cells, you need to select the td's:

.v-treegrid-row.highlighted > td {
  color: red;
}

I guess you'd want to style the cells directly so it would be more appropriate to set the style generator on a per-column mode as in following example:

grid
  .addColumn(Stock::getValue1)
  .setCaption("Value1")
  .setStyleGenerator(stockRow -> {
    switch (stockRow.getValue1()) {
      case "1": return "red";
      case "3": return "yellow";
      case "5": return "green";
      default: return null;
    }
  });

You can then style the cells in SCSS:

.v-grid-cell.red {
  color: red;
}