Tree Grid
- Usage
- Styling
Tree Grid is a component for displaying hierarchical tabular data grouped into expandable nodes.
new tab
TreeGrid<Person> treeGrid = new TreeGrid<>();
treeGrid.setItems(managers, this::getStaff);
treeGrid.addHierarchyColumn(Person::getFirstName)
.setHeader("First name");
treeGrid.addColumn(Person::getLastName).setHeader("Last name");
treeGrid.addColumn(Person::getEmail).setHeader("Email");|
Note
| Tree Grid is an extension of the Grid component. Therefore, all of Grid’s features are available in Tree Grid. However, Tree Grid isn’t meant to be used as a navigation menu. |
Tree Column
The tree column contains the toggles for expanding and collapsing nodes. Nodes are opened and closed by clicking a tree column’s cell. They can also be toggled programmatically.
new tab
Button expand = new Button("Expand All");
expand.addClickListener(event -> treeGrid.expand(managers));
Button collapse = new Button("Collapse All");
collapse.addClickListener(event -> treeGrid.collapse(managers));Rich Content
Like Grid, Tree Grid supports rich content.
new tab
treeGrid.addComponentHierarchyColumn(person -> {
Avatar avatar = new Avatar();
avatar.setName(person.getFullName());
avatar.setImage(person.getPictureUrl());
Span fullName = new Span(person.getFullName());
Span profession = new Span(person.getProfession());
profession.getStyle()
.set("color", "var(--lumo-secondary-text-color)")
.set("font-size", "var(--lumo-font-size-s)");
VerticalLayout column = new VerticalLayout(fullName, profession);
column.getStyle().set("line-height", "var(--lumo-line-height-m)");
column.setPadding(false);
column.setSpacing(false);
HorizontalLayout row = new HorizontalLayout(avatar, column);
row.setAlignItems(FlexComponent.Alignment.CENTER);
row.setSpacing(true);
return row;
}).setHeader("Employee");
treeGrid.addComponentColumn(person -> {
Icon emailIcon = createIcon(VaadinIcon.ENVELOPE);
Span email = new Span(person.getEmail());
Anchor emailLink = new Anchor();
emailLink.add(emailIcon, email);
emailLink.setHref("mailto:" + person.getEmail());
emailLink.getStyle().set("align-items", "center").set("display",
"flex");
Icon phoneIcon = createIcon(VaadinIcon.PHONE);
Span phone = new Span(person.getAddress().getPhone());
Anchor phoneLink = new Anchor();
phoneLink.add(phoneIcon, phone);
phoneLink.setHref("tel:" + person.getAddress().getPhone());
phoneLink.getStyle().set("align-items", "center").set("display",
"flex");
VerticalLayout column = new VerticalLayout(emailLink, phoneLink);
column.getStyle().set("font-size", "var(--lumo-font-size-s)")
.set("line-height", "var(--lumo-line-height-m)");
column.setPadding(false);
column.setSpacing(false);
return column;
}).setHeader("Contact");Programmatic Scrolling
Grid supports programmatic navigation to a specific row. This is particularly useful when dealing with large data sets. It saves users from having to scroll through potentially hundreds or thousands of rows.
To use this feature, you need to specify the index of the row you want to view. The scroll position of the grid will then be adjusted to bring that row into view.
With multiple levels of hierarchy, you need to specify the row index for each level, separately. For example, to scroll to the second child-row (index 1) of the third root-level row (index 2), you would provide the indexes 2, 1.