Change background color depending on cell value

App Building
#1

I have a table with a column full of dates. I'd like to change the background color to red if the date is more than a month old, otherwise keep it white.

I know I can do inline stuff like

{{ moment() - new Date(self) > 30 * (24*60*60*1000) ? 'red' : 'white' }}

but as you can tell this is messy and hard to debug.

So I tried to create a new JS query and reference {{query1.value}} in the column's background color property but it doesn't seem to be working.

The query is trying to reference the variable i to get the current row but I can't seem to figure out how to get the current cell of the current row.

Kind of at a loss here, any help would be appreciated. Thanks

Heatmap column in tables
#2

Hey @areeb!

Happy to help here! I don't believe you can call a query for each of these rows like this but you could write a preloaded javascript function (link to our docs on this here) and pass the value of each row using this same self value to clean this up a bit. Do you think this could work for your use case here?

#3

Thanks chris. How would I pass self for each row if I can’t call the function from there?

#4

If you create a custom JS function in your app, you should be able to call it in the column mapper using something like:

myCustomHelper(self)

Hope this helps, let me know if you have any questions! :slight_smile: