How can I style the footer in a grid?

Question

I created a Vaadin (v24.2.1) grid with a FooterRow which I am not able to style using the css selectors.

The footer was created with:

FooterRow footer = this.grid.appendFooterRow();
footer.getCell(this.grid.getColumnByKey("value")).setText("4711.23");

I'm trying to style the footer with

vaadin-grid::part(footer-cell) {
    font-weight: bold;
    font-size: 18px;
}

which has no effect. But when I add a

background-color: red;

the line turns red. It seems like I'm using the wrong selector (https://vaadin.com/docs/latest/components/grid/styling) , and there is an other layer which applies the color bit not the font-weight and size? When I use "vaadin-grid::part(last-row-cell)" everything works as expected, but I can not manage to style the footer. Anyone any idea how the style the grid's footer?

Answer 1

The footer cell contents are actually rendered inside a vaadin-grid-cell-content element which overrides font-weight and font-size. I can't see an easy way to target these elements specifically for the footer.

However there is an easy workaround: Create an element with a CSS class and put that into the footer cell:

Span footerText = new Span("Footer text");
footerText.addClassName("footer-text");
grid.appendFooterRow().getCell(column).setComponent(footerText);

It also looks like your solution is working with the upcoming Vaadin 24.3 version.