Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[grid] API for applying classnames (or part names) to column header and footer cells #1434

Closed
Tracked by #4748
eriklumme opened this issue May 22, 2019 · 6 comments
Closed
Tracked by #4748
Assignees
Labels
enhancement New feature or request needs discussion No decision yet, discussion needed vaadin-grid

Comments

@eriklumme
Copy link

Description

A cell class name generator was added here vaadin/vaadin-grid#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"].

@tomivirkki
Copy link
Member

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"

@eriklumme
Copy link
Author

Valid point, that's probably better.

@mvysny
Copy link
Member

mvysny commented Dec 17, 2020

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.

@garaei
Copy link

garaei commented Dec 17, 2020

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..

@vaadin-bot vaadin-bot transferred this issue from vaadin/vaadin-grid May 19, 2021
@vaadin-bot vaadin-bot added needs discussion No decision yet, discussion needed vaadin-grid labels May 19, 2021
@web-padawan web-padawan changed the title Add cell class name generator for header and footer rows [grid] Add cell class name generator for header and footer rows May 28, 2021
@rolfsmeds rolfsmeds added the enhancement New feature or request label Sep 29, 2022
@rolfsmeds rolfsmeds changed the title [grid] Add cell class name generator for header and footer rows [grid] API for applying classnames (or part names) to column header and footer cells Nov 30, 2022
@rolfsmeds
Copy link
Contributor

rolfsmeds commented Nov 30, 2022

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.

@tomivirkki
Copy link
Member

Covered by #6629 and vaadin/flow-components#5566

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request needs discussion No decision yet, discussion needed vaadin-grid
Projects
None yet
Development

No branches or pull requests

6 participants