Avoid sluggish UI – lazy loaded tables

A Table is probably one of the most used and complex components in Vaadin. We need to keep the following points in mind when using a table from Vaadin, so that our applications do not become sluggish:

• Use lazy loaded container to obtain data from a database

• Don't use heavy layouts in generated columns (use CssLayout instead)

• Try to avoid complex forms inside table cells

• Turn on lazy loading of rows from server to client

• Optimize caching with the setCacheRate function

The first point is very likely the most time consuming one in case we have large data to be shown in the table. We must not fetch all the data from the database and put it to the table. We will have a look at how to create a standard table that fetches data from a database lazily.

It is important to understand how a Vaadin table works. There are two types of lazy loading. The first one is done when a client renders the table. In that moment, the table lazily fetches data from the server to the...