# How would I style some table rows as light red, dark red, light green, and dark green?

**URL:** <https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 11, 2023, 9:57pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009 "2023-12-11T21:57:49Z")\
**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:** [December 11, 2023, 9:57pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/1 "2023-12-11T21:57:49Z")

</div>

I have a Perspective table in 8.1.35 running a named query on a database table of 50 rows of workstation IDs and names and their status. Some workstations are turned on and some are turned off (their status).

How can I style the workstations that are turned on as shades of light green and dark green? And then how can I style the workstations that are turned off as shades of light red and dark red?

I think I can apply CSS here on odd and even rows but my strategy isn't working out currently.

1. Have named query return format set to json.

2. Have script transform work through list of workstations and set style classes to redCustom or greenCustom.

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

1. In stylesheet.css use the following:

```auto
.psc-redCustom .ia_table __body__ row--even{
	background-color: #FF8A8A;
}

.psc-redCustom .ia_table __body__ row--odd{
	background-color: #FFCCCC;
}

.psc-greenCustom .ia_table __body__ row--even{
	background-color: #8AFF8A;
}

.psc-greenCustom .ia_table __body__ row--odd{
	background-color: #CCFFCC;
}
```

However, my table rows remain their default colors.

Any ideas on what I missed here?

EDIT: Had a typo in my stylesheet but same problem still.

---

<div class="post-metadata">

**Author:** ![amy.sudibyo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amy.sudibyo/32/38659_2.png) [@amy.sudibyo](https://forum.inductiveautomation.com/u/amy.sudibyo)\
**Post date:** [December 11, 2023, 10:18pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/2 "2023-12-11T22:18:21Z")

</div>

You might find it useful to refer to this [row style example](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Table)

The structure of your json is not correct, the table is expecting an array of row objects

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [December 11, 2023, 10:18pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/3 "2023-12-11T22:18:25Z")

</div>

Why not use the striped prop?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/7/5749b910128789dc55d0954890c65d1a93e9d86e.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:** [December 11, 2023, 10:25pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/4 "2023-12-11T22:25:17Z")

</div>

The table works as expected if I feed in a path to a regular style path such as "tables/rows/green/dark". The table also works as expected if I change my CSS to the following:

```auto
.psc-redCustom{
	background-color: #FF8A8A;
}

.psc-redCustom{
	background-color: #FFCCCC;
}

.psc-greenCustom{
	background-color: #8AFF8A;
}

.psc-greenCustom{
	background-color: #CCFFCC;
}
```

However, in this case I only get a single shade of red or green so I think my problem is my CSS and/or understanding of CSS and the stylesheet.

@jlandwerlen  
I am aware of this feature but how would I change the color based off values within individual rows?

---

<div class="post-metadata">

**Author:** ![amy.sudibyo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amy.sudibyo/32/38659_2.png) [@amy.sudibyo](https://forum.inductiveautomation.com/u/amy.sudibyo)\
**Post date:** [December 11, 2023, 10:28pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/5 "2023-12-11T22:28:43Z")

</div>

It's not necessary to use the stylesheet to get your custom colours. Just create style classes called redCustom and greenCustom and set the background colours of these as required

---

<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:** [December 11, 2023, 11:06pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/6 "2023-12-11T23:06:28Z")

</div>

> [@bmeyers](#):
>
> However, in this case I only get a single shade of red or green

Because you're overwriting one setting with a second setting, and so you'll only ever see the second setting applied. If you want different colors, you need different rules.

```auto
.psc-redCustom{
	background-color: #FF8A8A;
}

.psc-redCustomLighter{
	background-color: #FFCCCC;
}

```

And @amy.sudibyo is correct. If you actually create these named styles you're declaring, then this use of the `stylesheet.css` resource is unnecessary and would result in conflicting values later in development if you ever change one or the other.

> [@bmeyers](#):
>
> I am aware of this feature but how would I change the color based off values within individual rows?

When you are populating your data and configuring each object, you apply the style with logic:

```auto
# assume you're building your list of objects from some list of data
style_map = [
    0: "greenCustom",
    1: "redCustom"
]
rows = []
for entry in value:
    rows.append({"Workstation": {"justify": "center", "style": {"classes": style_map.get(entry["someKeyToCheck"])}, "align": "center", "value": entry["name"]})
return rows

```

This results in each row having the value for `classes` be applied based on the value of the "someKeyToCheck" attribute of each row, where the end value is retrieved from some dictionary (this exmaple assumes your value is an int) .

---

<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:** [December 11, 2023, 11:28pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/7 "2023-12-11T23:28:54Z")

</div>

It seems I have created an instance of an XY Problem and I apologize for that.

> **[XY problem](https://en.wikipedia.org/wiki/XY_problem)**
>
> The XY problem is a communication problem encountered in help desk, technical support, software engineering, or customer service situations where the question is about an end user's attempted solution (X) rather than the root problem itself (Y or Why?).
> The XY problem obscures the real issues and may even introduce secondary problems that lead to miscommunication, resource mismanagement, and sub-par solutions. The solution for the support personnel is to ask probing questions as to why the infor...

The reason I want to overwrite the odd / even rows with CSS is because when I go to sort a colored table (using regular styles for example which I have done) I might get an instance where I have several dark red rows in a row. The style applied to the JSON follows with whatever I sort the rows by in a session.

As far as I know there is no event associated with sorting a table so i can't retrigger styling all the rows.

If I am only using 1 shade of color I can (light green and dark green) I can apply that to the striped property on the table no issues.

So what I am really looking for is a way to say this row is always "green" and then CSS decides that the odd rows are light green and the even rows are dark green.

I hope that clarifies the real problem I am trying to solve.

---

<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:** [December 11, 2023, 11:43pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/8 "2023-12-11T23:43:53Z")

</div>

Possibly with the stylesheet by applying a `brightness` [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) on the even/odd rows; not sure how best to write the CSS selector to target the appropriate _visible_ rows.

---

<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:** [December 12, 2023, 12:26am UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/9 "2023-12-12T00:26:39Z")

</div>

The brightness filter worked for the red colors; not the green though. I am going to say this problem is impossible the way I want to do 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:** [December 12, 2023, 2:26pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/10 "2023-12-12T14:26:44Z")

</div>

Since the feature I am looking for doesn't exist I created a Features Request.

> **[Add CSS to Perspective Table Rows based off of row content | Ignition...](https://inductiveautomation.canny.io/ignition-features-and-ideas/p/add-css-to-perspective-table-rows-based-off-of-row-content)**
>
> You can currently use a Perspective table striped property set odd and even rows on a table (see attached picture).

I don't expect this to happen anytime soon so the customer has settled on using one shade of colors for now.

---

<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:** [December 12, 2023, 5:13pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/11 "2023-12-12T17:13:15Z")

</div>

In CSS, all things are possible:

```auto
div.tr-group:nth-child(odd) {
	filter: brightness(85%);
}

```

Tune as needed.

**Note:**  
This only works as long as a color is applied. If no color is applied, there is nothing to adjust the brightness of.  
 ![Screenshot 2023-12-12 at 9.21.21 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/84a568b78fb1228b4c4bbcaffbe7721556b1700a.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:** [December 12, 2023, 5:42pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/12 "2023-12-12T17:42:27Z")

</div>

That worked! I was going up in % and it wasn't working well for other colors; going down in % was the key.

---

<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:** [December 12, 2023, 9:28pm UTC](https://forum.inductiveautomation.com/t/how-would-i-style-some-table-rows-as-light-red-dark-red-light-green-and-dark-green/83009/13 "2023-12-12T21:28:03Z")

</div>

One thing to note is that the `stylesheet.css` resource rules are applied to ALL tables in the project. If you only want this for a specific table, I highly recommend supplying a `meta.domId` property for your Table and supplying a unique value, then modifying the rule to only target this Table:

```auto
#myUniqueId div.tr-group:nth-child(odd) {
	filter: brightness(85%);
}

```

 ![Screenshot 2023-12-12 at 1.37.15 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/a/fa86a0ca78bc6c7820e011f8de26d2818527e75a.png)