Color perspective table cell depending on value in another column

Ignition Early Access
1

How do I color table cell depending on value in another column?

2

Hi,

To apply function or style to cells individually, you will need to provide this information in the data source. The data item should be an object that includes reserved keys and values, for example:

city: {

  value: 'Folsom',

  editable: true,

  style: {

    backgroundColor: 'grey',

    classes: [] | ''

  }
}

See: http://forum.inductiveautomation.com/t/feedback-new-perspective-table/ under data for more information.

Therefore, to get your desired result, you will have to transform your data so that the desired data item is an object containing the desired style based upon the value of another column/data item. You can accomplish this by applying a script transform via bindings.

Hope this helps.

-Yousuf

1 Like
3

Actually I was using Named Queries to populate it. It looks like I need to convert it in Json format and manipulate the data. Are you sure there is no easier way to do it?

4

This is the most reliable way to attach a style to an individual cell, and the only way at the moment.

5

Is this also true for the color property of the progress bar in the column properties? I’d like to change the color of the property value based on the value of the cell compared to a value in another column.

It would be great if I could bind an expression to the color property of the progress bar to an expression that looks at the value of one column compared to another.

6

Interesting idea. I’m not sure how to expose that configuration in the table itself, but I’m open to any ideas.

Something to consider. The progress bar is currently being updated in order to make it compatible with theming. This update will include the ability to style the track and the bar elements of the progress component. Once that work is merged, might be a month, a likely solution would be to configure the column as a view, where the view located at the specified path contains a progress bar. Then, you’ll be able to configure the styles of the progress bar based upon the parameters passed to the view by the table component.

-Yousuf