Rich Tree View - Virtualization
Handle large datasets in your Tree View.
Basic usage
Virtualization is enabled by default on the <RichTreeViewPro /> component.
Here is an example of a Tree View with 100 000 items:
You can disable virtualization using the disableVirtualization prop:
<RichTreeViewPro items={ITEMS} disableVirtualization />
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} 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.
Layout
Flex parent container
The Tree View can be placed inside a flex container with flex-direction: column.
Without setting the minimum and maximum height, the Tree View takes as much space as it needs to display all rows.
Minimum and maximum height
In the demo below, the Tree View is placed inside a flex container with a minimum height of 200px and a maximum height of 400px and adapts its height when the number of items changes.
Percentage dimensions
When using percentages (%) for height or width, make sure that the Tree View's parent container has intrinsic dimensions. Browsers adjust the element based on a percentage of its parent's size. If the parent has no size, the percentage will be zero.
Predefined dimensions
You can predefine dimensions for the parent of the Tree View.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.