Rotate a table

Hi all,
I would like to display a table with the headers as first column instead as first row, the basic need is have a first column of information for each row and then a sequence of cell that actually are customcomponents containing a couple of elements.
Naturally in this scenario the horiz. scroll will leave always visible the first column and the vertical scroll will move everything…basically the exact rotation of a table of 90 degrees and replacing cells with custom components…
I tried realize it with a panel in another but ofcourse one scrollbar will be visible just when you scroll to the end the other, then i concluded isn’t a solution, after that I evaluated the horizontalsplit and again nothing because i have a different scroll for each side…
Any idea how this kind of component can be realized?


Hide header row and use String property as header.

table.addContainerProperty("headerStr", String.class, null);
table.addContainerProperty("dataCell1", Date.class, null);

Only problem what I can see is that “header” is scrolled just like another cols but there is workaround!/thread/1739380
to use linked tables if this scrolling is problem.

if I right understand all the trick is about the java script related to this code

    mainWindow.executeJavaScript("var t=document.getElementById('main-table').children[1]

; var fp=document.getElementById(‘freeze-pane’).children[1]
; t.addEventListener(‘scroll’, function() {fp.scrollTop=t.scrollTop;}, false);‘hidden’");

Since I have a solution based on two vertical layout (inside two panels) I guess I could apply the same strategy avoiding the use of a table, i can relate the two panels, am I right? the JS has to be changed anyhow or like I would try can stay totally the same?

BTW: i’m trying to execute the javascript on my component but I can’t understand how to do it…

i found JavaScript.getCurrent().execute(
but seems it execute the code one shot, doesn’t keep in the page for events…