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.
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:
CSS Variable | Definition | Default value |
---|---|---|
--explorer-tree-grid-toggle-level-offset | Width of the spacer for each level | 1.5rem |
--explorer-tree-grid-expand-icon-width | Size of the expand/collapse icon | 0.8rem |
--explorer-tree-grid-icon-type-width | Size of the icon generated in the template renderer | 1.1rem |
--explorer-tree-grid-icon-type-margin | Margins before and after the icon | 0.1rem |
--explorer-tree-grid-line-color | Color of the connectors | var(--lumo-contrast-50pct) |
--explorer-tree-grid-icon-color | Color of the expand/collapse icon and icon generated in the template renderer | var(--lumo-contrast-50pct) |
--explorer-tree-grid-icon-hover-color | Color of the expand/collapse icon when hovered | var(--lumo-contrast-80pct) |
--explorer-tree-grid-border-style | Style of the connectors | dotted |
--explorer-tree-grid-left-offset | Negative offset for the first column | var(--lumo-space-s) |
--explorer-tree-grid-default-margin | Default margin for the grid cell | var(--lumo-space-m) |
--explorer-tree-grid-icon-background | Background of the expand/collapse icon | var(--lumo-base-color) |
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
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Version compatible with Vaadin 23 and Vite
- Released
- 2023-04-20
- Maturity
- EXPERIMENTAL
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 23
- Vaadin 14 in 1.0.0
- Vaadin 24 in 24.0.0
- Browser
- Browser Independent
Explorer Tree Grid - Vaadin Add-on Directory
Explorer Tree Grid for Flow is an extended version of Vaadin Tree Grid that adds connectors between parent and children, like an Explorer Tree.Issue tracker
View on GitHub
Explorer Tree Grid version 1.0.0
Explorer Tree Grid version 1.0.1
Change the default package
Explorer Tree Grid version 1.0.2
Explorer Tree Grid version 1.0.3
* Improve the performance
* Improve the demo in compact mode
Explorer Tree Grid version 1.0.4
Update the license to Apache 2.0
Explorer Tree Grid version 1.1.0
Add default constructors to the ExplorerTreeGrid
Explorer Tree Grid version 23.0.0
Update to Vaadin 23. Custom theme with theme-for doesn't work anymore. You can use part or custom css variables instead.
Explorer Tree Grid version 24.0.0
Vaadin 24 compatibility
Explorer Tree Grid version 23.0.1
Version compatible with Vaadin 23 and Vite