# Vertical Table in Perspective

**URL:** <https://forum.inductiveautomation.com/t/vertical-table-in-perspective/52396>\
**Category:** Ignition\
**Created:** [October 27, 2021, 2:02pm UTC](https://forum.inductiveautomation.com/t/vertical-table-in-perspective/52396 "2021-10-27T14:02:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![williann.tx](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/williann.tx/32/28576_2.png) [@williann.tx](https://forum.inductiveautomation.com/u/williann.tx)\
**Post date:** [October 27, 2021, 2:02pm UTC](https://forum.inductiveautomation.com/t/vertical-table-in-perspective/52396/1 "2021-10-27T14:02:00Z")

</div>

Is it possible to have a vertical table with heading in a column?

It would only be 2 columns: Header and data.

Or any suggestions?

Thanks in advance!  
-W

---

<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:** [October 27, 2021, 2:20pm UTC](https://forum.inductiveautomation.com/t/vertical-table-in-perspective/52396/2 "2021-10-27T14:20:21Z")

</div>

Not quite really with the normam table unless heavily breaking css xD  
Your best bet is flexrepeaters  
and maybe some css grid styles?

---

<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:** [October 27, 2021, 2:25pm UTC](https://forum.inductiveautomation.com/t/vertical-table-in-perspective/52396/3 "2021-10-27T14:25:27Z")

</div>

Is there a reason you can’t use the Table component and only define one 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:** [October 27, 2021, 2:52pm UTC](https://forum.inductiveautomation.com/t/vertical-table-in-perspective/52396/4 "2021-10-27T14:52:06Z")

</div>

you can form grid structures with

```auto
{ 
  "display": "grid",
  "grid-template-columns": "20px 50px"
}

```

you should look up the css for more options if needed xd  
like `grid-template-columns: "repeat(2, auto)"` is probably also usefull

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/8816f1a42e254a4ed3a7c01c925876e0c13f5ce9.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:** [October 27, 2021, 2:56pm UTC](https://forum.inductiveautomation.com/t/vertical-table-in-perspective/52396/5 "2021-10-27T14:56:20Z")

</div>

True you could also just use the table component, disable header and construct two columns like header/data xd  
Probably easier to get the default look that way xD

---

<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:** [October 27, 2021, 3:41pm UTC](https://forum.inductiveautomation.com/t/vertical-table-in-perspective/52396/6 "2021-10-27T15:41:31Z")

</div>

I actually misunderstood the question. to have a header on the side, you would need to construct your own container/view.

```auto
root (flex container in row mode)
L_ Label
L_ Flex Repeater (where each "row" is a new instance)

```

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [October 27, 2021, 7:06pm UTC](https://forum.inductiveautomation.com/t/vertical-table-in-perspective/52396/7 "2021-10-27T19:06:13Z")

</div>

If you're willing to do some custom theming, I believe @thewebpleb has created an exchange resource with some CSS that accomplishes this. Granted, his version only displays the table's columns inside each cell when the view is shrunk past a certain breakpoint (e.g. mobile). It probably wouldn't be hard to define a custom table style class based on his css that would always format the table data in this manner though. Check out the following video at about the 11 minute mark:

[![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/2/92a3083bcb53f1aa45967027e1740057a56e0e5a.jpeg "Ignition Perspective - Modern Table responsive CSS") ](https://www.youtube.com/watch?v=OfwPNq7tgnE)