How to sytle headers in vaadin-grid

Hello,

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.

Regards,
Arnaud

Edit: I’m using Vaadin 14.

Hey Arnaud,

If I understood you correctly you want to target the first header row? You can do that with:

thead tr th {
  border-right: 1px solid red;
}

If you only want to target the first row when there’s multiple header rows you can use tr:not(:only-child):first-child.

setClassNameGenerator applies a class to the body cells.

Hi Joacim,

Thanks for the response.

I want target only the second header row. But this row have grouped columns. Like this:

| Student | Birth data | Results |
| First name | Last name | Place | Date | First | Second | Third |

I want to select the following columns : ‘Place’ and ‘First’ to apply ‘border-left: 1px solid red;’.
And of course the columns of the table are dynamic.

I found a solution based on Javascript.

Regards,
Arnaud

Hi Arnaud,

I’ve the same problem as you. Can you specify your solution?

Thanks in advance,
Alex

Hi Alex,

There’s an issue in GitHub regarding this here:
https://github.com/vaadin/vaadin-grid-flow/issues/657.

You can try the solution at the bottom.

Also, remember that if the structure isn’t dynamic you can use CSS to add the borders.

Hi Joacim,

Thanks for the response. I solved my problem only with css. I work with the class name applied to the grid and then I adapted your solution with the thead tr and th tags. Like this:

:host(.mainGrid) thead tr:first-child th:nth-child(6) { ... }
and
@CssImport(value = "./styles/component/turo-grid.css", themeFor = "vaadin-grid")

Solution is attached…
Regards, Alex

18287217.png