Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Tree Grid

Tree Grid is a component for displaying hierarchical tabular data grouped into expandable and collapsible nodes.

Open in a
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
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
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");

Best Practises

Tree Grid is not meant to be used as a navigation menu.

Caution
scrollToIndex is not reliable
The behavior of the scrollToIndex method in Tree Grid is not deterministic due to lazy loading hierarchical data. Usage of this method is not recommended.
Component Usage Recommendations

Grid

Component for showing tabular data.

Grid Pro

Component for showing and editing tabular data.

CRUD

Component for creating, displaying, updating and deleting tabular data.

B7DD9574-DB80-4D2E-82B4-363025F17A47