# Perspective table cell color

**URL:** <https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047>\
**Category:** Ignition\
**Created:** [August 18, 2021, 1:58pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047 "2021-08-18T13:58:13Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![eichler-eng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eichler-eng/32/21259_2.png) [@eichler-eng](https://forum.inductiveautomation.com/u/eichler-eng)\
**Post date:** [August 18, 2021, 1:58pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/1 "2021-08-18T13:58:13Z")

</div>

Hi All

Using this link below I have been able to set the color of individual rows in a Perspective table based on the value of a cell. I would like to set the colors of individual cells. I can see that the script below is setting a style for the whole row. I have tried to loop through my dataset and assign a style to each cell without any luck. Please can someone point me in the right direction? Thanks!

[[Feedback] NEW Perspective Table - Ignition Early Access - Inductive Automation Forum](https://forum.inductiveautomation.com/t/feedback-new-perspective-table/21199/47)

```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:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 18, 2021, 2:31pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/2 "2021-08-18T14:31:36Z")

</div>

you have to set the style/value a “level” deeper, like so:  
the row here is helsinki, the column is jakarta  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/b/bbcff8dc911538302e65c9359bc92ca8ab508acc.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/5/753126c1f7329374213b7c03b1a0281714eb66e3.png)

for the example code it would be something like: it can be a bit cleaner but this should get you started xd

```auto
			if value.getColumnName(col) == 'container_type':
				if value.getValueAt(row, col) == 'can':
					#style row to orange 
					row_style = style_orange
				elif value.getValueAt(row, col) == 'bottle':
					#style cel to green 					
					row_object['value']['container_type'] ={'value':row_value['container_type'],'style':style_green}

```

---

<div class="post-metadata">

**Author:** ![eichler-eng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eichler-eng/32/21259_2.png) [@eichler-eng](https://forum.inductiveautomation.com/u/eichler-eng)\
**Post date:** [August 18, 2021, 2:46pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/3 "2021-08-18T14:46:10Z")

</div>

Thanks! The following seems to work but I now need to sort the keys so that they are in the correct order.

```auto
output_json = []
	    
	style_red = {"backgroundColor": "red"}
	style_green = {"backgroundColor": "green"}
	style_gray = {"backgroundColor": "gray"}
	
	for row in range(value.getRowCount()):
		#Clear the row object
		row_object = {}
					
		for col in range(value.getColumnCount()):    
			cell_object = {}
			cell_style = {}
			# Add a key/value pair for the cell
			cell_object['value']=value.getValueAt(row, col)
			
			# Select the style
			if value.getColumnName(col) == 'LED':
				if value.getValueAt(row, col) == 'red':
					cell_style = style_red
				elif value.getValueAt(row, col) == 'green':
					cell_style = style_green
				elif value.getValueAt(row, col) == 'gray':
					cell_style = style_gray
			
			cell_object['style']=cell_style
			
			#Add the cell object to the row object
			row_object[value.getColumnName(col)]=cell_object
		
		#Add the row_object to the output					
		output_json.append(row_object)	
		
	return output_json

```

---

<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:** [August 18, 2021, 2:52pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/4 "2021-08-18T14:52:45Z")

</div>

it might be easier to use “getColumnNames()” instead of “getColumnCount()”, so you dont have to worry about sorting indexes

this:

```auto
for col in value.getColumnNames():
....
if col == 'LED':
...
row_object[col]=cell_object

```

instead of:

```auto
for col in range(value.getColumnCount()):
...
value.getColumnName(col) == 'LED'
...
row_object[value.getColumnName(col)]=cell_object

```

---

<div class="post-metadata">

**Author:** ![eichler-eng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eichler-eng/32/21259_2.png) [@eichler-eng](https://forum.inductiveautomation.com/u/eichler-eng)\
**Post date:** [August 18, 2021, 3:02pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/5 "2021-08-18T15:02:10Z")

</div>

Thanks for your help. That has cleaned up the code a little. I’ll work on sorting the key order in the json string later.

```auto
output_json = []
	    
	style_red = {"backgroundColor": "red"}
	style_green = {"backgroundColor": "green"}
	style_gray = {"backgroundColor": "gray"}
	
	for row in range(value.getRowCount()):
		row_object = {}
					
		for col in value.getColumnNames():    
			cell_object = {}
			cell_style = {}
			# Add a key/value pair for the cell
			cell_object['value']=value.getValueAt(row, col)
			
			# Select the style
			if col == 'LED':
				color = value.getValueAt(row, col)
				if color == 'red':
					cell_style = style_red
				elif color == 'green':
					cell_style = style_green
				elif color == 'gray':
					cell_style = style_gray
			
			cell_object['style']=cell_style
			
			#Add the cell object to the row object
			row_object[col]=cell_object
		
		#Add the row_object to the output					
		output_json.append(row_object)	
		
	return output_json

```

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 18, 2021, 4:05pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/6 "2021-08-18T16:05:51Z")

</div>

Golfed a bit:

```python
	def getStyle(row, col):
		if col == 'LED':
			color = value.getValueAt(row, col)
			if color == 'red':
				return {"backgroundColor": "red"}
			elif color == 'green':
				return {"backgroundColor": "green"}
			elif color == 'gray':
				return {"backgroundColor": "gray"}

	return [
		{
			"value": value.getValueAt(row, col)
			"style": getStyle(row, col)
			for col in value.columnNames.sort()
		}
		for row in range(value.rowCount)
	]

```

---

<div class="post-metadata">

**Author:** ![eichler-eng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eichler-eng/32/21259_2.png) [@eichler-eng](https://forum.inductiveautomation.com/u/eichler-eng)\
**Post date:** [August 18, 2021, 10:01pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/7 "2021-08-18T22:01:22Z")

</div>

Hi. I tried to use your code in the tag binding transform for my table. I get “Error\_Configuration”. The issue seems to be related to the for loops. Please can you explain how this is supposed to work? Thanks for the reply.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 18, 2021, 10:33pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/8 "2021-08-18T22:33:42Z")

</div>

My (admittedly untested) code is using a Python feature called ‘comprehensions’ - specifically, a dictionary comprehension nested inside a list comprehension. It’s a sometimes-nicer way to construct repetitive objects like this - there’s no significant advantage over your already working solution.  
I probably have a syntax error in there somewhere, the Error\_Configuration may tell you more if you hover over it in the designer.

---

<div class="post-metadata">

**Author:** ![eichler-eng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eichler-eng/32/21259_2.png) [@eichler-eng](https://forum.inductiveautomation.com/u/eichler-eng)\
**Post date:** [August 18, 2021, 10:39pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/9 "2021-08-18T22:39:05Z")

</div>

Thanks for the quick reply. I will read up on comprehensions.

Do you know how I can arrange the “columns” of my json into a specified order? I am not using any properties in the table, everything comes from the json. I have read a few posts but nothing seems to apply to my use case.

[Perspective Table sortOrder Property - Ignition Early Access - Inductive Automation Forum](https://forum.inductiveautomation.com/t/perspective-table-sortorder-property/36257/5)

[Order table column headers - Ignition - Inductive Automation Forum](https://forum.inductiveautomation.com/t/order-table-column-headers/25383)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 18, 2021, 10:40pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/10 "2021-08-18T22:40:48Z")

</div>

Your columns will be displayed in whatever order you have the objects in the top-level `columns` property:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/3/e36a670bc333bf0255bfdf08e3d1137d566025d2.png)

You must match the `field` in each object to a column name in your actual data.

---

<div class="post-metadata">

**Author:** ![eichler-eng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eichler-eng/32/21259_2.png) [@eichler-eng](https://forum.inductiveautomation.com/u/eichler-eng)\
**Post date:** [August 18, 2021, 10:45pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/11 "2021-08-18T22:45:08Z")

</div>

Got it - simple fix. Thanks again.

---

<div class="post-metadata">

**Author:** ![kavya\_shree](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kavya\_shree](https://forum.inductiveautomation.com/u/kavya_shree)\
**Post date:** [April 5, 2023, 5:01am UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/12 "2023-04-05T05:01:59Z")

</div>

Hi,  
I want to change only font color of only one column based on condition.

I tried table-data-query- named query- Add transform . but I am not getting.

I want the table like this with font color change on condition.(Target\<Actual) change font color of Actual.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/4/2473e10b6ebc8786932be09d24df25880bc81e88.png)

I am very sorry since it is urgent requirement for me I am posting the issue again here.  
sorry for the inconvenience.

Please help and guide the steps

---

<div class="post-metadata">

**Author:** ![kbarrett](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kbarrett/32/49385_2.png) [@kbarrett](https://forum.inductiveautomation.com/u/kbarrett)\
**Post date:** [March 13, 2024, 4:35pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/13 "2024-03-13T16:35:07Z")

</div>

Set the background color of individual cells in a perspective table

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

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

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

---

<div class="post-metadata">

**Author:** ![samer\_samy](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/samer_samy/32/52910_2.png) [@samer\_samy](https://forum.inductiveautomation.com/u/samer_samy)\
**Post date:** [May 26, 2024, 12:14pm UTC](https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047/14 "2024-05-26T12:14:37Z")

</div>

helped me, so brilliant 😀