How to change the Row Color or the Cell Color (with Javascript)

Queries and Resources
,
1

I have a table that I would like to set a custom background for each row or cell.

The idea is that there are 4 fields and instead of evaluating them, I want to send an API request or execute a javascript query on that field/row to get True/False and then change the color based upon that.

An example,

We have table CARS,
This table has a row with some information, car_brand, car_type, car_color
I would like to query an api,
carapi.com/evaluate_car?car_brand=car_brand&car_type=car_type&car_color=car_color
and based upon that I would like to change the color to red if the API returns False.

What happens is that there are a couple things I already tried.
The obvious answers:

  • Use the Row Color property, doesn't work with custom queries and logic
  • Tried to do a javascript query (which works) and then change with table1.rowColor[0] = 'red' doesn't work
  • Tried using the background property, again same problem, we can't use queries as functions and then get evaluations, you can use queries that already gave the results {{query.data}} but you can't evaluate the rows/cells on the fly, especially not with the javascript and then change color.

One proposal that should work is that we create a temporary column and then set it to a specific color (change value) based on the API call and then use that column (with Row Color) to simply do the color change.

Any suggestions would be helpful

This would be also a feature request that this part is improved. I would prefer to be honest if I could write python, since javascript is really scatchy for me and too asyncy.

2

Hey @innicoder!

When would you like the logic to run that changes the row color?

An indexed temporary state might help here. You'd then be referencing a value that you can update whenever you want. If you trigger a JavaScript query that does something like:

const rowIndex = i; //this declaration might change depending on where you trigger the query
const evalutaion = await evaluateQuery.trigger({additionalScope: {rowIndex}});
evaluationTempstate.setIn([rowIndex], evaluation);

Then you can reference {{ evaluationTempstate.value[i] }} in the "Row color" property of your table.

Does that work?

3

Yes, this is the perfect solution.

I currently fixed with an actual column and setting the value of that column (via index) which can be improved by this temporary one which fits the exact purpose.

Ideally we would be able to handle the state better but I do understand it's a internal thing.