How to style headers in vaadin-grid - vaadin

Question

I'm using a vaadin-grid with two header rows: one for the title of grouped columns and the other one for the real title of the column.
I want a vertical separator between the grouped columns.
For now, I use a classname generator on the first column of each group to add a left border :
grid.addComponentColumn(...)
.setHeader("My column")
.setClassNameGenerator(line -> "first-group-col")
with a dom-module included via JsImport:
import '#polymer/polymer/lib/elements/custom-style.js';
const documentContainer = document.createElement('template');
documentContainer.innerHTML = `
<dom-module id="my-grid-theme" theme-for="vaadin-grid">
<template>
<style>
.first-group-col {
border-left: 1px solid red;
}
</style>
</template>
</dom-module>`;
document.head.appendChild(documentContainer.content);
But the class '.first-group-col' doesn't appear on the header rows and I don't see how can I add a class on a header cell.
So how can I add a border on some column in the header rows ?
The number of columns in my grid is dynamic so I can't just use CSS to add the border on nth column.
I'm using Vaadin 14.
Regards,
Arnaud

Answer 1

I use a classname generator on the first column
Class name generator is applied for body cells, but not for the header cells.
You can style header by using something like follows, say you have Grid, with grid.addClassName("my-grid");
:host(.my-grid) [part="row"] [part~="header-cell"]{
padding-left: 3px;
color:brown;
background:var(--lumo-primary-color);
align-items:flex-start;
}
You can add the above css snipet to e.g. gridheader.css file in your frontend/styles folder and then import it
#CssImport(value = "./styles/gridheader.css", themeFor="vaadin-grid")