Tree
Overview
The Tree component is a UI component that displays hierarchical data and inherits the characteristics of the List component. It effectively manages tree-structured data and provides user interaction.
Key Features
1. Custom Renderer
You can render each node of the tree in any desired form. You can freely combine icons, text, buttons, etc. to express nodes.
View Related Items
- Properties
2. Row Count Specification
You can set the number of rows to display on the screen at once. This allows you to dynamically adjust the data visible on one screen.
View Related Items
- Properties
3. External Scroller
The Tree component can operate based on the scroll of the parent element that wraps the Tree, not just its own scroll. This enables more flexible layout composition.
View Related Items
- Properties
4. Interaction
You can handle user interactions such as selecting nodes or moving focus. You can trigger events when nodes are selected or focus on specific nodes.
View Related Items
- Properties
items, selectedItem, scrollToItem, childrenField, autoExpandLevel, findOne
5. Node Expansion/Collapse
Users can expand or collapse tree nodes. This allows them to navigate the hierarchical structure and display only the necessary information.
View Related Items
- Properties
items, expandNode, expandAll, collapseNode, collapseAll, childrenField
6. Automatic Node Expansion
Nodes can be automatically expanded based on specific conditions. For example, you can set only nodes of a specific depth to be automatically expanded.
View Related Items
- Properties
7. Node Navigation
Provides functionality to navigate through all nodes in the tree. This allows you to search for nodes that match specific conditions or perform operations on all nodes.
View Related Items
- Properties
8. Node Addition/Deletion
You can access the parent or sibling nodes of a specific node and add or remove nodes. This allows you to dynamically change the tree structure.
View Related Items
- Properties
items, addNodeAt, removeNode, findOne, autoExpandLevel, childrenField
9. Drag and Drop
You can drag and drop nodes to change their order or move them under a different parent node. This allows users to easily reconstruct the tree structure.
View Related Items
- Properties
items, draggable, droppable, item-drag-ready, hookDragMessage, autoExpandLevel, childrenField,