Tree

class ui.tree.Tree()

Provides a tree view component for displaying hierarchical data structures.

Examples

<hoops-tree></hoops-tree>

<script>
  const tree = document.getElementsByTagName("hoops-tree")[0];
  tree.tree = {
    context: {
      expandedIcon: '▼',
      collapsedIcon: '▶',
      getRoot: () => 0,
      getChildren: (key) => key === 0 ? [1, 2] : [],
      getContent: (key) => `Node ${key}`,
      isSelected: (key) => tree.selected.includes(key)
    }
  };
  tree.selected = [1];
</script>

Custom Element

hoops-tree

Since

2025.8.0

Index

Constructors

• constructor

Properties

• entries
• selected
• tree

Methods

• expandPath
• loadChildrenData
• refreshNodeData
• removeNode
• resetTree
• updateContext
• updateEntries
• updateSelected

Constructors

ui.tree.Tree.constructor()

Tree(): Tree

Returns: Tree

Properties

ui.tree.Tree.entries

entries: Record

Holds all tree node data needed for rendering the hierarchy. Maps node keys to TreeEntryData. Reassign to trigger updates.

Default

```ts {} ```

ui.tree.Tree.selected

selected: number[]

Array of selected node keys. Reassign to trigger updates.

Default

```ts [] ```

ui.tree.Tree.tree

tree: ContextWrapper

Context wrapper providing tree data access methods. Reassign to trigger updates.

Methods

ui.tree.Tree.expandPath()

expandPath(nodePath: number[]): void

Expands all nodes along the specified path.

Parameters

nodePath: number[]

Array of node keys representing the path to expand

Returns: void

void

Throws

Error when a node in the path is not found

ui.tree.Tree.loadChildrenData()

loadChildrenData(parent: TreeEntryData): void

Loads and registers child nodes for a parent node.

Parameters

parent: TreeEntryData

The parent node entry

Returns: void

void

ui.tree.Tree.refreshNodeData()

refreshNodeData(nodeKey: number): void

Refreshes node data from context. No-op if node is not loaded.

Parameters

nodeKey: number

The key of the node to refresh

Returns: void

void

ui.tree.Tree.removeNode()

removeNode(nodeKey: number): void

Removes a node and all its children from the tree. No-op if node is not loaded.

Parameters

nodeKey: number

The key of the node to remove

Returns: void

void

ui.tree.Tree.resetTree()

resetTree(): void

Resets the tree to its initial state, clearing all entries and selections.

Returns: void

void

ui.tree.Tree.updateContext()

updateContext(): void

Triggers a re-render by reassigning tree context.

Returns: void

void

ui.tree.Tree.updateEntries()

updateEntries(): void

Triggers a re-render by reassigning entries.

Returns: void

void

ui.tree.Tree.updateSelected()

updateSelected(): void

Triggers a re-render by reassigning selected entries.

Returns: void

void