Change the foreground and background colors of grid column headers

General
1

Hello,
Is it possible to change the colors of the grid column headers, foreground and background, is there an example of this?

2

Are you familiar with CSS? There is a ton of CSS selectors for various Grid parts listed here:

3

Very little knowledge about CSS, one of the reasons we adopted Vaadin was precisely to use the minimum amount of CSS and HTML

4

I use the following in my <theme>/styles.css to style Grid and GridPro header cells:

vaadin-grid::part(header-cell) {
    background-color: aliceblue;
}

vaadin-grid-pro::part(header-cell) {
    background-color: aliceblue;
}

Be aware that not only the header cells (with the column labels) itself are matched and colored but potentially cells with filter components in those header rows too.

kind regards
Dominik

1 Like
5

I certainly can relate to that, although I can do some CSS as well.

With VGrid from Viritin add-on, you can some possibilities, but styling header sure is difficult. An example here:

    VGrid<Person> grid = new VGrid<>(Person.class, false);

    Grid.Column<Person> firstName = grid.addColumn("firstName");
    Grid.Column<Person> lastName = grid.addColumn("lastName");

    // Grid cells (and header cells) for some reason have background color (although the app default by default)
    grid.getStyle().setBackgroundColor("Green");

    grid.setItems(list);

    // even rows with special styling with rowstyler
     grid.withRowStyler( (item, style) -> {
        if(item.getId()%2 == 0) {
            style.setColor("blue");
            style.setBackgroundColor("lightgray");
        }
    });

     // Viritin's getStyle for colun work as expected (exists in core, but non-functional...)
    firstName.getStyle()
                .setBackground("red")
                .setColor("white")
                .setFont("bold 20px Arial")
                .setTextAlign(Style.TextAlign.RIGHT)
                .setOutline("2px dotted black")
    ;

    // There is no Style object to configure the header that I'm aware of...
    // an ugly workaround for the header row: use component instead of raw text
    lastName.setHeader(new Div(){{
        getStyle().setBackground("pink")
                .setColor("white")
                // Position absolute to make span cover the whole header cell...
                .setPosition(Style.Position.ABSOLUTE)
                .setLeft("0")
                .setTop("0")
                .setWidth("100%")
                .setHeight("100%");
        add(new Div("First Name"){{
            // Centering text vertically in CSS 😥

            getStyle().setPosition(Style.Position.ABSOLUTE);
            getStyle().setTop("calc(50% - 0.5em)");
            // and then style the actual header text the way you want to

            getStyle().setFont("bold 20px Arial");
        }});
        setSizeFull();
    }});

The problem above is that CSS is CSS, even if declared in Java. More of those css properties from the base theme would make things often easier (althought they are not that flexible as actual css selectors).

6

Actually, defining the other of the existing style properties might be enough for you (with VGrid), if you just want header row to be of a specific color:

    // now th whole grid should be green, but cells override this by default with default background
    grid.getStyle().setBackgroundColor("Green");
    // This makes the grid cells transparent -> green background from grid is really there
    grid.getStyle().set("--vaadin-grid-cell-background", "transparent");
    // Now using rowStyler you'll apply only to actual data rows, Column-> Style will override per column
1 Like
7

Hello,

With the code snippet below, it worked exactly as we wanted.

vaadin-grid::part(header-cell) {
    background-color: aliceblue;
}

vaadin-grid-pro::part(header-cell) {
    background-color: aliceblue;
}

Thank you very much

8

That’s good, remember that this way you apply it to all the Grids you create in that App.

9

Did you try adding more rows and scrolling down so that the rows above the will pass over Header and still visible ?

10

Yes, I did several tests and it worked very well.

image