# Perspective table column format

**URL:** <https://forum.inductiveautomation.com/t/perspective-table-column-format/58918>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [April 27, 2022, 10:16am UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918 "2022-04-27T10:16:37Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![dhananjay\_vichare](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dhananjay_vichare/32/74712_2.png) [@dhananjay\_vichare](https://forum.inductiveautomation.com/u/dhananjay_vichare)\
**Post date:** [April 27, 2022, 10:16am UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/1 "2022-04-27T10:16:37Z")

</div>

I would like to show the values in ‘kg’ in perspective table column.

For Example : 123.44 kg  
It is possible to use column number format as **0,0.## ; 'Kg’**  
**It is not working. Please advise.**

I am using Ignition version **8.1.15**.  
I am refereeing below link  
[Data Type Formatting Reference - Ignition User Manual 8.1 - Ignition Documentation (inductiveautomation.com)](https://docs.inductiveautomation.com/display/DOC81/Data+Type+Formatting+Reference)

---

<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:** [April 27, 2022, 11:05am UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/2 "2022-04-27T11:05:30Z")

</div>

What is your data source ? Do you pull data from a database, from tags, from processing… ?

---

<div class="post-metadata">

**Author:** ![dhananjay\_vichare](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dhananjay_vichare/32/74712_2.png) [@dhananjay\_vichare](https://forum.inductiveautomation.com/u/dhananjay_vichare)\
**Post date:** [April 27, 2022, 11:07am UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/3 "2022-04-27T11:07:47Z")

</div>

> [@pascal.fragnoud](#):
>
> Do you pull data from a database

I am pulling data from database using named query.

For work around i have used CONCAT(value,'Kg') in named query. however, i am not able to sort the column.

---

<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:** [April 27, 2022, 11:52am UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/4 "2022-04-27T11:52:58Z")

</div>

you can use css ::after{content}

(here i use css injection)

```auto
}.psc-suffixKg:not(.ia_table __head__ header__cell) .content::after{ padding-left: 2px; content:" kg"}{

```

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

---

<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:** [April 27, 2022, 11:55am UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/5 "2022-04-27T11:55:25Z")

</div>

Yea, that’s tricky. Adding ‘kg’ to the value makes it a string, so the column will be sorted alphanumerically, not what you usually want with weights…

So, I have a ‘solution’ for you. Note the quotes around ‘solution’. It’s not pretty, but it kind of works.  
If you want to be able to sort the column numerically, then the values need to be numbers. So you can’t add ‘kg’ to them directly. However… css can add text after an element, with `::after`.  
Then it’s just a game of finding the proper selector.

Here’s my suggestion: Make a style class, with a background image property. In this property, we’ll need to inject some css in this form: `} .psc-your_style_class[data-column-id=your_column_name] > .content::after { content: "Kg"; } {`  
where `your_style_class` is the name of the style class, and `your_column_name` is the name of the column where your weights are.  
Now, add this class to the table’s `cell.style.classes` property.

In images (on the default table’s population column):

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

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

@victordcq : How does your selector work ? I did try using the column’s style classes but couldn’t figure it out.

---

<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:** [April 27, 2022, 12:01pm UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/6 "2022-04-27T12:01:34Z")

</div>

Adding the class to the column styles gets it applied to all elements in the column. so i just use :not() to substract the header

---

<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:** [April 27, 2022, 12:02pm UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/7 "2022-04-27T12:02:20Z")

</div>

It didn’t apply anywhere when I tried it. I guess I mistyped something, heh…

---

<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:** [April 27, 2022, 12:08pm UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/8 "2022-04-27T12:08:07Z")

</div>

Do you see a reason why the `background-color` wouldn’t apply here ?

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

---

<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:** [April 27, 2022, 12:11pm UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/9 "2022-04-27T12:11:25Z")

</div>

did you fill in the field?

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

---

<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:** [April 27, 2022, 12:19pm UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/10 "2022-04-27T12:19:16Z")

</div>

Yes I did:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/5/55f80a279a00c941a283f9cc525dca5b5d32ad18.png)

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

---

<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:** [April 27, 2022, 12:25pm UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/11 "2022-04-27T12:25:31Z")

</div>

weeeird xd perspective version?

---

<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:** [April 27, 2022, 12:26pm UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/12 "2022-04-27T12:26:01Z")

</div>

8.1.10

---

<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:** [April 27, 2022, 12:27pm UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/13 "2022-04-27T12:27:44Z")

</div>

i a bit further on 8.1.14. But yours is also still quite new, this should be working xd

Altho no acctually didnt they “recently” change the style of the table, i remember seeing some posts about the padding of the cells. Altho i see you already have that padding so no idea

---

<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:** [April 27, 2022, 12:40pm UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/14 "2022-04-27T12:40:24Z")

</div>

maybe in 2021, couldn’t find anything about that in the 2022 change logs… Oh well, I don’t usually style table columns anyway 😃

---

<div class="post-metadata">

**Author:** ![dhananjay\_vichare](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dhananjay_vichare/32/74712_2.png) [@dhananjay\_vichare](https://forum.inductiveautomation.com/u/dhananjay_vichare)\
**Post date:** [April 27, 2022, 12:56pm UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/15 "2022-04-27T12:56:16Z")

</div>

Thank you for help Victor and Pascal.

I am able to add style class and my both issues solved.

I can see “Eng. unit” after value in same column and can sort the column clicking on column header.

Thank you once again.

---

<div class="post-metadata">

**Author:** ![Michal\_Goralczyk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/michal_goralczyk/32/55564_2.png) [@Michal\_Goralczyk](https://forum.inductiveautomation.com/u/Michal_Goralczyk)\
**Post date:** [March 17, 2025, 9:01am UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/16 "2025-03-17T09:01:21Z")

</div>

This is what I was looking for, thank you! In addition to this question, do you perhaps know why it stops working when I move the style to some folder? I do this for organizing

---

<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:** [March 17, 2025, 9:07am UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/17 "2025-03-17T09:07:18Z")

</div>

Did you reselect the style class from the `column.x.style.classes` dropdown to update the path?

---

<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:** [March 17, 2025, 9:09am UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/18 "2025-03-17T09:09:11Z")

</div>

> [@dhananjay\_vichare](#):
>
> It is possible to use column number format as **0,0.## ; 'Kg’**

A bit late, but **Kg** in the SI system means kelvin-grams.  
You mean **kg**. The kilo prefix is lowercase.  
Capitals matter!

---

<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:** [March 17, 2025, 1:17pm UTC](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/19 "2025-03-17T13:17:46Z")

</div>

You need to use the full path of the style class, so if you move it or rename it, you need to update the class property of your table to reflect that change AND update the selector of the css rule.

Also note that there's now a stylesheet where you can put this kind of css, instead of injecting it through classes.  
You can give your table a special id with the `domId` meta property:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/2/e2402611ea36550c26a073ca498d2b4257f09830.png)  
This will allow you to target that specific table and make the selector simpler.
