Conditionally set color of entire row in table- Default Row color for entire row

Is it possible to set the color of an entire row based off of its data? I know you can do this with individual cells using the “background color” options under “columns”. But, ideally, I wouldn’t want to manually set the color for each new column in a row.

4 Likes

Hi @Timthetic!

It’s not possible as a native setting yet :confused:. The closest options would be:

Calculating each row color somewhere else, perhaps in a temporary state that returned a value like ['red','blue','blue','red'] and then using the same {{ tempState.value[i] }} as the background color setting in each column.

You could also do this using CSS (How to write custom CSS in Retool!), but you’d need to generate dynamic CSS by mapping the rows of the table and selecting the correct table indexes

Ok, I see. Thank you for your reply!

Of course! I’m going to move this over as a feature request as well, as a Row Default background color option has come up a few times but I don’t think there’s a request there to track yet. Here’s my thought there:

Add a Default background color mapper, which would calculate the background color of each row of a table based on a similar setup to the individual column background color. This could be individually overridden by the column background colors, but if not set then we would use the default color. This would make it easy to do things like {{Math.abs(i % 2) == 1?“grey”:“blue”}} to alternate color for odd/even rows.

4 Likes

Oh yeah, I like that thought. That behavior seems pretty intuitive which makes it easy to get a handle on.

2 Likes

Just curious if this feature request has been prioritized? We are looking for a similar thing. Being able to dynamic color rows would be really helpful.

2 Likes

+1 for this one

+1 me on this feature.

How about this y’all…

Put the color hex as a column in your table (here called color_hex), then include {{currentRow.color_hex}} as the background color for every column.

(of course, then you can hide the column “color_hex” since the user probably won’t want THAT info :wink: )

3 Likes

@mathfour This is amazing! :clap: Thank you for sharing.