Table items into a Gridlayout.

I have a table that uses a SQLContainer

betablequery = new FreeformQuery(…);
becontainer = new SQLContainer((QueryDelegate) betablequery);
betable=new Table(“”, becontainer);

VerticalLayout vLayout;


I’m trying to get each item/row of this table into a GridLayout where each cell has one row from the betable above.

What the overall purpose of this actually is for the user to be able to switch between the Vertical layout and the grid layout by pressing 2 buttons ( GRID vs LIST ).

Any Ideas?

I don’t think I would be brave enough to try this, sounds just a tad difficult… Have you figured it out yet? I think I would just build the grid without the table, or build each row its own table and put those inside the grid. Really can’t imagine how to separate the one existing table into pieces like that. Might be possible, but definitely not easy.

I guess I’m kind of curious how I should get the data in the grid layout, i.e., how do I get the DB Table data into a grid layout? Some where i thought i saw that the grid layout is very slow for large amounts of data.

You would probably want to extract individual items and properties from the SQLContainer and build the contents of each layout cell yourself from those. This should not be hard at all, and a little helper class can go a long way in mapping an Item to a layout or other component.

I would not recommend having tons of tiny Vaadin tables all over your layouts if it is not really necessary - the Table component is designed for larger data sets and lazy loading, not to be shown as 200 copies on the same screen.

Depends on the amount of data, the complexity of the layouts inside it, the use of features like expand ratios etc.
You should do a quick test with something like what you would really put in the layout and a number of cells that corresponds to what your application will have.

If it does turn out to be too slow at the amounts of data you have, your options include FastGrid in the
FastLayouts add-on
(note: not sure if tested with recent Vaadin versions) or using a CssLayout with a suitable theme. Even a CustomLayout that is generated on the fly containing an HTML table might do in extreme cases.

is this the best way to go between the LIST (TABLE) and GRID Layout / data?

		gridButton.addListener(new ClickListener()
			private static final long serialVersionUID = 1L;

			@Override public void buttonClick(ClickEvent event)

vLayout is a vertical layout. What I am doing here is offering the ability to switch between views ( layouts ) with a GRID and LIST button(s). The LIST re-displays the information fast but the Grid layout takes some time. This is with over 1000 rows of information ( 4 columns ) from the DB.

I actually went in a different direction. I created a Table with each cell containing a custom component. Within each cell I have a Vertical Layout which contains a checkbox and a label. I also used the setCacheRate of the table to zero and setPageLength to 5. It’s not the perfect grid but its much faster now. There are still some slight refresh problems when i scroll but at least I don’t get a timeout because of the javascript stalling out.