How to style headers in vaadin-grid

user_2909535 0
Viewed 1325

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

vaadin-grid vaadin
1 Answers

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")
user_89621950
Related