Tree Grid
API: Web Component / Java
Source: Web Component / Java
Tree Grid is a component for displaying hierarchical tabular data grouped into expandable and collapsible nodes.
Open in a
new tab
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
|
Features shared with Grid
Tree Grid is an extension of the Grid component and all Grid’s features are available in Tree Grid as well.
|
Tree Column
The tree column is a column that 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.
Open in a
new tab
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.
Open in a
new tab
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");