Color-coding labels in a table based on pre-defined threshold values

My students have created a table in Ignition. In this table it has values for the percentage full a specific tank is. I would like for them to color-code the values based on pre-defined values. For example, if a tank is < 25% but > 10% full, I would like the text/label (or, preferably, the background of the text/label) to be color-coded yellow as a warning, and if it were <10% full to be color-coded red.

Is that doable? If so, how?

Thanks!

First question: Vision, or Perspective?

It was created in Perspective.

Okay, so within a table you must define styles as additional config on each data row. What that’s probably going to mean is a script transform on your incoming data (wherever it comes from) that adds style information to each row appropriate for how it should be rendered. Take a look at the way the Table component is renderer when you first create one:

Your binding or whatever data source on table.props.data needs to add that extra style information.

The table data is coming in as a query bind. Not sure how to do a script transform that can add style information to each row’s data. There is a “tank percentage full” field from the DB table that the color will be based off. For now, I have set the data column to be a progress bar so there’s at least some sort of visual. But that color is the same regardless of the percentage.

There's a bunch of threads about this same problem on the forum, but here's one example:

Thanks, you have been very helpful!

Pat