Vaadin - Coloring Table Cells Based on Content

Vaadin - Coloring table cells based on content

Well the above code actually works if you put the css in the correct css file. I was trying to add the styles to myproject.scss as opposed to styles.css where I guess you're supposed to.

Coloring cells in Vaadin Grid that uses OpenCSV

Going off the CSVReader and Vaadin documentation examples with the generic Person class, you can do something like:

grid.addColumn(str->str[columnIndex])
.setKey(header)
.setHeader(header)
.setClassNameGenerator(str -> {
    if (Integer.valueOf(str[columnIndex]) > 8){
        return "condition1";
    }
                            
    if (Integer.valueOf(str[columnIndex]) < 8){
        return "condition2";
    }
                            
    return null;
});

Similar to what is done in the cookbook example, you can then define those conditions in the corresponding css file.

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

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;
}

How to color a row or cell of a grid depending on it's data in Vaadin 14

In Vaadin 14

Style a Grid row based on data

First, you need to set the CSS class name generator for the row. This will add the CSS class name to the td elements created by Grid. The generator function receives your item and you should return a CSS class name as a String or null if you don't want to add a class name for certain rows. Multiple class names can be returned from the generator as space-separated.

grid.setClassNameGenerator(person -> {
    if (person.getStatus() == Status.DIVORCED || person.getStatus() == Status.SINGLE) {
        return "my-style-1";
    } else {
        return "my-style-2";
    }
});

To change the style based on the CSS class names, you need to create a theme for Grid.

In frontend/styles folder add styles.css.

td.my-style-1 {
    background-color: black;
    color: hotpink;
}

td.my-style-2 {
    background-color: hotpink;
    color: black;
}

And include the style to your app.

@Route
@CssImport(value = "./styles/styles.css", themeFor = "vaadin-grid")
public class MainView extends VerticalLayout {
// your code for grid
}

Style a Grid cell based on data

The CSS style importing and creating is done the same way as with row styling, but the Grid API used is different.

For a cell, you should use the column class name generator:

grid.getColumnByKey("status").setClassNameGenerator(person -> {
    if (person.getStatus() == Status.SINGLE) {
        return "my-style-3";
    }
    return null;
});

How to add specific color to Table row in Vaadin?

You can use the CSSInject Add-on to add needed style name on the fly.

See https://vaadin.com/directory#addon/cssinject

String color = "#CCDDFF";
CSSInject css = new CSSInject(getUI());
css.setStyles("."+color+" { background-color: "+color+"; }");

how to change row color of table in vaadin

You can do this with a CellStyleGenerator and apply it to all cells in one row.
More about CellStyleGenerator here.

Vaadin - Highlight table selected cell/row

Built-in themes for Vaadin usually support specific style for selected row in vaadin table.

If you want to apply custom style on selected row you can do it through CSS:

.v-table tr.v-selected {
    background-color: #5B677D;
    color: #fff;
}

Prerequisite: Chapter 8.4 "Creating and Using Themes" from Book of Vaadin

Vaadin Grid: alternating row color if not using LUMO theme

For those looking for an answer, look at the comment from cfrick. The CSS selector is

:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="body-cell"]

Change color of cell in Grid (Vaadin)

The section about the Grid in the Book of Vaadin explains this in the subsection Generating Cell Styles:

You set a CellStyleGenerator to a grid with setCellStyleGenerator(). The getStyle() method gets a CellReference, which contains various information about the cell and a reference to the grid, and should return a style name or null if no style is generated.

For example, to add a style name to a specific column, you can match on the property ID of the column as follows:

grid.setCellStyleGenerator(cellRef -> // Java 8
    "born".equals(cellRef.getPropertyId())?
        "rightalign" : null);

You could then style the cells with a CSS rule as follows:

.v-grid-cell.rightalign {
    text-align: right;
}

---

Related Topics