Change datagrid row background color depending on data

[SynopsisLabs (Steve)]

Hi,

I am trying to get the background color of a datagrid row to change depending on the data in a field.

I have had a look at this thread - Changing background color specific rows and cells but still cannot figure out how to reference the row data in general.

In the thread the OP says that they will

use the custom Type to access the row data

but I am not sure what they mean by custom Type.

If I try to use the formula builder and use the Collection tab, I only get access to a specific row

rather than each row.

I asked AI to build it for me but that didn’t work but there was a reference in the formula to Mapping.Form but I don’t see where that would come from in any of the tabs.

How will I get it to select the row without using a specifc index?

Thanks
Steve

[jptrinh (Jean-Philippe Trinh)]

Hey @SynopsisLabs

I’ve found one way to do this by adding a custom attribute to a cell. The value of the attribute can be bound to your logic. You can then target rows in CSS depending on that value! Here are the steps to reproduce:

In the Datagrid Settings, set any of the columns to type Custom. This will allow you to select the cell.

On that cell, you’ll want to add a new Attribute in the Settings panel. I’ve called mine row-color. In the value, you need to open the formula panel to add your logic. You have access to any data in your row. In my example, any row where item.data.Quantity > 60 will have a attribute value of color1, else color2. Now each row will have it’s unique attribute value.

The last step is to add the CSS to customize the color of the row. To have preview in the Editor, you can add an HTML element and put the CSS inside. What it basically do is that it will target the parent element with role="row" of the div that has the attribute row-color set to a certain value.

<style>
[role="row"]:has([row-color="color1"]) {
  background-color: #099AF2;
}
[role="row"]:has([row-color="color2"]) {
  background-color: #E00B41;
}
</style>

And that’s it! Let us know if that’s applicable to your use-case

(While testing it, i found that there can be a visual bug where the row does not fill the grid if the total width of the column is smaller than the width of the datagrid.)