Performance problem using many small tables


due to our requirements we have to create a page with a lot of small tables. (up to 30 tables with up to 10 rows)

The problem is that the browser(all major browsers) freezes for a short period of time during UI rendering.

Is there a way to speed it up?

//(Sample table we use)
BeanItemContainer<MyTO> container;

Table table = new Table(null, container);

table.setVisibleColumns(PropertyExtractor.getProperties(MyTO.class, TableHeader.class).toArray());

table.setColumnWidth("id", 40);
table.setColumnWidth("value1", 55);
table.setColumnWidth("value2", 55);
table.setColumnExpandRatio("text", 1);



up to 30 tables on one page, sounds a bit much :slight_smile: Unfortunately I don’t think there’s much options for speeding things up with the table. It’s quite complex and basically aimed at showing larger datasets, so the expectation is that you would only have one to a few of them rendered at a time.

If I were you I’d look into implementing these small tables with something else, either using a properly styled GridLayout or a custom widget, depending on the final look you need. Of course, if you absolutely need features from the table, this approach won’t work.

Another way if you can’t avoid using the tables would be to use the
. This way the Tables wouldn’t load faster but it should get rid of the freezing and only display the tables one by one when their done loading. If you don’t want to use an add-on you could also try using a background thread + polling/push.

Thank’s for the answers.

The LazyLoadWrapper sounds great, but it doesn’t work proper with Tables. (According to the author it’s a known problem)

Our fastest solution was to create a custom component with cssLayout and then building a clean table-grid with cssLayouts in it. Some CSS-hours later it looks exactly like the original table component - but without the UI table-features like sorting of course.