FastUI icon indicating copy to clipboard operation
FastUI copied to clipboard

Adding class or id tags to Table rows, columns based on criteria?

Open ed-p-may opened this issue 1 year ago • 2 comments

This is a really great tool. I am super excited to use it more.

I wonder:

If you I have a large table of text, what would be the best way to add custom class or id tags to specific rows or columns so that I can override their styling with CSS? For instance, maybe I'd like to apply a red highlight color to certain rows if they have missing data, negative values, etc.... ? I'm not sure if tagging is possible with table items already? But if not, then adding that feature would be super helpful (to me at least).

I am able to add custom CSS by overriding the prebuilt_html just fine, but wondering what your thoughts on adding tagging to specific table elements would be?

thanks! @PH-Tools

ed-p-may avatar Dec 21 '23 23:12 ed-p-may

On a cell it should be fairly easy, as you could implement your own Display type.

Not sure on rows, but I'm sure we can find a way to support it.

samuelcolvin avatar Dec 21 '23 23:12 samuelcolvin

Interesting. Thanks for the suggestion. Do you mean something like:

from fastui.components.display import DisplayLookup
class MyDisplayLookup(DisplayLookup):
    class_name: _class_name.ClassNameField = "my-custom-class"

and then using the custom MyDisplayLookup in my Table when I add the columns data?

from fastui.components import Table
Table[MyCustomPydanticType](
    data=some_data,
    columns=[MyDisplayLookup(field="A Column Name")]
)

When I test it, it does run, but doesn't seem like the class_name gets applied when I try that though?

ed-p-may avatar Dec 21 '23 23:12 ed-p-may