Rich Tree View - Virtualization

Handle large datasets in your Tree View.

Basic usage

Use the virtualization prop to enable virtualization on the RichTreeViewPro component. Here is an example of a Tree View with 100 000 items:

Item height

When virtualization is enabled, the Tree View needs to know the height of each item to calculate which items are visible. If not provided, the itemHeight prop defaults to 32px.

You can customize the item height by passing a different value:

<RichTreeViewPro items={ITEMS} virtualization itemHeight={48} />

See the Item height documentation for more details.

DOM structure

Virtualization requires a flat DOM structure where all items are rendered as siblings, regardless of their hierarchy in the tree. This is automatically enforced, when virtualization is enabled the domStructure prop is set to "flat" and cannot be changed.

<ul>
  <li>Item 1</li>
  <li>Item 1.1</li>
  <li>Item 1.2</li>
  <li>Item 2</li>
</ul>

See the DOM structure documentation for more details.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <RichTreeView />
• <TreeItem />