Welcome to ui-js-tree-wc
A javascript Ui tree view web component, created in vanilla javascript.
Features:
- Support WCAG specification for accessibility
- Full keyboard navigation and control (according to WCAG recommendation)
- Multi selection
- Extensive css variables for customized styling
- Custom elements with minimal footprint
- No external dependencies
- Modern browser support
ui-js-tree element
Attributes:
- expanded-level (integer value 0..n) : how many node levels to expand initially
- lazy-load (no value) : lazy load child nodes when parent node is expanded
- multi-select (no value) : enable multi select nodes
Properties:
- selected : first/only selected node
- selection : all selected nodes
Methods:
- load(treeData) : Load nodes from JSON tree structured data
- reload() : Reload/rerender nodes from existing data
- getVisibleNodeList() : Get array of visible tree nodes
- toggleSelection(nodeElement, multiselect) : Toggle node selection
- clearSelection() : Clear selections
- setFocused(nodeElement) : Focus node
- isSelected(nodeElement) : Return true if node is selected
- nodeIndex(nodeElement) : Index of node
- getNode(index) : Get node by index
- findNodeBy(predicate) : Find a node by predicate, example: tree.findNodeBy(node => node.data.text == 'test')
- findAndLoadNodeByData(predicate, expandTo) : Find a node by predicate (if expandTo == true, expand children to ensure node is visible), example: tree.findAndLoadNodeByData(nodeData => nodeData.value == 'test', true)
- findNextNode(fromNode) : Find next node from a node
- findPrevNode(fromNode) : Find previous node from a node
- collapseNode() : Collapse focused node
- expandNode() : Expand focused node
- toggleState() : Toggle focused node between selected and not selected
- nextNode(select) : Focus next node (select node if select is true)
- prevNode(select) : Focus previous node (select node if select is true)
- firstNode(select) : Focus first node (select node if select is true)
- lastNode(select) : Focus last node (select node if select is true)
css variables --tree-node-left-margin: --tree-node-arrow-size: --tree-node-selected-background-color: --tree-node-selected-text-color: --tree-node-background-hover: --tree-node-text-color: --tree-node-text-color-hover: --tree-node-text-padding: --tree-node-text-margin: --tree-node-text-font-family: --tree-node-text-font-size: --tree-node-border-radius: --tree-node-collapsed-icon-url: --tree-node-expanded-icon-url: