Add style on a specific Header rox in Grid V24

General
1

Hi Every one.
I add a header row on top of my grid to add a definition of several columns.
I used this code :

HeaderRow mainHeader = myGrid.prependHeaderRow();
			HeaderCell namesCell = mainHeader.join(
					mainHeader.getCell(colFirstName),
					mainHeader.getCell(colLastName));
				namesCell.setText("Names");

I would like to style this headrow (center alignment, color,…).
But there arer no “addClass” methd for the object HeaderRow.
How can I do that ?

2

Here is a list of CSS selectors that can be used in Grid: How to style the Grid component | Vaadin components

There you will find the following:

Cell in first header row vaadin-grid::part(first-header-row-cell)

So you use that selector:

vaadin-grid::part(first-header-row-cell) {
  text-align: center;
  color: red;
}
3

Thank you and sorry, I could find that in that doc section

4

Another question. If I want to change the color in other column of the header row, is it possible ? Or I only can style the entire header row ?

5

I’ve found the solution. Instead to use set text on my HeaderCell, I use the “setComponent” method and use an HTML component.

6

There’s actually a css solution (that’s obviously more lightweight):

  1. Apply a part name to the column whose header cell you want to style: How to style the Grid component | Vaadin components
  2. Combine that custom part name with the first-header-row-cell part name to target only header cells in that column
vaadin-grid::part(foobar first-header-row-cell) {
  color: blue;
}
7

I don’t manage to apply your solution. I’ve applied a part name to the column, for example “namestyle”.
And in css I have to implement like that ?

vaadin-grid::part( namestyle first-header-row-cell) {
  text-align: center;
  color:var(--lumo-primary-text-color);
  
}
8

Ahh, sorry, my memory failed me there – that’s not how you do it.

You can actually get the header cell itself from the HeaderRow: headerRow.getCell(Column col). In a col group header, the cell belongs to the first col in the group, so you could e.g. do

HeaderRow.HeaderCell cell = headerRow.getCell(g.getColumns().get(0));

and then you can just add a part name directly to it:

cell.setPartName("foobar");

and target it like any other part name:

vaadin-grid::part(foobar) {...}

9

Nice. It’s work very well and it’s more lightweight ;-).
Thank you for your time.