Explorer Tree Grid

Explorer Tree Grid for Flow is an extended version of Vaadin Tree Grid that adds connectors between parent and children, like an Explorer Tree.

View larger

Close

View larger

Close

Usage

Just replace the TreeGrid to ExplorerTreeGrid in your code.

The default API is the same. It also add a new method to display a text and an icon.

Examples

Just replace the TreeGrid to ExplorerTreeGrid in your code

Default usage

private TreeGrid<Department> buildGrid() {
    DepartmentData departmentData = new DepartmentData();
    ExplorerTreeGrid<Department> grid = new ExplorerTreeGrid<>();
    grid.setItems(departmentData.getRootDepartments(),
            departmentData::getChildDepartments);
    grid.addHierarchyColumn(Department::getName).setHeader("Department Name");
    grid.setSizeFull();
    grid.expand(departmentData.getRootDepartments());
    return grid;
}

Template Renderer and icon

ExplorerTreeGrid<DummyFile> grid = new ExplorerTreeGrid<>();
grid.addHierarchyColumn(DummyFile::getFilename, DummyFile::getIcon).setHeader("File Name");
add(grid);

Component Renderer

ExplorerTreeGrid<DummyFile> grid = new ExplorerTreeGrid<>();
grid.addComponentHierarchyColumn(value -> {
    Icon icon = VaadinIcon.FOLDER_OPEN_O.create();
    icon.setColor("var(--lumo-contrast-50pct)");
    return new Span(icon, VaadinIcon.CLIPBOARD.create(), new Span(value.getFilename()));
}).setHeader("Department Name");

Customize the Explorer Tree Grid

By default, there are few css variables that help you to change the style of the Explorer Tree Grid:

Custom Theme

:host {
    --explorer-tree-grid-toggle-level-offset: 2rem;
    --explorer-tree-grid-icon-type-width: 1.5rem;
    --explorer-tree-grid-expand-icon-width: 1.2rem;
    --explorer-tree-grid-icon-type-margin: 0.1rem;
    --explorer-tree-grid-line-color: var(--lumo-primary-color);
    --explorer-tree-grid-icon-color: var(--lumo-primary-color-50pct);
    --explorer-tree-grid-icon-hover-color: var(--lumo-primary-color);
    --explorer-tree-grid-border-style: solid;
}

Notes

The add-on is working in Dark Mode and RTL. The theme is based on Lumo.

If you want to use Material Theme, then you will have to set the variables and also the expand/collapse icon.

Sponsored development

Major pieces of development of this add-on has been sponsored by customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code

public class SimpleView extends Div {


    public SimpleView() {
        setSizeFull();
        TreeGrid<Department> grid = buildGrid();
        add(grid);
    }

    private TreeGrid<Department> buildGrid() {
        DepartmentData departmentData = new DepartmentData();
        ExplorerTreeGrid<Department> grid = new ExplorerTreeGrid<>();
        grid.setItems(departmentData.getRootDepartments(),
                departmentData::getChildDepartments);
        grid.addHierarchyColumn(Department::getName).setHeader("Department Name");
        grid.setSizeFull();
        grid.expand(departmentData.getRootDepartments());
        return grid;
    }
}

public class ExplorerView extends Div {

    public ExplorerView() {
        setSizeFull();
        TreeGrid<DummyFile> grid = buildGrid();
        add(grid);
    }

    private TreeGrid<DummyFile> buildGrid() {
        ExplorerTreeGrid<DummyFile> grid = new ExplorerTreeGrid<>();
        grid.addHierarchyColumn(DummyFile::getFilename, DummyFile::getIcon).setHeader("File Name");

        return getDummyFileTreeGrid(grid);
    }

}

public class LazyTreeComponentView extends Div {
    
    public LazyTreeComponentView() {
        setSizeFull();
        TreeGrid<DummyFile> grid = buildGrid();
        add(grid);
    }

    private TreeGrid<DummyFile> buildGrid() {
        ExplorerTreeGrid<DummyFile> grid = new ExplorerTreeGrid<>();
        grid.addComponentHierarchyColumn(value -> {
            Icon icon = VaadinIcon.FOLDER_OPEN_O.create();
            icon.setColor("var(--lumo-contrast-50pct)");
            return new Span(icon, VaadinIcon.CLIPBOARD.create(), new Span(value.getFilename()));
        }).setHeader("Department Name");

        return getDummyFileTreeGrid(grid);
    }
}

Links

• Online Demo
• Issue tracker
• View on GitHub

Compatibility