How to sytle headers in vaadin-grid


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 :

.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">
            .first-group-col {
            	border-left: 1px solid red;


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.


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.


Hi Arnaud,

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

Thanks in advance,

Hi Alex,

There’s an issue in GitHub regarding this here:

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) { ... }
@CssImport(value = "./styles/component/turo-grid.css", themeFor = "vaadin-grid")

Solution is attached…
Regards, Alex