web-components icon indicating copy to clipboard operation
web-components copied to clipboard

[grid] Add cell class name generator for header and footer rows

Open eriklumme opened this issue 5 years ago • 4 comments

Description

A cell class name generator was added here https://github.com/vaadin/vaadin-grid/issues/1297

However, it does not allow generating classes for header or footer rows. In the issue, it is mentioned that this can be achieved by wrapping the contents of these cells in an element with the desired class name. This has at least two issues:

  1. With this approach, it's impossible to target the cell itself, e.g. for setting background color
  2. Styles for normal cells need to be in a <dom-module>, while other styles need to be in a <custom-style>

The solution could either be to set a separate generator for header and footer cells, or for the current implementation to also affect header and footer cells. The cells can still be targeted individually with [part~="header-cell"].

eriklumme avatar May 22 '19 11:05 eriklumme

A generator might be an overkill for this purpose. Since a column/column group can only have 1 header cell (+ 1 footer cell), it might be enough to have a string type property for it column.headerCellClassName = "foo"

tomivirkki avatar May 29 '19 12:05 tomivirkki

Valid point, that's probably better.

eriklumme avatar May 29 '19 12:05 eriklumme

Even better would be to have a HeaderCell.setClassName() - this way you can target individual cells which is handy if you have multiple header/footer rows.

mvysny avatar Dec 17 '20 12:12 mvysny

I use vaadin 18, today I headed this problem when I try to style some cell in the header individually. I want one of the header cell to be centered and the rest left aligned.

Tried the following but no effect. gridProduct.getColumnByKey("cnk").getElement().getStyle().set("text-align", "center")

Tried the following in .css file also no effect:

:host(.product-grid-header-center) [part="row"] [part~="header-cell"] ::slotted(vaadin-grid-cell-content) {
    text-align: center;
}

Please fix the issue..

garaei avatar Dec 17 '20 13:12 garaei

With the switch to ::part()-based styling, it would make more sense to provide API for setting part names to a col's header and footer cells.

rolfsmeds avatar Nov 30 '22 08:11 rolfsmeds

Covered by https://github.com/vaadin/web-components/pull/6629 and https://github.com/vaadin/flow-components/pull/5566

tomivirkki avatar Oct 16 '23 13:10 tomivirkki