Blazor DataGrid Example - Pager with Dropdown
Order ID | Customer ID | Order Date | Freight | Ship Country |
|---|
| 10001 | ALFKI | 5/15/1991 | $2.30 | Denmark |
| 10002 | ANATR | 4/4/1990 | $3.30 | Brazil |
| 10003 | ANTON | 11/30/1957 | $4.30 | Germany |
| 10004 | BLONP | 10/22/1930 | $5.30 | Austria |
| 10005 | BOLID | 2/18/1953 | $6.30 | Switzerland |
| 10006 | ALFKI | 5/15/1991 | $4.60 | Denmark |
| 10007 | ANATR | 4/4/1990 | $6.60 | Brazil |
| 10008 | ANTON | 11/30/1957 | $8.60 | Germany |
| 10009 | BLONP | 10/22/1930 | $10.60 | Austria |
| 10010 | BOLID | 2/18/1953 | $12.60 | Switzerland |
| 10011 | ALFKI | 5/15/1991 | $6.90 | Denmark |
| 10012 | ANATR | 4/4/1990 | $9.90 | Brazil |
Items per page
This sample demonstrates the DataGrid paging feature with dynamic page size selection through a pager dropdown.
The Blazor DataGrid paging feature divides data into manageable page segments for improved usability. To enable paging, set the AllowPaging property to true.
The GridPageSettings component's PageSizes property enables a dropdown menu in the pager. This dropdown allows users to dynamically change the number of records displayed on the current page, providing flexibility in data viewing preferences.
In this demo:
- Paging is enabled with PageCount set to 5
- The PageSizes property enables the pager dropdown for changing page size
- Users can select different page sizes to view varying numbers of records per page
For more detailed information about paging, refer to the paging documentation.