Set header background Vaadin 14 grid

user_1119859 0
Viewed 348

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

vaadin14 vaadin-flow grid java
2 Answers

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

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

user_3965730
Related