https://github.com/vaadin-component-factory/explorer-tree-grid-flow
Repository for Explorer Tree Grid Vaadin 14+ Add-on
https://github.com/vaadin-component-factory/explorer-tree-grid-flow
Last synced: 3 months ago
JSON representation
Repository for Explorer Tree Grid Vaadin 14+ Add-on
- Host: GitHub
- URL: https://github.com/vaadin-component-factory/explorer-tree-grid-flow
- Owner: vaadin-component-factory
- License: apache-2.0
- Created: 2020-08-12T14:37:37.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-20T07:26:08.000Z (about 2 years ago)
- Last Synced: 2025-01-10T00:36:35.935Z (4 months ago)
- Language: Java
- Homepage: https://incubator.app.fi/explorer-tree-grid-flow-demo/
- Size: 166 KB
- Stars: 1
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#
## Development instructions
Starting the demo server:
Go to explorer-tree-grid-flow-demo and run:
```
mvn jetty:run
```
This deploys demo at http://localhost:8080
## How to use it
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 buildGrid() {
DepartmentData departmentData = new DepartmentData();
ExplorerTreeGrid 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 grid = new ExplorerTreeGrid<>();
grid.addHierarchyColumn(DummyFile::getFilename, DummyFile::getIcon).setHeader("File Name");
add(grid);
```
### Component Renderer
```
ExplorerTreeGrid 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) |
#### Default Theme
#### 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.
## Licence
Apache 2.0