# Change Perspective Table Row Color Programmatically **URL:** \ **Category:** Ignition\ **Tags:** ignition80\ **Created:** [July 10, 2019, 8:41pm UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453 "2019-07-10T20:41:23Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![nick.shea](https://avatars.discourse-cdn.com/v4/letter/n/df788c/32.png) [@nick.shea](https://forum.inductiveautomation.com/u/nick.shea)\ **Post date:** [July 10, 2019, 8:41pm UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/1 "2019-07-10T20:41:23Z")
Hello, I’m trying to set the background color of rows in a perspective table. I’m stuck with the following: I am running a onClick script on my table that should change the self.props.rows.striped.color from odd to even if a condition with the row is met. But, I can’t seem to get the syntax correct. Within the color object array are 3 values: even="#FFFFFFFF, odd="F4F4F4F4, and other=“FFFFFF00”. How would I set self.props.rows.striped.color to select one of these? ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [July 10, 2019, 8:57pm UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/2 "2019-07-10T20:57:21Z")
You question is a little unclear. Are you trying to perform this change in the onClick script? Where does the color “object” you mention live - in the script, or as a property somewhere? ---
**Author:** ![nick.shea](https://avatars.discourse-cdn.com/v4/letter/n/df788c/32.png) [@nick.shea](https://forum.inductiveautomation.com/u/nick.shea)\ **Post date:** [July 10, 2019, 9:01pm UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/3 "2019-07-10T21:01:25Z")
@cmallonee The Color Object Array is part of the the Table component in. The Table has an onclick script that should perform the following actions: 1.Look though the table to find matching conditions. 2.Change the Color Object Array to its correct color code( odd could become even) even and odd are just what is there by default and Ignition seems to have them built in. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [July 10, 2019, 9:38pm UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/4 "2019-07-10T21:38:30Z")
You should look at this [post](http://forum.inductiveautomation.com/t/feedback-new-perspective-table/21199/48) which describes how to configure your data to allow for what you want to do. The important part is that you will need each data element configured in the following manner (along with whatever other properties you desire): ```auto { "value": { // The rows value. "keyOne": { // Custom cell configuration. "value": "First Column Value" }, "keyTwo": { // Custom cell configuration. "value": "Second Column Value" }, "keyThree": { // Custom cell configuration. "value": "Third Column Value" } }, "style": { // Custom row styles. } } ``` THEN in your onClick event, you’ll want to perform your logic while applying colors to the `data[rowIndex].style.backgroundColor` property. ```auto #entirely pseudo-code for row_index in range(len(self.props.data)): condition_met = data[row_index].value.keyOne == 'Color this row' if condition_met: data[row_index].style.backgroundColor = "#FFFFFF00" #desired color here ``` ---
**Author:** ![nick.shea](https://avatars.discourse-cdn.com/v4/letter/n/df788c/32.png) [@nick.shea](https://forum.inductiveautomation.com/u/nick.shea)\ **Post date:** [July 10, 2019, 10:11pm UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/5 "2019-07-10T22:11:10Z")
@cmallonee Thanks, I’ll take a look at that. ---
**Author:** ![nick.shea](https://avatars.discourse-cdn.com/v4/letter/n/df788c/32.png) [@nick.shea](https://forum.inductiveautomation.com/u/nick.shea)\ **Post date:** [July 11, 2019, 5:59pm UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/6 "2019-07-11T17:59:18Z")
@cmallonee Best I can tell from what I have been trying I have to style each of the cells in the table individually, something like this: ````auto self.getSibling("Table").props.data[4] = { "country": { "style": { "backgroundColor":"#FFFF00" }, "value":"USA" }, "city": { "style": { "backgroundColor":"#FFF000" }, "value":"Test" } }``` It ain't great but if I run my code through a script by row by column I can format it and send it back. ```` ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [July 11, 2019, 6:00pm UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/7 "2019-07-11T18:00:28Z")
Yes, by including the style as part of the row objects, you’re responsible for styling the rows. In your supplied example, you’re applying the style to the cells. ---
**Author:** ![sathianandan.dharmas](https://avatars.discourse-cdn.com/v4/letter/s/53a042/32.png) [@sathianandan.dharmas](https://forum.inductiveautomation.com/u/sathianandan.dharmas)\ **Post date:** [April 5, 2021, 3:28am UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/8 "2021-04-05T03:28:49Z")
Hi @cmallonee I’m super new to scripting on perspective, I tried using your pseudo code to get the data of a table component and go through the rows checking for one value so that I can change the background color of that particular row but I keep getting object has to no attribute ‘data’ error. I have the script triggered by a Mouseclick event. I also tried getting the dataset of the table through ‘self.getSibling(“Table”).props.data[index]’ like @nick.shea did but I’m not able to print the dataset array. I’m populating the table using a named query if that helps. My agenda is to highlight a row if it one of the column value meets the criteria. In your opinion, what would be the best option? Any help is greatly appreciated. Thanks Sam ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [April 5, 2021, 2:53pm UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/9 "2021-04-05T14:53:05Z")
The error you're encountering is the code telling you that the component which is invoking the code has no `data` attribute, because the spseudo-code is targeting the wrong property level. You need to change the `self.data` reference to `self.props.data` > [@sathianandan.dharmas](#): > > I also tried getting the dataset of the table through ‘self.getSibling(“Table”).props.data[index]’ like @nick.shea did but I’m not able to print the dataset array. This code here will get just one row of the table data, AND it will not work if your data is stored as a dataset. This code is dependent on the data having been converted to an array type. You can easily switch the data from dataset to array by switching the return type of your Named Query binding. There should be a dropdown in the upper right of the binding screen which probably says "default". Change that to JSON, and your data should change shape to an array. ---
**Author:** ![sathianandan.dharmas](https://avatars.discourse-cdn.com/v4/letter/s/53a042/32.png) [@sathianandan.dharmas](https://forum.inductiveautomation.com/u/sathianandan.dharmas)\ **Post date:** [April 6, 2021, 2:02pm UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/10 "2021-04-06T14:02:55Z")
Thank you so much, Sir! I’ll try this approach. ---
**Author:** ![Aaron\_Ekstrand](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@Aaron\_Ekstrand](https://forum.inductiveautomation.com/u/Aaron_Ekstrand)\ **Post date:** [December 28, 2021, 8:48am UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/11 "2021-12-28T08:48:54Z")
> [@cmallonee](#): > > This code here will get just one row of the table data, AND it will not work if your data is stored as a dataset. This code is dependent on the data having been converted to an array type. You can easily switch the data from dataset to array by switching the return type of your Named Query binding. There should be a dropdown in the upper right of the binding screen which probably says “default”. Change that to JSON, and your data should change shape to an array. I just want to make the top row of my table bold, but I am binding the data property to a script where I am building the dataset. How can I store a value in the data property as "an array type" in python? ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [December 28, 2021, 3:48pm UTC](https://forum.inductiveautomation.com/t/change-perspective-table-row-color-programmatically/26453/12 "2021-12-28T15:48:28Z")
If you’re building it yourself, then instead of building a dataset, you’ll need to construct the array of objects. I’m not sure where you’re getting the data from, but this is the general structure of the transform. ```auto data = [] for i in range(len(value)): data_obj = {"value": {"keyZero": value[i]['someKey'], "keyOne": value[i]['someOtherKey']}} if i == 0: # make only the first row bold data_obj["style"] = {"fontWeight": "bold"} data.append(data_obj) return data ```