Vertical text in table headers

Is it possible to rotate the text in a table’s column headers so that the text is vertical? I assume you can’t as there are no CSS rule for it, and it isn’t mentioned in any forum.

I’d like to create a table that uses Check Boxes to record lighting test results in buildings, as shown in the attachment. The first column shows the areas of the building, and the other columns show the tests that need to be done in each area.

If the header text is horizontal as normal, then if you scroll to see the right-hand column, you may not see the area name in the left column. (Some tables may have 20 columns.) I know you can collapse columns, but it’s hard to collapse different columns to always keep the left column in view.

I’d appreciate any suggestions on the best way to handle this.


You could probably rotate the caption 90 degrees with css, but there would still be problems. The current themes for Table (for example in Reindeer) relies on that the row height of the header is of a certain pixel amount. At least the background for the header would look completely wrong, and there might be other issues as well.

Looking at your example image, it looks like you don’t really need many table features in that example, like filtering, column reordering, sorting, lazy loading etc. My suggestion is that you use a GridLayout instead and but labels in the first row and column and rotate the label with css. Then you’d theme the cells of the grid / put a css layout in every cell which you theme, to get nice borders for it.

Thanks for that, Jens, it sounds a great idea!

I see that the Book of Vaadin has an example of a GridLayout with borders, and I think I can rotate the labels using …-“transform: rotate(-90deg)”. So I’ll try that (but I may need some more help as I’m not too familiar with CSS).

Thanks again,

This kind of thing comes up quite a bit - trying to use the Vaadin table as a layout/presentation component, as opposed to a, well, GUI Table - i.e. scrollable/filterable/selectable of possible many identical items with a fixed height.

I guess this is stems from the common usage of an HTML table in plain old HTML.

Is it worth giving some kind of “steer” on this in the Book of Vaadin? (or, maybe it does - I can’t remember!)

Just a thought.