V24 Change the header row grid background color with 100% pure Java, no CSS?

Flow
1

I know this subject has been discussed and I’ve searched the forum and the docs, but I am failing to understand how to change a grid header row background color using 100% Java and no CSS. Is this even possible? If not, I still can’t understand how to do it even if I have to use CSS. I’m trying to void CSS in my project, if I can.

2

You can add this to your styles.css.

vaadin-grid::part(header-cell) {
  background: ...;
}
3

In pure Java, with core Vaadin, not easy I think. With Viritin’s Grid extension, you can make a workaround and it is almos pure Java:

public static class StringGridWithCyanBackground extends VGrid<String> {
    public StringGridWithCyanBackground() {
        addColumn(s -> s).setHeader("String");
        setItems(List.of("foo", "bar", "baz"));

        // This property defines the background color of the grid, grid.style.background-color has no effect
        getStyle().set("--vaadin-grid-cell-background", "lightcyan");
        // Revert normal rows back to lumo default, this uses custom API from Viritin add-on
        withRowStyler((item, style) -> {
            style.setBackgroundColor(LumoProps.BASE_COLOR.var()); // "var(--lumo-base-color)"
        });
    }
}

Even if one masters CSS, this is kind f hard as it involves these custom parts (shown in Joacim’s CSS snippet). Another Css variable for the header background alone would be nice. That would be than easier with Java or with Css.

4

I know about this approach and it’s fine if you want too keep using CSS, but I don’t want to. I was excited to learn about Vaadin Flow as it seemed like a great solution for Java devs to be able to create UIs without HTML or CSS knowledge. But it doesn’t appear to be the case.

I was hoping to find something as easy as:

grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);

maybe:

grid.addThemeVariants(GridVariant.LUMO_HEADER_ROW_CONTRAST_50);

But it’s cool. I can learn the styles as needed, I suppose.