# Change the Perspective Table row background color based on the one column's data value

**URL:** <https://forum.inductiveautomation.com/t/change-the-perspective-table-row-background-color-based-on-the-one-columns-data-value/66878>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 24, 2022, 7:01am UTC](https://forum.inductiveautomation.com/t/change-the-perspective-table-row-background-color-based-on-the-one-columns-data-value/66878 "2022-11-24T07:01:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Krishnapriya\_K\_S](https://avatars.discourse-cdn.com/v4/letter/k/cab0a1/32.png) [@Krishnapriya\_K\_S](https://forum.inductiveautomation.com/u/Krishnapriya_K_S)\
**Post date:** [November 24, 2022, 7:01am UTC](https://forum.inductiveautomation.com/t/change-the-perspective-table-row-background-color-based-on-the-one-columns-data-value/66878/1 "2022-11-24T07:01:43Z")

</div>

Hai all,

This is my table i need to change the color based on the value of status.  
If the Status=Open the color of the row is red ,Status=In Progress Color is yellow and the Status is Delegated the color is green

 ![c1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/d/9d6b832af4871df642e750a00d8b10d5e456ef20.png)  
Please suggest your idea to do like this  
 ![MicrosoftTeams-image (11)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/6/667275714e729d0edb9ba23118ae241f28defb4f.png)

Thanks in advance

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 24, 2022, 8:32am UTC](https://forum.inductiveautomation.com/t/change-the-perspective-table-row-background-color-based-on-the-one-columns-data-value/66878/2 "2022-11-24T08:32:38Z")

</div>

vision or perspective

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 24, 2022, 11:23am UTC](https://forum.inductiveautomation.com/t/change-the-perspective-table-row-background-color-based-on-the-one-columns-data-value/66878/3 "2022-11-24T11:23:33Z")

</div>

Please add the appropriate _Vision_ or _Perspective_ tag to your question. The answer will depend on which you are using.

---

<div class="post-metadata">

**Author:** ![Krishnapriya\_K\_S](https://avatars.discourse-cdn.com/v4/letter/k/cab0a1/32.png) [@Krishnapriya\_K\_S](https://forum.inductiveautomation.com/u/Krishnapriya_K_S)\
**Post date:** [November 25, 2022, 7:01am UTC](https://forum.inductiveautomation.com/t/change-the-perspective-table-row-background-color-based-on-the-one-columns-data-value/66878/4 "2022-11-25T07:01:35Z")

</div>

in perspective

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 25, 2022, 5:31pm UTC](https://forum.inductiveautomation.com/t/change-the-perspective-table-row-background-color-based-on-the-one-columns-data-value/66878/5 "2022-11-25T17:31:04Z")

</div>

I don't think you can do this by row but you can do it by cell.  
CSS border-width specifies the width of **top, right, bottom, left** borders in that order.  
You will need to do a transform on your data to create a JSON document as shown below.

 ![Table row border](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/a/8afdb0a5d2eaff6f4ee174006de19fdb843876d8.png)

For more see  
[https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Table#PerspectiveTable-Example1:StylingRowsBasedonValue-JSONData](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Table#PerspectiveTable-Example1:StylingRowsBasedonValue-JSONData)

---

<div class="post-metadata">

**Author:** ![ShaneH](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@ShaneH](https://forum.inductiveautomation.com/u/ShaneH)\
**Post date:** [November 26, 2022, 3:09pm UTC](https://forum.inductiveautomation.com/t/change-the-perspective-table-row-background-color-based-on-the-one-columns-data-value/66878/6 "2022-11-26T15:09:14Z")

</div>

Use JSON formatted data for your table.

Each row should be a pair of style / value objects. The style will apply to the entire row.  
The value for the row should be an object containing the data for each cell in the row.

Each cell can similarly be defined as a pair of style / value objects.

In the example screen shot, there are two rows, with three cells (country, city, population).

The first row has no style specified (background color and classes are blank).  
The second row has a style for a solid red 3px border.

On the first row, the cell for the city has an orange background applied.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/2/f25bd89759ea45df6284312d42948565ff69efe5.png)

HTH.  
-Shane
