Vertical text in tables

Ignition
1

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

2

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.)
3

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

4

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

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

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

writing-mode: vertical-rl;
text-orientation: upright;
1 Like