# Perspective Table - Style Classes based on Column Date Value

**URL:** <https://forum.inductiveautomation.com/t/perspective-table-style-classes-based-on-column-date-value/90373>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 14, 2024, 3:50pm UTC](https://forum.inductiveautomation.com/t/perspective-table-style-classes-based-on-column-date-value/90373 "2024-05-14T15:50:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kevin\_Flener](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@Kevin\_Flener](https://forum.inductiveautomation.com/u/Kevin_Flener)\
**Post date:** [May 14, 2024, 3:50pm UTC](https://forum.inductiveautomation.com/t/perspective-table-style-classes-based-on-column-date-value/90373/1 "2024-05-14T15:50:18Z")

</div>

I'm very new to Ignition, and coding in general. I have a table that uses a named query to populate the data. The fourth column is a date value (stored in datetime data type). I want to dynamically change the style class of each row, comparing that date against a custom property target date, so if it's before (less than?) the target date, it gets one style class, within one month past the target date gets another style class, and further out gets no style class.

How can I accomplish this?

---

<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:** [May 14, 2024, 3:54pm UTC](https://forum.inductiveautomation.com/t/perspective-table-style-classes-based-on-column-date-value/90373/2 "2024-05-14T15:54:43Z")

</div>

You'll have to add a transform to your binding, and loop through your data to set the proper style for your row.

There's an example in the docs:

> **[Styling Rows Based on Values | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-display-palette/perspective-table/styling-rows)**
>
> This page includes examples detailing different ways to style rows based on values using Script Transforms. Each example accomplishes similiar results through different binding and data types to change the background color of a row or individual...

---

<div class="post-metadata">

**Author:** ![Kevin\_Flener](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@Kevin\_Flener](https://forum.inductiveautomation.com/u/Kevin_Flener)\
**Post date:** [May 14, 2024, 4:19pm UTC](https://forum.inductiveautomation.com/t/perspective-table-style-classes-based-on-column-date-value/90373/3 "2024-05-14T16:19:12Z")

</div>

@pascal.fragnoud Thank you for this.

So, since my Named Query is returning a dataset, I should use the method in Example 1 including the additional transform to change it to an array if I want the entire row to highlight?

---

<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:** [May 14, 2024, 5:13pm UTC](https://forum.inductiveautomation.com/t/perspective-table-style-classes-based-on-column-date-value/90373/4 "2024-05-14T17:13:03Z")

</div>

You can change the return format of query bindings:

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

You can change it to `json` to make iterating through the data easier.

edit:  
I'd probably do something like this, with return format set to `dataset`:

Create a script in the script library for the comparison function:

```python
def style_by_date(date, target_date):
	if system.date.isBefore(date, target_date):
		return {'backgroundColor': 'red'}
	elif system.date.monthsBetween(target_date, date):
		return {'backgroundColor': 'blue'}
	else:
		return {}

```

then in the transform, something like this:

```python
def transform(self, value, quality, timestamp):
	headers = value.columnNames
	target_date = system.date.now()
	return [
		{
			'value': dict(zip(headers, row)),
			'style': some_module.style_by_date(row['date'], target_date)
		} for row in system.dataset.toPyDataSet(value)
	]

```

you'd obviously have to adapt the styles to whatever you need, and get the actual target date instead of using `system.date.now`.

Things that you might need to consider:

- if the target date can be changed and the table needs to update dynamically to reflect that change, put your query binding on a custom property. Then bind the table's data to both that custom property and your `target_date` property with a structure binding. This will ensure the binding is reevaluated when the date changes, without re-querying the database.
- You may need to add some validation on the styling function: What if the date is null for example ?

---

<div class="post-metadata">

**Author:** ![Kevin\_Flener](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@Kevin\_Flener](https://forum.inductiveautomation.com/u/Kevin_Flener)\
**Post date:** [May 14, 2024, 8:56pm UTC](https://forum.inductiveautomation.com/t/perspective-table-style-classes-based-on-column-date-value/90373/5 "2024-05-14T20:56:02Z")

</div>

@pascal.fragnoud

Thanks a ton! I had to modify it a bit. Here's how it ended up:

I added this script to the Library:

```python
def style_by_date(Next_Cal_Due, Current_Date, Cal_Soon_Date):
    if system.date.isBefore(Next_Cal_Due, Current_Date):
        return {'backgroundColor': 'red'}
    elif system.date.isBefore(Next_Cal_Due, Cal_Soon_Date):
        return {'backgroundColor': 'yellow'}
    else:
        return {}

```

and placed this transform on my data binding:

```python
def transform(self, value, quality, timestamp):

	headers = value.columnNames
	Current_Date = system.date.now()
	dataset = system.dataset.toPyDataSet(value)
	Cal_Soon_Date = system.date.addMonths(Current_Date, 1)
	
	return [
		{
			'value': dict(zip(headers, row)),
			'style': KF_VCal_Table_Style.style_by_date(row['NextCalDue'], Current_Date, Cal_Soon_Date)
		} for row in system.dataset.toPyDataSet(value)
	]

	return result

```

And now I have my highlighted rows.

I figured out I can use Hex codes for the colors to change them.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 14, 2024, 9:00pm UTC](https://forum.inductiveautomation.com/t/perspective-table-style-classes-based-on-column-date-value/90373/6 "2024-05-14T21:00:50Z")

</div>

You can use hex color codes but you should get into the habit of using theme color variables. See [Perspective Built-In Themes | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/perspective-built-in-themes).

Then rather than defining colors you set the style classes instead.

This makes consistent styling much simpler, controllable and easy to change.

Good web design says, "Keep style and content separate."

---

<div class="post-metadata">

**Author:** ![Kevin\_Flener](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@Kevin\_Flener](https://forum.inductiveautomation.com/u/Kevin_Flener)\
**Post date:** [May 14, 2024, 9:19pm UTC](https://forum.inductiveautomation.com/t/perspective-table-style-classes-based-on-column-date-value/90373/7 "2024-05-14T21:19:46Z")

</div>

@Transistor

Thank you for the advice.