# Perspective: Display tags value in table format

**URL:** <https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 30, 2023, 4:31pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112 "2023-07-30T16:31:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [July 30, 2023, 4:31pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/1 "2023-07-30T16:31:07Z")

</div>

Hi Forum,

What is the best strategy to display tag values in table format, that is tag's names in first column and tag's values on the second?

Right now, I use one row template with tagName and tagValues and use flex container to stack them up.  
It is a bit tricky to align them though.

---

<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:** [July 30, 2023, 4:36pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/2 "2023-07-30T16:36:50Z")

</div>

Where's the data coming from and what format is it in? (Is it a dataset, a list, or what? Can you post an example?)

* * *

Tip: mind your apostrophes.

- One tag's name.
- Multiple tags' names.  
It makes a difference to readability and errors can cause ambiguity in the writing.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [July 30, 2023, 6:01pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/3 "2023-07-30T18:01:45Z")

</div>

Just use a table. The data in the table's two columns would be tag name and tag path. For the latter, configure a column view. The column view would take the tag path and use indirect binding to display the tag value instead.

{No scripting!}

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [July 30, 2023, 7:26pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/4 "2023-07-30T19:26:41Z")

</div>

I thought of using a table initially, but cannot imagine passing a dynamic path into manual populated dataset and into the table and table will display the tag's value.

I will explore this.

Thank you

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [July 30, 2023, 7:29pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/5 "2023-07-30T19:29:37Z")

</div>

The data sources are random with no relationship.  
I would like to display each tagName and tagValues in table format.

With that being said, I need to enter tag's name individually, and enter its path individual.

---

<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:** [July 30, 2023, 7:49pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/6 "2023-07-30T19:49:43Z")

</div>

This is a "get you going" method of exploring Ignition. It's not a great layout for maintainability, etc., but should give you some ideas of how stuff works.

 ![Table tag binding](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/9/a96ee420262dae1158ac4087f98dae9d4a9fb383.png)

1. Drop a Table component into the view.
2. Expand the data and delete any items that are in it. (Use right-click.)
3. Create array element 0 as an "object".
4. Add in a value as shown.
5. Add in a second value as shown.
6. Click in the gutter to create a binding.
7. Make it a tag binding.
8. Use the tag finder to add the path to the tag.
9. You should get something like this.  
Click OK and repeat for as many tags as you've got.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 30, 2023, 9:32pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/7 "2023-07-30T21:32:00Z")

</div>

> [@Eugene49](#):
>
> is a bit tricky to align them though.

This makes me think you're trying to use a coordinate container for this which is definitely the wrong container type for a table-like group of components. You should be using a flex container instead.

That said, as others have said, for an actual table, use a table. There are instances though where you might want to use a flex repeater to repeat a row template. However you can also use a Table to repeat row templates too. This is useful if you have a large number of rows as you can use the `virtualised` mode to only load rows displayed which can significantly help with performance

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [July 30, 2023, 11:02pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/8 "2023-07-30T23:02:43Z")

</div>

I just created a bare-bones example.

Sample view with a table. Note, in the table's `columns` property, how the `Value` column's `render` is set to `view`:

```auto
{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "children": [
          {
            "meta": {
              "name": "Table1"
            },
            "position": {
              "basis": "400px",
              "grow": 1
            },
            "propConfig": {
              "custom.filtered": {
                "access": "PRIVATE"
              },
              "custom.filteredDS": {
                "access": "PRIVATE"
              },
              "custom.rawData": {
                "access": "PRIVATE"
              }
            },
            "props": {
              "columns": [
                {
                  "align": "center",
                  "boolean": "checkbox",
                  "dateFormat": "MM/DD/YYYY",
                  "editable": false,
                  "field": "Name",
                  "filter": {
                    "boolean": {
                      "condition": ""
                    },
                    "date": {
                      "condition": "",
                      "value": ""
                    },
                    "enabled": false,
                    "number": {
                      "condition": "",
                      "value": ""
                    },
                    "string": {
                      "condition": "",
                      "value": ""
                    },
                    "visible": "on-hover"
                  },
                  "footer": {
                    "align": "center",
                    "justify": "left",
                    "style": {
                      "classes": ""
                    },
                    "title": ""
                  },
                  "header": {
                    "align": "center",
                    "justify": "left",
                    "style": {
                      "classes": ""
                    },
                    "title": ""
                  },
                  "justify": "auto",
                  "nullFormat": {
                    "includeNullStrings": false,
                    "nullFormatValue": "",
                    "strict": false
                  },
                  "number": "value",
                  "numberFormat": "0,0.##",
                  "progressBar": {
                    "bar": {
                      "color": "",
                      "style": {
                        "classes": ""
                      }
                    },
                    "max": 100,
                    "min": 0,
                    "track": {
                      "color": "",
                      "style": {
                        "classes": ""
                      }
                    },
                    "value": {
                      "enabled": true,
                      "format": "0,0.##",
                      "justify": "center",
                      "style": {
                        "classes": ""
                      }
                    }
                  },
                  "render": "auto",
                  "resizable": true,
                  "sort": "none",
                  "sortable": true,
                  "strictWidth": false,
                  "style": {
                    "classes": ""
                  },
                  "toggleSwitch": {
                    "color": {
                      "selected": "",
                      "unselected": ""
                    }
                  },
                  "viewParams": {},
                  "viewPath": "",
                  "visible": true,
                  "width": ""
                },
                {
                  "align": "center",
                  "boolean": "checkbox",
                  "dateFormat": "MM/DD/YYYY",
                  "editable": false,
                  "field": "Value",
                  "filter": {
                    "boolean": {
                      "condition": ""
                    },
                    "date": {
                      "condition": "",
                      "value": ""
                    },
                    "enabled": false,
                    "number": {
                      "condition": "",
                      "value": ""
                    },
                    "string": {
                      "condition": "",
                      "value": ""
                    },
                    "visible": "on-hover"
                  },
                  "footer": {
                    "align": "center",
                    "justify": "left",
                    "style": {
                      "classes": ""
                    },
                    "title": ""
                  },
                  "header": {
                    "align": "center",
                    "justify": "left",
                    "style": {
                      "classes": ""
                    },
                    "title": ""
                  },
                  "justify": "auto",
                  "nullFormat": {
                    "includeNullStrings": false,
                    "nullFormatValue": "",
                    "strict": false
                  },
                  "number": "value",
                  "numberFormat": "0,0.##",
                  "progressBar": {
                    "bar": {
                      "color": "",
                      "style": {
                        "classes": ""
                      }
                    },
                    "max": 100,
                    "min": 0,
                    "track": {
                      "color": "",
                      "style": {
                        "classes": ""
                      }
                    },
                    "value": {
                      "enabled": true,
                      "format": "0,0.##",
                      "justify": "center",
                      "style": {
                        "classes": ""
                      }
                    }
                  },
                  "render": "view",
                  "resizable": true,
                  "sort": "none",
                  "sortable": true,
                  "strictWidth": false,
                  "style": {
                    "classes": ""
                  },
                  "toggleSwitch": {
                    "color": {
                      "selected": "",
                      "unselected": ""
                    }
                  },
                  "viewParams": {},
                  "viewPath": "TagColumn",
                  "visible": true,
                  "width": ""
                }
              ],
              "data": {
                "$": [
                  "ds",
                  192,
                  1690756907117
                ],
                "$columns": [
                  {
                    "data": [
                      "Gateway CPU",
                      "Gateway RAM"
                    ],
                    "name": "Name",
                    "type": "String"
                  },
                  {
                    "data": [
                      "[default]Forum/GatewayCPU",
                      "[default]Forum/GatewayMemory"
                    ],
                    "name": "Value",
                    "type": "String"
                  }
                ]
              },
              "pager": {
                "bottom": false
              }
            },
            "type": "ia.display.table"
          }
        ],
        "meta": {
          "name": "FlexContainer"
        },
        "position": {
          "basis": "34px",
          "grow": 1
        },
        "props": {
          "direction": "column"
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}

```

The above table uses this as the rendering view for the column. Note that the `value` passed into this view is the tagpath from the `Value` column:

```auto
{
  "custom": {
    "fmt": "#,##0.000",
    "tag": 0.01669449081803005
  },
  "params": {
    "row": "value",
    "rowIndex": "value",
    "value": "[default]Forum/GatewayCPU"
  },
  "propConfig": {
    "custom.fmt": {
      "binding": {
        "config": {
          "fallbackDelay": 2.5,
          "mode": "indirect",
          "references": {
            "1": "{view.params.value}"
          },
          "tagPath": "{1}.FormatString"
        },
        "type": "tag"
      },
      "persistent": true
    },
    "custom.tag": {
      "binding": {
        "config": {
          "fallbackDelay": 2.5,
          "mode": "indirect",
          "references": {
            "1": "{view.params.value}"
          },
          "tagPath": "{1}"
        },
        "type": "tag"
      },
      "persistent": true
    },
    "params.row": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.rowIndex": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.value": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 42,
      "width": 233
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "basis": "32px",
          "grow": 1
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "expression": "numberFormat({view.custom.tag}, {view.custom.fmt})"
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {
            "textAlign": "right"
          }
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "paddingLeft": "0.5em",
        "paddingRight": "1em"
      }
    },
    "type": "ia.container.flex"
  }
}

```

Adjust your source dataset for the table as desired.

Note that the rendering view only handles numbers, and expects the tag to have a valid `.FormatString`. Fortunately, numeric tags have valid default format strings.

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [August 1, 2023, 3:25am UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/9 "2023-08-01T03:25:33Z")

</div>

> [@nminchin](#):
>
> This makes me think you're trying to use a coordinate container for this which is definitely the wrong container type for a table-like group of components. You should be using a flex container instead.

So I have 6 columns, that are, tagName, value, tagName, value, tagName, value, Respectively.

Say in this table I have 3 rows.

So I use Flex Container and set to Direction to Column.  
Within this flex, I use another flex and set Direction to Row.  
In this row Container I have 3 items (tagName - value pair - a flex view), I also use coordinate containers in between to act as fillers.

These tagNames have different text length, different basis px.  
As a result, when I increase the layout size of the parent flex container, they won't be aligned.

I should be able to make mockup data and take a screenshot.  
But hope you get what I mean, if there is easy way to align these, I am all ears.  
As the table option might not be a solution for this scenario because some data I want to display and input field and status indicator box.

below is the screenshot:

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

Also attach, is the below export:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/e/ce6d06efdaec34939bf8abda3ccd5fc2ec662264.png)  
[WorkArea\_v005\_2023-07-31\_2103.zip](https://forum.inductiveautomation.com/uploads/short-url/9t2jA2yy17udWNve1POcizDWF6C.zip) (16.2 KB)

First we need to make 3 lines span into single:  
this  
tag  
value  
into "this tag value" (single line)

What is the trick here to get them aligned?

Edit:  
I finally manage to align the items, in a form like a table.

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [August 1, 2023, 3:26am UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/10 "2023-08-01T03:26:41Z")

</div>

> [@pturmel](#):
>
> I just created a bare-bones example.

Thanks I will play with this.

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [August 1, 2023, 3:29am UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/11 "2023-08-01T03:29:16Z")

</div>

> [@Transistor](#):
>
> This is a "get you going" method of exploring Ignition.

This is very straight forward and very helpful visual tool.  
This definitely should work.  
I will also try this.

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [August 2, 2023, 3:46am UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/12 "2023-08-02T03:46:50Z")

</div>

> [@pturmel](#):
>
> I just created a bare-bones example.

I am sorry. I do not follow. How do I use the code you posted? I see that its an object..  
Do I import this code or paste it somewhere?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 2, 2023, 6:25am UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/13 "2023-08-02T06:25:40Z")

</div>

Create two views, doesn't matter what container type. Copy Phil's first json code, shift+right click on the first new View and click "Paste JSON" (down the bottom). Do the same for the other JSON into the 2nd new view.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [August 2, 2023, 11:21am UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/14 "2023-08-02T11:21:11Z")

</div>

And then fix up the table's source data (constant) to have tag paths from your environment.

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [August 4, 2023, 3:51pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/15 "2023-08-04T15:51:05Z")

</div>

Sounds good. I will try this.

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [August 26, 2023, 3:12am UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/16 "2023-08-26T03:12:48Z")

</div>

> [@Transistor](#):
>
> - Drop a Table component into the view.
> - Expand the data and delete any items that are in it. (Use right-click.)

Quick Question, how do you clear all data from the newly dragged table?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 26, 2023, 4:17am UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/17 "2023-08-26T04:17:14Z")

</div>

I usually set the data to a value type and then back to an array. Otherwise deleting all of the items is slow and painful

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [August 27, 2023, 8:14pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/18 "2023-08-27T20:14:03Z")

</div>

> [@nminchin](#):
>
> I usually set the data to a value type and then back to an array.

Got it. I was binding it to null then remove the binding.

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [August 27, 2023, 8:24pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/19 "2023-08-27T20:24:25Z")

</div>

Another problem I encountered, with using Column Property.

I understand that, this is use to format the given column.  
I only have one column "timestamp" that I need to format.

But when I add this format to one column, other columns will not show..  
Is this really the case?  
My problem is, I have greater than 10 columns.  
I have to add columns on this property for them to show up?  
What if my datasets has dynamic number of columns?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 27, 2023, 11:40pm UTC](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112/20 "2023-08-27T23:40:10Z")

</div>

> [@Eugene49](#):
>
> But when I add this format to one column, other columns will not show..  
> Is this really the case?

Yes.

> [@Eugene49](#):
>
> My problem is, I have greater than 10 columns.  
> I have to add columns on this property for them to show up?

Yes. If you define _any_ columns, then only those defined will show in the Table

> [@Eugene49](#):
>
> What if my datasets has dynamic number of columns?

Bind your `props.columns` to a script transform to dynamically create the columns.

[Next page](https://forum.inductiveautomation.com/t/perspective-display-tags-value-in-table-format/77112.md?page=2)