Is it possible to change the table cell color based on the value in the cell

[cynthiacorley]

I have a “due_date” field that, when displayed in a table, I would like to change its font color or the table cell color based on how close the current date is to the due date. For example, if the due date is 12/25/20, I would like the table cell (or font color) to change from the default color to RED when the current date is 1 week (e.g. 12/18/20) from the due date in order to warn the user that the due date is coming up.

I’m also open to any other suggestions that may work to provide a warning to the user that the due date is coming up.

I’m not that versed in Wrappler yet, so please provide detailed instructions, if possible.

Thanks much! Cynthia

[brad]

Hi Cynthia,

Yes, you certainly can change row, cell or text colour based on a dynamic value. You want to use the ‘Class Toggle’ Dynamic Attribute. Thats exactly the use case for it.

[cynthiacorley]

That’s great. Is there a “how to” for setting this up?

[brad]

Sure, here you go. It is for row, but the procedure is exactly the same for cells.

Set Table Row Background Color with Dynamic Value

You can change the table row background color, depending on a dynamic value from your database thanks to the dynamic attributes available in Wappler. In this tutorial we will show you how to use the default background color classes available in Bootstrap 4, but you can assign your own classes to the table rows. We created a dynamic table, which shows the data from our database. We want to use a red background when the quantity from the database is less than 50: [Screenshot_5] Select the tabl…

[cynthiacorley]

Thanks so much! It worked great.

[cynthiacorley]

Sorry, one more thing…

First of all, I assume there is a BS4 class called table-warning. I’d like to set the color to this when the current date is 1 week away from the due date. How do I set the condition to make this possible? It would have to be a “between dates” operation because I have the color changing to red when the current date is past the due date and green when it is more than 1 week away.

[cynthiacorley]

Never mind about my last quest about the 1 week until condition. I figured it out. I just used the weeks until data formatter then manually typed the operation outside of the data formatter. I was trying to do the operation inside the data formatter.