# Perspective Table Selected Row Color

**URL:** <https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108>\
**Category:** Ignition Early Access\
**Created:** [May 17, 2019, 5:03pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108 "2019-05-17T17:03:14Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![grietveld](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/grietveld/32/6984_2.png) [@grietveld](https://forum.inductiveautomation.com/u/grietveld)\
**Post date:** [May 17, 2019, 5:03pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/1 "2019-05-17T17:03:15Z")

</div>

Is there a property for changing the color of the selected row? I’ve been looking for a bit and not seeing a property. I also am unable to declare a style/color property that makes any changes.

---

<div class="post-metadata">

**Author:** ![chuache\_sanse](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@chuache\_sanse](https://forum.inductiveautomation.com/u/chuache_sanse)\
**Post date:** [May 24, 2019, 11:42am UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/2 "2019-05-24T11:42:29Z")

</div>

I would also like to change the color for the rows. Did you find a way?

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [May 24, 2019, 3:21pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/3 "2019-05-24T15:21:16Z")

</div>

Hi,

There's currently no way to style the selected row, but we do have a ticket to expose this, and various other styles for the table component.

> I also am unable to declare a style/color property that makes any changes.

Can you be more specific, please?

-Yousuf

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [May 24, 2019, 3:24pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/4 "2019-05-24T15:24:25Z")

</div>

Hi,

There are two ways you can style rows. The first is through the `rows` config prop. The second is by transforming a row of your data into a custom object that has the shape:

```auto
    { 
        "value": { // The rows value. 
            "city": "Folsom" ,
            "country": "United States", 
            "population": 1000000 
        }, 
        "style": { // Custom row styles.
            "backgroundColor": "#F7901D",
            "classes": "some-class"
        }
    } 

```

Hope that helps.

-Yousuf

---

<div class="post-metadata">

**Author:** ![grietveld](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/grietveld/32/6984_2.png) [@grietveld](https://forum.inductiveautomation.com/u/grietveld)\
**Post date:** [May 24, 2019, 3:38pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/5 "2019-05-24T15:38:13Z")

</div>

I was trying to create a property or style that was able to change the selectedRow style, so if there isn’t one exposed yet, that explains why.

Thanks for the information.

---

<div class="post-metadata">

**Author:** ![shibubalaji](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/shibubalaji/32/9165_2.png) [@shibubalaji](https://forum.inductiveautomation.com/u/shibubalaji)\
**Post date:** [May 24, 2019, 4:05pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/6 "2019-05-24T16:05:12Z")

</div>

Not sure if this is what you were trying to achieve? Table has a selection foreground property. Can’t we use that to change the color of the selected row?

![SelectedRow](https://us1.discourse-cdn.com/inductiveautomation/original/2X/e/e6db3206e3fef061de68c58824cc12c6a92c0940.jpeg)  
 ![TableProperty](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/ac06549740ae3cd3ab82ceb235e5c498afe49735.jpeg)

---

<div class="post-metadata">

**Author:** ![grietveld](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/grietveld/32/6984_2.png) [@grietveld](https://forum.inductiveautomation.com/u/grietveld)\
**Post date:** [May 24, 2019, 4:12pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/7 "2019-05-24T16:12:45Z")

</div>

That is for the table component within Vision.

The issue is there isn’t a property available for the table component within the new Perspective Module.

---

<div class="post-metadata">

**Author:** ![chuache\_sanse](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@chuache\_sanse](https://forum.inductiveautomation.com/u/chuache_sanse)\
**Post date:** [May 27, 2019, 9:51am UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/8 "2019-05-27T09:51:58Z")

</div>

I am looking for a similar solution but a bit different. I have a query with few columns and a column called Active.

I want to display the table as usually (without background color for the rows) but I do want to display the a background blue color for the rows where Active=0.

Is this possible?

---

<div class="post-metadata">

**Author:** ![grietveld](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/grietveld/32/6984_2.png) [@grietveld](https://forum.inductiveautomation.com/u/grietveld)\
**Post date:** [May 28, 2019, 11:59am UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/9 "2019-05-28T11:59:32Z")

</div>

> [@chuache\_sanse](#):
>
> I want to display the table as usually (without background color for the rows) but I do want to display the a background blue color for the rows where Active=0.

This is possible, but a bit more challenging. Each row in your dataset can have a style property, so you will need to loop through your dataset and add in a value in the json or dataset to setup the style based on the data in that row.

> [@\[Feedback\] NEW Perspective Table](http://forum.inductiveautomation.com/t/feedback-new-perspective-table/21199/41):
>
> I’m trying to implement something along these lines to highlight a row if a value is true in that row, but I’m not sure how to configure this since the data is being pulled from a named query, so it removes any style properties I’ve added when it re-polls.

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [May 29, 2019, 11:49pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/10 "2019-05-29T23:49:28Z")

</div>

Hi,

We are working on polishing this example up and adding it to the docs, but you can accomplish that like so:

```auto
    output_json = []
    
    style_orange = {"backgroundColor": "#F7901D"}
    style_green = {"backgroundColor": "#00AA00"}
    
    for row in range(value.getRowCount()):
        row_object = {}
        
        row_value = {}
        row_style = {}
        for col in range(value.getColumnCount()):    
            row_value[value.getColumnName(col)] = value.getValueAt(row, col)
            row_object['value'] = row_value
            
            if value.getColumnName(col) == 'container_type':
                if value.getValueAt(row, col) == 'can':
                    row_style = style_orange
                elif value.getValueAt(row, col) == 'bottle':
                    row_style = style_green

            row_object['style'] = row_style
            
        output_json.append(row_object)
        
    return output_json

```

---

<div class="post-metadata">

**Author:** ![kklingbyle](https://avatars.discourse-cdn.com/v4/letter/k/7cd45c/32.png) [@kklingbyle](https://forum.inductiveautomation.com/u/kklingbyle)\
**Post date:** [August 22, 2019, 5:44pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/11 "2019-08-22T17:44:03Z")

</div>

hi ynejati,

I am trying to do something similar (set the row background color based off a column value for all rows). Where would you put this transformation? Thanks.

---

<div class="post-metadata">

**Author:** ![Scoderick](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@Scoderick](https://forum.inductiveautomation.com/u/Scoderick)\
**Post date:** [January 21, 2020, 2:34am UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/12 "2020-01-21T02:34:44Z")

</div>

Is the “rowData” feature the added feature you spoke about as up-and-coming? Is there an example on how to implement “rowData”

---

<div class="post-metadata">

**Author:** ![josh.carney](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/josh.carney/32/73913_2.png) [@josh.carney](https://forum.inductiveautomation.com/u/josh.carney)\
**Post date:** [February 18, 2020, 9:00pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/13 "2020-02-18T21:00:20Z")

</div>

Is there a way to do this be column instead of by row?  
or, if possible, by cell as well?

---

<div class="post-metadata">

**Author:** ![harigobu.gb](https://avatars.discourse-cdn.com/v4/letter/h/b77776/32.png) [@harigobu.gb](https://forum.inductiveautomation.com/u/harigobu.gb)\
**Post date:** [April 17, 2020, 7:03pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/14 "2020-04-17T19:03:36Z")

</div>

Hello Yousuf,

Can you please explain this with more details for changing the color of selected row in a perspective table.

Thanks.

---

<div class="post-metadata">

**Author:** ![howard.montero](https://avatars.discourse-cdn.com/v4/letter/h/e480ec/32.png) [@howard.montero](https://forum.inductiveautomation.com/u/howard.montero)\
**Post date:** [June 1, 2020, 4:06am UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/15 "2020-06-01T04:06:29Z")

</div>

This might help to change the color of a specific cell, using a style created previously in Perspective. Please note that this particular example won’t be the best solution for a table with several columns, which if so, a for loop using the quantity of columns could be used.

* * *

data = []

for i in range(value.getRowCount()):  
value0 = value.getValueAt(i,“Column0”)  
value1 = value.getValueAt(i,“Column1”)  
value2 = value.getValueAt(i,“Column2”)  
value3 = value.getValueAt(i,“Column3”)

```
if value0 != "Running":
	thisdict = {"Col0":value0, "Col1":{"value":value1,"style":{"classes":""}}, "Col2":value2, "Col3":value3}
else:
	thisdict = {"Col0":value0, "Col1":{"value":value1,"style":{"classes":"RunningStyle"}}, "Col2":value2, "Col3":value3}
data.append(thisdict)

```

return data

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [May 31, 2024, 10:07pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/16 "2024-05-31T22:07:12Z")

</div>

Am I missing something? The question was about the color of the SELECTED row, but the answers and chosen solution are about all rows...?

---

<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:** [May 31, 2024, 10:28pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/17 "2024-05-31T22:28:04Z")

</div>

Ryan, I think that if you have a question you should forget about this thread and start a new one. This one is all over the place.

---

<div class="post-metadata">

**Author:** ![grietveld](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/grietveld/32/6984_2.png) [@grietveld](https://forum.inductiveautomation.com/u/grietveld)\
**Post date:** [June 3, 2024, 6:03pm UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/18 "2024-06-03T18:03:00Z")

</div>

Yeah this thread went off the rails a bit since it was still early access/beta for Perspective at the time. Initially we had to build in the styles into each row of the dataset we provided in order to do custom styling based on datapoints or values.

If Selected row is what you are looking for there is an actual style property under selection now that should work for this.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/7182e8f4ced8b5d27c193d782f1fd2591295b568.png)

---

<div class="post-metadata">

**Author:** ![mahsasalimi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mahsasalimi/32/68520_2.png) [@mahsasalimi](https://forum.inductiveautomation.com/u/mahsasalimi)\
**Post date:** [March 26, 2026, 8:42am UTC](https://forum.inductiveautomation.com/t/perspective-table-selected-row-color/25108/19 "2026-03-26T08:42:10Z")

</div>

I have a table with the following styles for rows , font weight is 400.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/e/deb1e45fe12eb2890918334a527384247740ad22.png)

when I set styling on selection to make the text bold as seen below the row style overwrites the selection style and the text is still not bold

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/7/0795a232f6457313a50932b4c62e669cefc4aa10.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6f6c97663337d8a3eb0e7309c10144700ec7bd0.png)

Any idea why this happens?