# Change style of cell (component Table) via script - Perspective

**URL:** <https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 17, 2021, 10:45am UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573 "2021-03-17T10:45:50Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![truonghaibk94](https://avatars.discourse-cdn.com/v4/letter/t/a698b9/32.png) [@truonghaibk94](https://forum.inductiveautomation.com/u/truonghaibk94)\
**Post date:** [March 17, 2021, 10:45am UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/1 "2021-03-17T10:45:50Z")

</div>

Hello everyone,

Does anyone know how to change the background color of a specific cell (follow some condition) of the component “Table” in Perspective via a script ?

I have a componant Table (data binded to a NameQuery Dataset). I would like to change the background color of some cell (follow my condition) via a script Jython

Thank you so much

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [March 17, 2021, 11:28am UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/2 "2021-03-17T11:28:25Z")

</div>

Hi @truonghaibk94 this may be best done in a script transform of the database binding.

You can loop through the dataset and form an array of dictionaries for each element like this:

```auto
data
[
  {
    "colTitle1": {
      "value": "SomeValue",
      "style": {
        "backgroundColor": "#F7901D",
        "classes": "SomeClass"
      }
    },
    "colTitle2": {
      "value": "SomeValue2",
      "style": {
        "backgroundColor": "#FFFFFF",
        "classes": "SomeClass"
      }
    }
  }
  {
    "colTitle1": {
      "value": "SomeValueOnNewRow",
      "style": {
        "backgroundColor": "#00000",
        "classes": "SomeClass"
      }
    },
    "colTitle2": {
      "value": "SomeValueOnNewRow2",
      "style": {
        "backgroundColor": "#FFFFFF",
        "classes": "SomeClass"
      }
    }
  }
]

```

Basically instead of just having key/value pairs for the columns, turn them into a dictionary in which you can specify value and style properties.

If you place down a a table from the component palette with the default data in you can see this in action for the first cell. It also shows you can do much more than styles.

If you would like any information on how to script this, then let me know.

---

<div class="post-metadata">

**Author:** ![truonghaibk94](https://avatars.discourse-cdn.com/v4/letter/t/a698b9/32.png) [@truonghaibk94](https://forum.inductiveautomation.com/u/truonghaibk94)\
**Post date:** [March 17, 2021, 12:57pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/3 "2021-03-17T12:57:11Z")

</div>

It works perfectly .

Thank you so much 😃 😃 😃

---

<div class="post-metadata">

**Author:** ![truonghaibk94](https://avatars.discourse-cdn.com/v4/letter/t/a698b9/32.png) [@truonghaibk94](https://forum.inductiveautomation.com/u/truonghaibk94)\
**Post date:** [March 17, 2021, 1:20pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/4 "2021-03-17T13:20:45Z")

</div>

> [@matthew.ayre](#):
>
> "style": { "backgroundColor": "#FFFFFF", "classes": "SomeClass" }

@matthew.ayre Do you know how to change the order of the colonne after it ? It's a dictionary and Ignition reorder my dataset after convert to an array of dictionary

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [March 17, 2021, 1:33pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/5 "2021-03-17T13:33:58Z")

</div>

Hi @truonghaibk94, would you be able to provide an example of your dataset or images of the table before and after to highlight your issue?

This is just so I can understand your question correctly. Just to confirm, your issue is that the data in the table is not ordered correctly?

---

<div class="post-metadata">

**Author:** ![truonghaibk94](https://avatars.discourse-cdn.com/v4/letter/t/a698b9/32.png) [@truonghaibk94](https://forum.inductiveautomation.com/u/truonghaibk94)\
**Post date:** [March 17, 2021, 1:49pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/6 "2021-03-17T13:49:29Z")

</div>

This is Before : [Name =\> Enabled =\> State =\> Driver =\> Description]

 ![Bafore](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/800b1d3ff7d843a1ecd580dd6773ece8c6688436.png)

This is after : [Description =\> State =\> Enabled =\> Driver =\> Name]

 ![After](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/7/a798fd9e392635c4d921ca6c69ad222db88b9197.png)

---

<div class="post-metadata">

**Author:** ![truonghaibk94](https://avatars.discourse-cdn.com/v4/letter/t/a698b9/32.png) [@truonghaibk94](https://forum.inductiveautomation.com/u/truonghaibk94)\
**Post date:** [March 17, 2021, 1:55pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/7 "2021-03-17T13:55:32Z")

</div>

My dataset is with the order “Name , Enable, State,Driver,Description”.

I did a loop that add a pair (key:value) to a dictionary for each member of final array.

I added with the order “Name , Enable, State,Driver,Description”. But when we work with a dictionary, every time we add a new pair (key,value), it reorder the list of key. And finally, Ignition take this order to display in the table [Description =\> State =\> Enabled =\> Driver =\> Name].

I would like to keep my order after add the style

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [March 17, 2021, 2:15pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/8 "2021-03-17T14:15:16Z")

</div>

Hi @truonghaibk94, you can set the order of your columns using the table’s ‘columns’ prop. The order they appear in this prop will be the order they appear in the table. Make sure you explicitly define the field property in the array object so that it matches the column title.

You can also control many other things for individual columns (such as headers, footers, etc.) on the columns prop. For more information refer to the columns property in the manual [here](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Table)

---

<div class="post-metadata">

**Author:** ![truonghaibk94](https://avatars.discourse-cdn.com/v4/letter/t/a698b9/32.png) [@truonghaibk94](https://forum.inductiveautomation.com/u/truonghaibk94)\
**Post date:** [March 17, 2021, 3:06pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/9 "2021-03-17T15:06:06Z")

</div>

Thank you so much, you made my date

---

<div class="post-metadata">

**Author:** ![pkhoshroo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pkhoshroo/32/26801_2.png) [@pkhoshroo](https://forum.inductiveautomation.com/u/pkhoshroo)\
**Post date:** [October 18, 2021, 3:43pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/10 "2021-10-18T15:43:53Z")

</div>

Hello Matthew,

Sorry if I am replying to an old post.  
I would like to use this script in my table, however, is it possible to have this script dynamic?

This is what I am trying to do:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/8/c8e486dd7f3916391d5d35cf2b6f33316c42163b.png)

Changing PV column based on LL and HL value.

I am already changing the cell color using json method but wanted to try the script you provided instead.

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [October 18, 2021, 4:04pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/11 "2021-10-18T16:04:26Z")

</div>

Hi @pkhoshroo, I assume you are trying to dynamically change the colour as the PV changes?

You could loop through the rows and use an if statement to set the colour based on your HL and LL conditions. Not sure if there is something more efficient off the top of my head.

---

<div class="post-metadata">

**Author:** ![pkhoshroo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pkhoshroo/32/26801_2.png) [@pkhoshroo](https://forum.inductiveautomation.com/u/pkhoshroo)\
**Post date:** [October 18, 2021, 4:38pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/12 "2021-10-18T16:38:19Z")

</div>

Hello @matthew.ayre  
You are correct!

This is what I did in JSON format and it worked. Now I am trying to use the scripting method you suggested but not sure if I can apply the same if statement formatting in the script you provided.

```auto
	output_json = []
	style_red = {"classes": "CellColor/AboveHigh"}
	style_green = {"classes": "CellColor/BelowLow"}
	style_yellow = {"classes": "Between"}
		
	for row in range(value.getRowCount()):
		row_object = {}
		for col in value.getColumnNames():   
			cell_object={}
			cell_style={}
			cell_object['value']=value.getValueAt(row,col)
			if col == 'process_value':
				if value.getValueAt(row,col)>=value.getValueAt(row, 'low_limit') and value.getValueAt(row,col)<= value.getValueAt(row, 'high_limit'):
					cell_style= style_green
				elif value.getValueAt(row,col)>value.getValueAt(row, 'high_limit'):
					cell_style= style_red
				elif value.getValueAt(row,col)<value.getValueAt(row, 'low_limit'):
					cell_style= style_yellow						
			cell_object['style']=cell_style
			row_object[col]=cell_object				
		output_json.append(row_object)		
	return output_json

```

---

<div class="post-metadata">

**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:** [October 19, 2021, 8:43pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/13 "2021-10-19T20:43:44Z")

</div>

1. You have the styles swapped in the logic for “below” and “between”. I personally think it’s odd that you’ve assigned the area between two limits to be yellow, but I’m just here to help.

The following code works for me with the following conditions:

- There exists a Dataset with the following columns: “process\_value”, “low\_limit”, and “high\_limit”.
- There exists three styles with the following names: “Above”, “Below”, and “Between”.

```auto
	# Note: due to formatting issues, your script might throw a parse error here because it is encountering 
	# spaces instead of an indent. delete the spaces before output_json and replace them with 
	# indents. Do the same for this comment or remove it entirely.
	output_json = []
	style_red = {"classes": "Above"}
	style_green = {"classes": "Below"}
	style_yellow = {"classes": "Between"}
		
	for row in range(value.getRowCount()):
		row_object = {}
		for col in value.getColumnNames():   
			cell_object={}
			cell_style={}
			cell_object['value']=value.getValueAt(row,col)
			if col == 'process_value':
				if value.getValueAt(row,col)>=value.getValueAt(row, 'low_limit') and value.getValueAt(row,col)<= value.getValueAt(row, 'high_limit'):
					cell_style= style_yellow # between
				elif value.getValueAt(row,col)>value.getValueAt(row, 'high_limit'):
					cell_style= style_red
				elif value.getValueAt(row,col)<value.getValueAt(row, 'low_limit'):
					cell_style= style_green # below						
			cell_object['style']=cell_style
			row_object[col]=cell_object				
		output_json.append(row_object)		
	return output_json

```

 ![Screen Shot 2021-10-19 at 1.42.23 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/e/9e48f567b755cb2d73862e96f3d5b5e7b8d30133.png)

---

<div class="post-metadata">

**Author:** ![pkhoshroo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pkhoshroo/32/26801_2.png) [@pkhoshroo](https://forum.inductiveautomation.com/u/pkhoshroo)\
**Post date:** [October 20, 2021, 12:42pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/14 "2021-10-20T12:42:18Z")

</div>

Thank you very much @cmallonee for your valuable time and response.  
I am able to get the cell color with this script without any problem; however, my problem is with the edit cell command. So I have a simple script on “onEditCellCommit”:

```auto
	rowIndex=event.row # row number of the commit
	colName=event.column # column name of the commit
	newValue=event.value
	data = self.props.data # Dataset [86R ? 8C]	
	newData = system.dataset.setValue(data, rowIndex,colName,newValue)
	self.view.custom.part.spec.data = newData

```

I am able to edit my cells with the script above without any problem but as soon as I apply the cell color to that script, I get this error:  
**setValue(): 1st arg can’t be coerced to com.inductiveautomation.ignition.common.Dataset**

```auto
	output_json=[]
	style_red = {"classes": "Above"}
	style_green = {"classes": "Between"}
	style_yellow = {"classes": "Below"}
		
	for row in range(value.getRowCount()):
		row_object = {}
		for col in value.getColumnNames():   
			cell_object={}
			cell_style={}
			cell_object['value']=value.getValueAt(row,col)
			if col == 'process_value':
				if value.getValueAt(row,col)>=value.getValueAt(row, 'low_limit') and value.getValueAt(row,col)<= value.getValueAt(row, 'high_limit'):
					cell_style= style_green
				elif value.getValueAt(row,col)>value.getValueAt(row, 'high_limit'):
					cell_style= style_red
				elif value.getValueAt(row,col)<value.getValueAt(row, 'low_limit'):
					cell_style= style_yellow						
			cell_object['style']=cell_style
			row_object[col]=cell_object				
		output_json.append(row_object)		
	return output_json

```

Been on this for two days now and I could not figure out what is the problem. I changed the dataset to json and tried to apply the transform script and it did not work.  
I change the dataset in editcellcommit script to pydataset but that did not solve the problem either.

---

<div class="post-metadata">

**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:** [October 20, 2021, 2:28pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/15 "2021-10-20T14:28:12Z")

</div>

Okay, so there's a lot to unpack here.

> [@pkhoshroo](#):
>
> as soon as I apply the cell color to that script, I get this error:  
> **setValue(): 1st arg can’t be coerced to com.inductiveautomation.ignition.common.Dataset**

This is because the data of the table is a list - not a Dataset. It's important to remember that targeted cell styling is not compatible with datasets, so you previously converted the `data` property of the table to a list of objects in order to apply styling.

You're encountering this error because you're treating your data in an inadvisable manner. I recommend only having one data source for area of data. In your current code, you're treating a `view.custom.part.spec.data` as the source for your table, but then you're treating the table as the basis for updating the view property. Try this instead:

```auto
	rowIndex=event.row # row number of the commit
	colName=event.column # column name of the commit
	newValue=event.value
    # Below, I've referenced the source-of-truth dataset instead of the "translated" props.data of the Table
	data = self.view.custom.part.spec.data # Dataset [86R ? 8C]	
	newData = system.dataset.setValue(data, rowIndex,colName,newValue)
	self.view.custom.part.spec.data = newData

```

Even this approach, however, assumes that the custom property is not a binding, which I suspect it is. If that property is the result of a binding, then you should be editing whatever source drives that binding (perhaps a query to update a SQL table).

---

<div class="post-metadata">

**Author:** ![pkhoshroo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pkhoshroo/32/26801_2.png) [@pkhoshroo](https://forum.inductiveautomation.com/u/pkhoshroo)\
**Post date:** [October 20, 2021, 2:33pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/16 "2021-10-20T14:33:09Z")

</div>

Thank you very much, @cmallonee !!!  
That fixed the problem!!! Thanks a milion :))))))

---

<div class="post-metadata">

**Author:** ![csilk](https://avatars.discourse-cdn.com/v4/letter/c/9e8a1a/32.png) [@csilk](https://forum.inductiveautomation.com/u/csilk)\
**Post date:** [July 19, 2022, 8:08pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/17 "2022-07-19T20:08:51Z")

</div>

How would this look if I was using a query to update a SQL table?

---

<div class="post-metadata">

**Author:** ![Miguel\_Villasenor\_Es](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/miguel_villasenor_es/32/60416_2.png) [@Miguel\_Villasenor\_Es](https://forum.inductiveautomation.com/u/Miguel_Villasenor_Es)\
**Post date:** [February 26, 2024, 4:23pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/18 "2024-02-26T16:23:52Z")

</div>

Can you show me where you are scripting this?

I want a similar result as @pkhoshroo.

I populate a table with my data and I want to change the cell color based on the value like @pkhoshroo has. Can I populate the table via a button and then use a binding on the data property?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [February 26, 2024, 4:26pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/19 "2024-02-26T16:26:03Z")

</div>

> [@Miguel\_Villasenor\_Es](#):
>
> Can I populate the table via a button and then use a binding on the data property?

You usually do one or the other, not both.  
If you want something similar to what was originally asked, then you can use what was already explained.  
If it's not enough, you'll have to explain why.

---

<div class="post-metadata">

**Author:** ![Miguel\_Villasenor\_Es](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/miguel_villasenor_es/32/60416_2.png) [@Miguel\_Villasenor\_Es](https://forum.inductiveautomation.com/u/Miguel_Villasenor_Es)\
**Post date:** [February 26, 2024, 4:51pm UTC](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573/20 "2024-02-26T16:51:56Z")

</div>

They're using a binding and then a transform to get their desired results correct?

**If so I'll try it that way and here's what I have so far:**

- I have a named query that runs with 1 parameter.
- That is bound to the data property on the table.
- The table gets populated.

So I just need to add the transform correct? I'll read more and see how others did it. I'm sure you'll hear from me in about half hour or perhaps tomorrow.

[Next page](https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573.md?page=2)