Performance advices for big GridLayout or using other layout?

I have a perfomance question to the community.
I have implemented a timetable using the grid layout. The timetable is representing 24 hours.
Each row represents a certain time, the interval can be 10, 15, 30, 60 minutes meaning I can have a maximum of 288 rows in one timetable.
The maximum number of columns are not sepcified, because each column represents a selectable court (you see I am writing about a reservation timetable for courts). Currently I have not defined a maximum of courts for the timetable, I have tested it with up to 16 courts (columns) with a interval of 15 minutes. The timetable consists of native buttons, which can be clicked to open a reservation windows. Meanwhile on MacOSX this table is loaded quiet fast and Firefox does not seem to hang on Windows 7 the loading time is also acceptable (not as good as on MacOSX) but during the creation of the timetable the browser seems to hang for a short time and the cooling of the computer rises.
My worries are, that with an older computer (I tested on a 2011 Dell Latitude with 6GB RAM) the webapplication rendering of the UI is to slow that the application is userfriendly.

Therefore I want to ask if there are any layouts which are more “efficient” for huge timetables.


Hi, in my experience GridLayout with many components can be slow.

You can try CssLayout: it is faster (because it is simpler) but you have to use CSS to set the position of every component.

Another option is a CustomLayout: you can write your layout as a template in HTML that provides locations of any contained components. For example you can put your components in a table.

Look in the Book of Vaadin for details.


Thank you for your adivices especially the last one with a custom layout is interesting, I did not think on that.