Multiple grids in application with different header styles

Flow
1

I have tried different approaches but cannot seem to set different font sizes, colors and background to grid headers. The Body Cells I can do with Class Name generator, but cannot find a way to manage header formatting.

Is there any good documentation for multiple grid styles in the same app?

PS: I have used the :host with theme, but the application does not seem to pick up those values.

2

It seems to work for me, at least in a trivial example, with a class name + th element selector. So I have two simple Grids, both with a CSS classname:

        Grid<String> grid1 = createGrid(1);
        grid1.setClassName("grid1");
        Grid<String> grid2 = createGrid(2);
        grid2.setClassName("grid2");
        add(grid1, grid2);

I’m importing a CSS file for vaadin-grid with @CssImport:

@CssImport(value="./styles/custom-grid.css", themeFor = "vaadin-grid")
public class MainView extends Div {

And in that CSS file:

:host(.grid1) th {
    color: blue;
}

:host(.grid2) th {
    color: red;
}

With this configuration, the headers’ (and only headers’) text color should be specific for each Grid.

You could also use a part attribute selector instead of the th element, which is probably more “correct” (not relying on implementation details):

:host(.grid2) [part~="header-cell"]
 {
   color: red;
}

For more complex scenarios, you can also add any Component in the header cell with grid.addColumn(...).setHeader(someComponent); Those components could then e.g. have CSS class names that could be targeted like in the above examples.

-Olli

3

Thanks! I tried doing that, but it still did not work. Finally dawned on me that I had a main grid styles file that was superseding whatever I was doing in other component level or page level styles files. Now, I have specific class names in ALL the grid styles files and it is finally working.