Set Table Row Background Color with Dynamic Value


#1

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:

Select the table row, then add new dynamic attribute:

Open Styling and select Class Toggle:

Add the class name, which you want to assign for this condition. In our case this is the standard Bootstrap 4 class table-danger:

Then click the dynamic data picker to set the condition, when this class should be applied:

Select the dynamic data binding, which value you want to check:

Then manually enter < 50 after the expression and click the select button:

You can see the changes in design view immediately. You can add as many class toggles and conditions as you need. For example we added the table-success class for the rows with quantity greater or equal to 50:


How-to Guides
#2

:ok_hand:t5:What can I say! Great tutorial! Clear and useful. Would be interesting to see stuff with expressions, template in that contexr or arrays.


#3

What would I put in the condition if I want to change the background of records that are prior to todays date?

Edit: Nevermind, I figured it out. Very simple. Great tutorial.


#4

how did you solve it? Would be nice to share a a part of your screenshot


#5

Simply added the datetime variable to the page and then used it in the expression.


#6

Could you go into detail of how to set the datetime variable in the first place please? I also need to show or hide things depending on whether they are before or after today. Thanks )


#7

The date and time component works as any other component in App Connect.
Just add it in the app structure and then it becomes available in the date picker.


automatically bumped #8

automatically bumped #9

automatically bumped #10