Row color - convert strings to integer value?

App Building
1

Hello,
I'm trying to color rows based on values, in the table these columns are set to "number" but they do load as strings, and it seems that in the coloring condition they read as strings because it doesn't work in any logical way... any ideas about what can I change? Thank you:

Attaching the code within my "Row color"

{{
currentRow.users > currentRow.completed_assessments
? 'green' : ''}}

2

Are you looking to. use a HEX value?

3

That part actually works, the coloring so hex or not that's good...but the condition isn't being met

Sometimes when one value is larger than other it gets the colors and other times when it's lower it gets the color so I assume this is because they read as strings and not numbers? Just a guess

4

Are you using a new table component or a legacy Table component?
If New, then use currentSourceRow instead of currentRow

5

New, did try the source because I wasn't sure what the difference is and it didn't work but I might have changed something else so will give it a go and report back...at a computer in ten :slight_smile:

6

Don't think this is it sadly, see attached screen shot and how the number "Completed assessments" is sometimes higher but also sometimes lower, than "Users" and it gets a color..

image
image1342×618 46.3 KB

7

Yep that is weird. Seems like a bug to me. Just to safe, is each column a number type?

8

it is, unless I'm missing something? Is this only defined at the table level (attaching screenshot)
image

9

Yes at the table level. This is strange. Going to try and add a tag as a bug and see what the Retool team can find out

1 Like
10

Hey Scott,
​

Thanks for sharing your issue with the table colors. I understand your concern that certain rows aren't being highlighted correctly based on the "users" and "completed_assignments" values.

While I tried replicating the issue with a similar dataset in a test app, it's entirely possible that the difference lies in our data structures. Here's a screenshot of my test app for your reference:

Let's check the data types of your columns to ensure they're numbers as expected. To do this, can you add the following code snippet to a JS query in your app? Make sure to use the name of your table in place of dataTable, if its different. This will log the data types to the console:

let aType = typeof(dataTable.data[0].completed_assessments);

console.log("completed assignment type: ", aType);

let uType = typeof(dataTable.data[0].users);
console.log("users type: ", uType);

Once you share the output from the console, I can continue troubleshooting with more specific guidance.

Also, are you using a cloud instance, or self-hosted? If you're self-hosted, what version are you using?