web-components
web-components copied to clipboard
[grid] Add cell class name generator for header and footer rows
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:
- With this approach, it's impossible to target the cell itself, e.g. for setting background color
- 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"]
.
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"
Valid point, that's probably better.
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.
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..
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.
Covered by https://github.com/vaadin/web-components/pull/6629 and https://github.com/vaadin/flow-components/pull/5566