Displaying large amounts of hierarchical data

Support
#1

Hi,

I’m using TreeTable component for displaying hierarchical data. However, as it is said in the documentation, it is not a good choice for large data amounts. Is there any good solution for the task? Is there may be some way to load data as a user scrolls the table and expands categories?

Gradual data loading when scrolling a table
#2

Hi,

We have a small example that demonstrates how to fetch data in batches when TreeDataGrid requires it. You can find the project on GitHub.

The project contains an example of implementing lazy data loading for TreeDataGrid.

  • Task - hierarchy entity
  • LazyTreeDataGrid - replaces standard TreeDataGrid and creates specific vaadin DataProvider instance in case LazyTreeDataGridItems is passed. It registered in LazyTreeComponentApplication using ComponentRegistration.
  • LazyHierarchicalDataGridDataProvider - Vaadin DataProvider implementation that works with LazyTreeDataGridItems.
  • TaskBrowse.TaskLazyTreeDataGridItems - sample implementation of LazyTreeDataGridItems. It uses DataManager to fetch data every time TreeDataGrid requestes it. Query parameters are obtained from Vaadin HierarchicalQuery object.

Below implementation of the fetchChildren method:

@Override
public Stream<Task> fetchChildren(HierarchicalQuery<Task, SerializablePredicate<Task>> query) {
    List<Task> list = dataManager.load(Task.class)
            .query("select e from demo_Task e where e.parent = :parent")
            .parameter("parent", query.getParent())
            .sort(sort)
            .firstResult(query.getOffset())
            .maxResults(query.getLimit())
            .list();

    log.info("Loaded: {} items", list.size());

    return list.stream();
}

Keep in mind that this implementation is just an example and requires polishing. For example, some cache is needed, because Vaadin in some conditions calls this method twice with the same arguments.

Regards,
Gleb

1 Like
Tree-like control for the datasource with large amount of records
#3

Hi Gleb,

thank you so much! This really helps a lot.