I want to be able to assign a CSS class to a property, similar to how you can use cssclasses in notes. My use case for this is to be able to customize how certain properties are rendered. For example, I have a course tracker in Bases with a status property, which consists of:
Not Started
In Progress
Completed
Dropped
I want to be able to render these as pills, with different colors for each status.
Proposed solution
I think adding an input field to the “Edit property…” menu where you can add the CSS class, which is then appended to the cell element would suffice. Along with that, the actual text content of the cell would have to be added either as alt text or some other data-* attribute on the cell element so that we could select elements in CSS based on the text content, which would make the example use case above possible.
I was thinking of something very similar, that may be easier to implement, because it uses an existing feature.
The normal filter could get an option to use a certain filter group as a “Color Filter” that, instead of removing everything that doesn’t match, colors every row that matches a certain criteria.
So in your example, everything marked as “Completed” could be highlighted in green.
Yes, Pretty properties does exactly that, among other features. It applies data-attributes based on the property text to properties in notes and bases and optionally can style them with colors.
Though I would prefer too for this attributes to be added natively. Just from the efficienty point of view it would probably cost nothing to add them from the begining instead of running complex code to add them later.
Hi everyone (@Gransoni especially) - I just finished writing up a guide for using CSS with the Bases Cards view. There a few fun tricks in there, but the one to work around this issue is my favorite. I cited your post as one of the motivators for writing the guide, so let me know if you have any questions!
