Tree

class ui.tree.Tree()

Provides a tree view component for displaying hierarchical data structures.

Index

Constructors

• constructor

Properties

• styles
• entries
• selected
• tree

Methods

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

Constructors

ui.tree.Tree.constructor()

Tree(): Tree

Returns: Tree

Properties

ui.tree.Tree.styles

static

styles: CSSResult[]

Array of styles to apply to the element. The styles should be defined using the ? tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

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.

ui.tree.Tree.selected

selected: number[]

Array of selected node keys. Reassign to trigger updates.

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

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

ui.tree.Tree.render()

render(): unknown

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html’s ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns: unknown