Large Trees & Virtual Scroll

When having a large amount of nodes and experiencing performance issues, it is recommended to use the virtual scroll option.

To use this option, one must supply the height of the container, and the height of each node in the tree.

You can also specify height for the dropSlot which is located between nodes.

Example:

<div style="height: 400px">
  <tree-root [nodes]="nodes" [options]="options"></tree-root>
</div>

// Fixed node height
options = {
  useVirtualScroll: true,
  nodeHeight: 22
}

// Or using a function
options = {
  useVirtualScroll: true,
  nodeHeight: (node: TreeNode) => node.myHeight,
  dropSlotHeight: 3
}

Hidden trees

If the tree is hidden (for example inside tab or modal), it will not be rendered when it becomes visible.
After it becomes visible (preferably using setTimeout) - you need to call tree.sizeChanged(), which recalculates the rendered nodes according to the actual viewport size.

Demo

Initializing 100,000 nodes, please be patient...

Source code for this demo