cockpit
cockpit copied to clipboard
cockpit-project
Add classes to cells (including heading cells) in cockpit-components-table.jsx
When we're using tables that use cockpit-components-table.jsx, there isn't a stable way to target a cell with CSS.
Ideally, it would have a class like ct-table-data--cellname where cellname is the same as the table's header in English, and it should not change when languages change.
So, if you had a table header named "Version", it would have a table heading class of ct-table-heading--version and each cell in the rows under it would have ct-table-data--version.
I tried to implement this myself today, but couldn't figure it out. This is needed to properly fix #17749, so we can target an entire column without having to resort to targeting data-label=version (which would only work in English) or use something like :nth-child(2) (which isn't expressive or stable, as it doesn't say what it is targeting and it could possibly change at any time, such as if we reordered the columns and didn't update the CSS number).
See https://github.com/cockpit-project/cockpit/issues/17749#issuecomment-1254528643 how we can fix the original problem.
Other than that ListingTable already ought to be able to do this -- as you said, each entry can pass arbitrary additional properties. This should include the className property. cockpit-podman does this here, for example.
Yes, className should be able to be passed too. But it would be great to have this automatically handled, as we already have the header string, so we know what the column would be called anyway.
we already have the header string
The table only gets the translated string, as it's instantiated with the translated values. So this cannot happen automagically inside the table, I'm afraid. If we want something like that, the static identifiers (which could just be the untranslated string, but preferably something without spaces and such) need to be passed explicitly.
Oh, that's a bummer.
OK, so then specifying the className would probably be the next best thing, I guess.
As @martinpitt mentioned above you can specify a className for a whole row from within the JSX. It's enough for handling specific CSS override cases. Let's not polute the generic c-c-table.jsx code with classes that are not generally needed.
