Applying Custom CSS to tables

[chibinet]

How do I use Edit Custom CSS on tables?
Can apply simple changes to components like a button. for example; background-color:yellow; will change the button to yellow.

If I apply the same line to the table, it does nothing.
What am I missing?

[Serisar]

Styling for tables is very limited in vanilla budibase, i was struggling with the same problem. You are basically limited to text color: #3923
But there is a plugin that allows you to customize tables more deeply, it's called Super Table and you can find it and other curated plugins here: https://github.com/Budibase/plugins

I can't help you with how to use it, because i can't use plugins in my organisation, so i don't have any experience with them.

[chibinet]

Find it odd that a custom css option is available for tables but does not seem to do anything.
Plugin options have yet to be considered, thank you for pointing them out.

[mikesealey]

Hey @chibinet, hey @Serisar

I'd like to dig a little bit deeper on this - it seems to have come up a couple of times recently, and it looks like an area where we could improve. In order to make sure we're doing things right it's important to understand how you want to use it, so I've got a few questions for you both (and anyone else who joins this discussion).

• What are you use-cases that require specific or targeted styling in the table?
• Is it that you would like to apply colours to the background of a particular row, column, or cell?
• Would you like to be able to a specific cell based on it's value (eg font-color: red; when Total Cost is greater than £n)

Thanks in advance!

[Serisar]

My specific use-case would mostly be coloring in the background, yes. I'm building page where users book into an event with their availability (Yes, No, Maybe). Someone is then placing users from the list into teams, depending on their availability and they should be able to identify them at a glance.
(Right now the bookings are shown in a table next to a form. The form is where the users are then selected from a relationship picker [which can't be styled either, but that isn't that important to me]. I'm sure that could be designed better, but that is how i got it to work atm)

At the moment i'm using three colored icons that i have added into the table which are shown depeding on the value of that row's availability (the column itself is not shown, because i want to limit the amount of columns/text). But this is limited to the start of a row, i can't slot in the icon between two columns. It also has no header and is separated by a vertical line from the rest of the row.

Ideally i would like to give a row a tint to indicate if a user is available or grey out unavailable users (but still show them). Changing the text color is close, but doesn't jump out the way i want it to, colored text is also quite tricky to read imo.

Thanks for taking a look at it!

[chibinet]

Hey @chibinet, hey @Serisar

I'd like to dig a little bit deeper on this - it seems to have come up a couple of times recently, and it looks like an area where we could improve. In order to make sure we're doing things right it's important to understand how you want to use it, so I've got a few questions for you both (and anyone else who joins this discussion).

• What are you use-cases that require specific or targeted styling in the table?
• Is it that you would like to apply colours to the background of a particular row, column, or cell?
• Would you like to be able to a specific cell based on it's value (eg font-color: red; when Total Cost is greater than £n)

Thanks in advance!

I am not looking for anything "specific" yet. Just want the ability to customize the look and feel of a table as it is presented to which ever audience I make it available too. The standard table is very utilitarian and is extremely limited for visual customization when presented in a non-privileged public page.
Fonts, Font Color, Headers Fonts, Header colors, column or row colors, header colors, boarder colors and/or styles are a few of the items I had hoped to adjut using the Custom CSS scripting.

[NicolasBio]

Hi,
I got redirected from #3923 (comment)
What I'm specfically looking for is coloring of text in cells based on which info is in there. This is already available when the datatype of the column is set to "single select" but this is not possible when you are dealing with a relationship column from a external db. Having more than 12 colors would also be nice.

Also setting a full column to a specific color, font styling, bold, italic.
Some kind of conditional formatting, or like you mention when total cost is greater set color to red.

Regards,
Nicolas

[joebudi]

This is now possible. https://docs.budibase.com/changelog/turn-your-data-into-a-canvas-with-conditional-formatting-%EF%B8%8F