Change the colour of table text based on specific condition

Ask the community
,
1

Hello,

I would like to change the text colour of specific values in a table based on some conditions. For example, If the value of a element in a column is less than 0 , I need to change the colour of all those values less than 0 to red and else green. Is it possible to do with wix code?

The values for the table is obtained using wix fetch from a external website. It is also ok for me if it is possible to use a repeater with a button or image(like a led indication) and then hide and show it based on the condition. But the problem i am facing with repeater with a button is that , all the button have the same id. So if i hide one button based on the condition of a row, all the buttons will get hidden. Is there a good way of approach and a possible way to solve this issue?

Thanks.

2

The elements inside of a Repeater are unique to that Repeater. So the Buttons have the same IDs, but so do the Images, and Text boxes, etc. A Button in a Repeater item can be handled independently of buttons in other Repeater items. You do this using Repeated Item Scope .

For more information about Repeaters:

3

Here’s a quick example of a button onClick() function using Repeated Item Scope:

export function button1_click(event, $w) {
  if(some condition is true) {
  	$w("#button1").show();
  }
  else {
  	$w("#button1").hide();
  }
}

The $w scope selector parameter in the function is what makes Repeated Item Scope work.

4

Hello Yisrael,
Thanks for your reply. But is there a way to solve my problem only using a table? My example uses case is that I have a temperature value in a column of a table. And I need to change the colour of the text if the temperature is greater than 37 degrees or else to green. I will be having around 3000 rows /values. So using a repeater will might take lot of time to load in a single page. I am getting these temperature values along with some other data using wix fetch in json format.

5

There currently isn’t any way to do what you want in a table. Although I don’t think there should be much of a performance problem using repeaters. After all, a table pretty much does the same thing as a set of repeaters.

6

I think you can technically pull off styling a table the way you want, but it is a bit of coding work,

The idea is to set the columns in the table as richtext columns. Then you can use the styling explained here to change the text color based on your conditions.

7

Hi Sam, Thank you for the link to the text styling. Would you be so kind to add a quick example of how you would change the color of some text using the HTML markup?

I have a text item $w(‘text15’) that is connected to my database. The database element is in Rich Text format. How do I set the color via html?

I was thinking it would be $w(‘text15’).html = Some HTML… but that does not work. Any help would be much appreciated!

8

Hi Yisreal, I have a table that displays a database from read and write datasets, How do I change the color of a certain text in one of the columns of the table if that text is displayed on the table?

9

How can I make the row in the table take a different color depending on the cell result
I have a column in the table that has a date
I want to calculate the duration
Example: If data entry is less than 12 hours, the row in the table is green
If data entry is more than 12 hours and less than 24 hours, the row in the table becomes yellow
If data entry exceeds 24 hours, the row in the table is red

10

This is somewhat doable by changing the text color of the text in a row using richtext columns as mentioned above.

However, I think you should consider using a repeater instead of a table. That will give you a lot more flexibility. You can definitely conditionally change the background color in a repeater “row” (their called “items” in a repeater) based on its data. (Look at onItemReady to do so.)