Example of Virtual Scrolling in Blazor DataGrid Component
The DataGrid component with row and column virtualization is demonstrated in this sample. The rows and columns are loaded on an as-needed basis as the scrollbar is scrolled vertically and horizontally.
Loading 10,000 Rows and 20 Columns
Generating Data
| No records to display |
Choose Column
- Select All
- Year
- Stint
- TMID
- LGID
- GP
- GS
- Minutes
- Points
- oRebounds
- dRebounds
- Rebounds
- Assists
- Steals
- Blocks
- TurnOvers
- PF
- fgAttempted
- fgMade
- ftAttempted
The Blazor DataGrid UI virtualization allows you to render only the rows and columns that are visible in the view-port without buffering the entire datasource. Row and column virtualization are both supported by DataGrid. Set the EnableVirtualization property to true to enable row virtualization. Set the EnableColumnVirtualization property to true to enable column virtualization.
When EnableVirtualization is enabled, the Height property must be defined, and the Width property must be defined when EnableColumnVirtualization is enabled.
DataGrid is rendered with 10000 rows and 20 columns in this demo. You can edit the data and also show or hide columns by clicking the column chooser icon in the toolbar.
More information about the Virtual scrolling feature can be found in this documentation section.