# \[SOLVED\] Add alternating color to Perspective table rows through scripting after sorting the data

**URL:** <https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [May 12, 2023, 2:12pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649 "2023-05-12T14:12:25Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [May 12, 2023, 2:12pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/1 "2023-05-12T14:12:25Z")

</div>

I have a generic Perspective table with an added custom property called **ds** that will call a named query in the future.

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

On the table is a single system event **onStartup** that calls a custom method script on the table.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/0/10f2cc4820c5b5e6d8ebe674395333d2d5361599.png)

That custom method completes the following code:

```auto
def colorRows(self):
	value = self.custom.ds
		
	# Initialize variables
	new_list = []
	is_light = False # This variable will keep track of the current row color

	# Iterate over each dictionary in the original list
	for item in value:
		row_color = "tables/rows/green/"

		if is_light:
		    row_color += "light"
		else:
		    row_color += "dark"
		    
		new_dict = {
		    "city": {
		        "value": item["city"],
		        "editable": True,
		        "style": {
		            "classes": row_color
		        },
		        "align": "center",
		        "justify": "center"
		    },
		    "country": {
		        "value": item["country"],
		        "editable": True,
		        "style": {
		            "classes": row_color
		        },
		        "align": "center",
		        "justify": "center"
		    },
		    "population": {
		        "value": item["population"],
		        "editable": True,
		        "style": {
		            "classes": row_color
		        },
		        "align": "center",
		        "justify": "center"
		    }
		}
		
		# Append the converted dictionary to the new list
		new_list.append(new_dict)
		
		# Change every other row of color.
		is_light = not is_light
	
	self.props.data = new_list
```

On system startup the code works fine.

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

But when I go to sort any columns the color of the lines are now wrong.

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

What event do I need to look for on the table to trigger re-coloring the rows after sorting them? None of the obvious answers appears to work.

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

Thank you for any advice.

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [May 12, 2023, 2:48pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/2 "2023-05-12T14:48:37Z")

</div>

This is a good use for CSS and styles rather than assigning the color in a script. The browser would manage alternating the background color and sorting wouldn't be an issue.  
The default Perspective table seems to use css classes `ia_table __body__ row--even` and `ia_table __body__ row--odd`.  
If you don't mind a sledgehammer approach, you could add the following to Styles/stylesheet.css

```auto
.ia_table __body__ row--even{
	background-color: blue;
}

.ia_table __body__ row--odd{
	background-color: yellow;
}

```

Any HTML color designation would work instead of blue and yellow.

The default perspective theme uses variables (`var(--neutral-90)`), so a more elegant approach would be to set the variable instead of hardcoding the values.

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [May 12, 2023, 3:01pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/3 "2023-05-12T15:01:39Z")

</div>

This seems to work great. I just tested it.

However, it brings up a slightly different problem. Sometimes I need the rows to be a different shade of colors based off of the population for example. If the population is greater than 100,000 use these colors, otherwise use these other colors.

Is that possible in CSS?

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [May 12, 2023, 3:15pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/4 "2023-05-12T15:15:16Z")

</div>

It is possible, even preferred.  
Conceptually you ~~would~~ should add style names to the styles folder:  
 ![Capture](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/c/fc99e310a12173b249ee347e98776f9d384b62df.png)

Then assign the style name to the element in your load script Instead of "light" and "dark" you would use one of the style names (e.g., "high-high", "high", "normal-range", "low", "low-low")  
You can add multiple styles to an element and the last one wins.

If you want alternating high-high (high-high-light and high-high-dark) then perhaps a different way to use color might be considered. Implementing that will be tricky - you will be fighting the tools - and the result might not be as readable and usable as it could be.

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [May 12, 2023, 4:28pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/5 "2023-05-12T16:28:05Z")

</div>

Ok, I jumped around 20+ other forum threads and it still isn't clear to me what the solution is...

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

I have my "customYellow" overwriting the default styles for tables.

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

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

And I see how I could split that up into the odd/even rows but how do I apply a style based on the population value?

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [May 12, 2023, 4:31pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/6 "2023-05-12T16:31:34Z")

</div>

> [@bmeyers](#):
>
> And I see how I could split that up into the odd/even rows but how do I apply a style based on the population value?

This is the part you do in a binding. It's possible to use an expression or other bindings plus script transforms.

Examine the population and return the appropriate style.

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [May 12, 2023, 5:07pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/7 "2023-05-12T17:07:43Z")

</div>

Hmmm... the Table has properties for Striped with colors for even and odd - you don't need the entry in the stylesheet.css...  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/5/55ba5ea06d5d6bfe0c7809cfe0eaf1c7f3da41e0.png)

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [May 12, 2023, 5:30pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/8 "2023-05-12T17:30:47Z")

</div>

This is a really good find!

However, I am still unable to bind it to the individual population.

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

I am going to try to do this in a transform on the data itself.

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [May 12, 2023, 6:16pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/9 "2023-05-12T18:16:54Z")

</div>

It seems like you should be able to add a map transform, but you may need to do it in your load script. As this data isn't changing on Sort you will not have your original problem.

Something like

```
population = item["population"]

	if population > 1000000:
	    populationClass = "Test/Metropolis"
	elif population > 100000:
		populationClass = "Test/City"
	elif population > 10000:
		populationClass = "Test/Town"
	elif population > 1000: 
		populationClass = "Test/Village"
	else:
		populationClass = "Test/Community"

```

And then declare styles for all of those classes  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/a/5a58ee4e6067d3b469a1ab463aeb57f435e5ae78.png)

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [May 12, 2023, 6:38pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/10 "2023-05-12T18:38:05Z")

</div>

I am not saying this is a good thing to do, but if you want to assign background color for the row based on population size as discussed above and still have alternation between even and odd rows you could adjust the brightness for even numbered rows in the stylesheet.css

> .ia\_table\_\_body\_\_row--even{  
> filter: brightness(150%)  
> }

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [May 12, 2023, 6:58pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/11 "2023-05-12T18:58:22Z")

</div>

Hmmmmmmm, I haven't been able to make any method work so far. When you sort a table the data displayed seems to be different than the data in the data property.

I think I have to mark this as unresolved for now.

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [May 12, 2023, 7:39pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/12 "2023-05-12T19:39:36Z")

</div>

I thought about my original problem some more and I think I uncovered a bug with the sorting feature on a table or at least a discrepancy between how the table sorts things and how SQL sorts things.

Because to solve my problem I could sort by whatever criteria I wanted in the named query itself and then just color the rows as needed. It wouldn't necessarily matter if I sorted ASCENDING or DESCENDING.

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

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

So we can see the named query sorts alphabetically but the Ignition table sorts all capital letters first and then sorts all lower case letters.

So I think I have to turn off the table sorting ability and add some user friendly buttons to call a different query to sort how I want to sort things or setup my own coding to manipulate the dataset, color it, and then display it.

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [May 30, 2023, 6:19pm UTC](https://forum.inductiveautomation.com/t/solved-add-alternating-color-to-perspective-table-rows-through-scripting-after-sorting-the-data/73649/13 "2023-05-30T18:19:19Z")

</div>

> [@Sorting Using Python Sorted Function](https://forum.inductiveautomation.com/t/sorting-using-python-sorted-function/74181/2):
>
> sorted accepts a keyword argument key: [https://docs.python.org/2.7/library/functions.html#sorted](https://docs.python.org/2.7/library/functions.html#sorted) key should be a callable that returns a sortable item per value. Typically this is a simple lambda. Simplifying your script a little, and running it on some test data, you can return a sorted list with something like this: returnedData = system.dataset.toPyDataSet(system.dataset.toDataSet( ["Clock Number", "Name", "Department", "Hours"], [["100003683", "Bob Vance", 9, 24.0], ["10000803…