# Vertical text in tables

**URL:** <https://forum.inductiveautomation.com/t/vertical-text-in-tables/85912>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 19, 2024, 7:01am UTC](https://forum.inductiveautomation.com/t/vertical-text-in-tables/85912 "2024-02-19T07:01:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jrd](https://avatars.discourse-cdn.com/v4/letter/j/b9bd4f/32.png) [@jrd](https://forum.inductiveautomation.com/u/jrd)\
**Post date:** [February 19, 2024, 7:01am UTC](https://forum.inductiveautomation.com/t/vertical-text-in-tables/85912/1 "2024-02-19T07:01:15Z")

</div>

Hi  
I would like to construct something to display an NxN edge matrix, ie with N rows and N columns. For example, this would represent "From X to Y" distances.  
I imagine a table, with the Left columns being "From" locations, and the top row being "To" locations  
If possible. I would like to display the top row with vertically oriented text. Is this possible?  
Alternatively I would use a Flex repeater, but again would want vertical text in the top row. Is this possible

Suggestions appreciated

---

<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:** [February 19, 2024, 8:34am UTC](https://forum.inductiveautomation.com/t/vertical-text-in-tables/85912/2 "2024-02-19T08:34:07Z")

</div>

> I would like to display the ~~top row~~ **headers** with vertically oriented text.

Try this:

- Make sure that you have each column's **columns.X.field** property assigned to one of the field names in the **data** property.
- On each column add in the following properties.  
`columns.X.header.style.writingMode : vertical-lr`  
`columns.X.header.style.transform : rotate(180deg)`  
where 'X' is the column number. (Hit the + button beside `header.style` and add a new `value`.)

---

<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:** [February 19, 2024, 8:47am UTC](https://forum.inductiveautomation.com/t/vertical-text-in-tables/85912/3 "2024-02-19T08:47:17Z")

</div>

If you want both your left and top column to be "sticky" check out this.  
Should be easy enough to apply a rotate in here

> [@Perspective - View Canvas - replicate Excel spreadsheet - freeze top and left headers?](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/6):
>
> here ya go: Sorry for the terrible quality, i couldnt upload the big video and seems i reduce it way to much xD the spacing columns and rows is a bit off but its just a demo stuck_out_tongue important things are: for the header position:sticky top:0 left:null for the left one: position:sticky top:null left:0 for the rest: position:absolute or position:relative [ { "position": "sticky", "top": "0px", "left": null, "bottom": "auto", "right": "auto…

---

<div class="post-metadata">

**Author:** ![Chris\_Murphy](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@Chris\_Murphy](https://forum.inductiveautomation.com/u/Chris_Murphy)\
**Post date:** [February 19, 2024, 9:05am UTC](https://forum.inductiveautomation.com/t/vertical-text-in-tables/85912/4 "2024-02-19T09:05:56Z")

</div>

In addition to Transistors comment, rather than a rotate transform, you can use the text-orientation css property to either have the text rotated sideways or written vertically.

this will show the text sideways

```auto
writing-mode: vertical-rl;
text-orientation: mixed;

```

or this will keep the characters upright but write the word vertically.

```auto
writing-mode: vertical-rl;
text-orientation: upright;

```