Blazor DataGrid Example - Virtual Scrolling

This sample demonstrates the DataGrid row and column virtualization feature for efficiently rendering large datasets.

The Blazor DataGrid UI virtualization enables rendering only visible rows and columns in the viewport without buffering the entire datasource. This significantly improves performance when working with large datasets by reducing DOM elements and memory usage.

Row Virtualization:

Enable row virtualization by setting the EnableVirtualization property to true. When enabled, the Height property must be defined for proper virtual scrolling calculations.

Column Virtualization:

Enable column virtualization by setting the EnableColumnVirtualization property to true. When enabled, the Width property must be defined for accurate column virtualization.

In this demo:

• The DataGrid renders 10,000 rows and 20 columns
• Both row and column virtualization are enabled for optimal performance
• Rows load on-demand as you scroll vertically
• Columns load on-demand as you scroll horizontally
• Data editing is fully supported with virtualization enabled
• Column chooser allows showing or hiding columns dynamically

Virtualization dramatically improves performance with large datasets by maintaining a fixed number of DOM elements regardless of the data size.

For more detailed information about virtual scrolling, refer to the virtualization documentation.