Set header background Vaadin 14 grid

Question

I am trying to set a background color to the header in a Vaadin 14 Grid. But I really have no clue how it may work.

This is my code sofar:

grid = new Grid<Room>();

I probably have to do some

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

and access some Shadow DOM elements within grid-header.css, but I just can't figure out how it works.

So, does anybody know, how so set the background color of the header of a grid in Vaadin 14 ?

thanks for any help! Thorsten

score 4 · Accepted Answer · answered Jun 21 '21 at 07:31

If you want to set the header background for all your grid you can add this in your grid-header.css:

[part~="header-cell"] {
    background-color: pink;
}

If you want a specific background, you can add a classname to your grid:

grid.addClassName("background-example");

And use this CSS:

:host(.background-example) [part~="header-cell"] {
    background-color: green;
}

score 3 · Answer 2 · answered Jun 21 '21 at 07:29

3

Your setup looks correct. What remains is the CSS. Try this:

[part~="header-cell"] {
  background-color: var(--lumo-primary-color);
  color: var(--lumo-primary-contrast-color);
}

You can of course use whatever colors you like.

In case you hadn’t already found it, here’s more documentation about how to style the internals of components: https://vaadin.com/docs/latest/ds/customization/styling-components

answered Jun 21 '21 at 07:29

Jouni

That solutions works perfectly! Thank you very much. But just an additional question: I set the css to [part~="header-cell"] { background-color: black; color: red; } So, foreground color is red, background black. But how can I set the color what the header is active, when the user clicks on it for sorting? Right now the color when active is blue, how may I change it ? – user1119859 Jun 21 '21 at 08:13

2 Answers2