Lazy Loading Vaadin Grid with DataProvider

Problem: UI lag with large datasets

Loading thousands of rows into a Vaadin Grid all at once consumes memory and makes the UI unresponsive.

Solution: Lazy loading with DataProvider

Vaadin Grid can use a custom DataProvider that fetches only the rows needed for the current viewport.

Example DataProvider

public class PersonDataProvider extends DataProvider {
    private final PersonRepository repo;
    public PersonDataProvider(PersonRepository repo) { this.repo = repo; }
    @Override
    protected void fetchFromBackEnd(FetchDirection direction, int offset, int limit,
                                    List sortOrders) {
        Pageable page = PageRequest.of(offset / limit, limit,
                Sort.by(sortOrders.stream()
                        .map(o -> o.getDirection() == SortDirection.ASCENDING
                                ? Sort.Order.asc(o.getSorted())
                                : Sort.Order.desc(o.getSorted()))
                        .toArray(Sort.Order[]::new)));
        List slice = repo.findAll(page).getContent();
        updateIndex(offset, slice.size());
        for (Person p : slice) refreshItem(p);
    }
    @Override
    protected int sizeInBackEnd(Query q) {
        return (int) repo.count();
    }
}

Wiring the Grid

PersonDataProvider dp = new PersonDataProvider(personRepo);
Grid grid = new Grid<>();
grid.setDataProvider(dp);
grid.addColumn(Person::getFirstName).setHeader("First name");
grid.addColumn(Person::getLastName).setHeader("Last name");
grid.setHeightByRows(true);
add(grid);

Verification

1. Run the app, open browser DevTools → Network.
2. Scroll the grid; each scroll should trigger one XHR with offset/limit params.
3. Check that the returned slice size matches limit (except last page).
4. Confirm fetchFromBackEnd logs only on viewport change.

Trade‑off

• Ensure backend queries are efficient; avoid N+1 by using DTO projections or join fetches.
• Sorting mapping must be correct to avoid duplicate/missing rows.

Closing

Add the DataProvider, verify network calls, and enjoy a responsive Grid with large data sets.