DOM virtualization is a performance optimization feature that renders only the visible rows within the Tree Grid viewport instead of rendering the entire dataset. This significantly improves performance when working with large volumes of hierarchical data.
With DOM virtualization enabled, the Tree Grid calculates the content height and renders only the necessary tr elements for the visible portion of the control. As the user scrolls, previously rendered rows are replaced with newly required rows, ensuring that only a minimal number of DOM elements are maintained at any time.This improves rendering speed and memory usage for large datasets.
Injecting Module:
Tree Grid features are organized into individual feature-specific modules. To use the DomVirtualization functionality, inject DomVirtualization module into the services.
DOM virtualization is enabled by setting the enableDomVirtualization property to true. This demo loads 100,000 hierarchical records using DOM virtualization. Row virtualization is enabled using the enableVirtualization property.
More information on the DomVirtualization can be found in documentation section.
Looking for the full React Tree Grid component overview, features, pricing, and documentation? Visit our React Tree Grid component page.