This sample showcases the infinite scrolling capability of the Grid, designed to handle large datasets seamlessly. Click the “Load 100K Data” button to populate the Grid with data, then scroll vertically and horizontally to dynamically load rows and columns, ensuring smooth navigation.
Infinite scrolling uses a lazy loading mechanism, where data is fetched automatically as the user scrolls to the end of the Grid. This behavior is enabled by setting the enableInfiniteScrolling property to true and defining the Grid’s height property.
The Grid also supports column virtualization, which renders only the visible columns to improve performance when working with a large number of columns. Column virtualization can be enabled by setting the enableColumnVirtualization property to true.
Additionally, column virtualization integrates seamlessly with aggregate operations, ensuring that calculations like
Sum, Average, etc., remain accurate and are displayed correctly during horizontal scrolling.
Injecting Module:
Features of the Grid component are organized into individual, feature-specific modules. To use infinite scrolling and column virtualization with aggregates, inject the required modules InfiniteScroll, VirtualScroll and Aggregate into the services.
More information on the infinite scrolling can be found in the documentation section.
Looking for the full React Data Grid component overview, features, pricing, and documentation? Visit our React Data Grid component page.