Example of Pager Dropdown in Blazor DataGrid Component
This example shows how to use the DataGrid component's paging feature, which includes a pager dropdown option.
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
You can display the contents of the Blazor DataGrid in page segments by using the paging feature. Paging is disabled by default; to enable it, set the AllowPaging property to true.
The GridPageSettings component's PageSizes property enables a dropdown in pager that allows you to dynamically change the number of records displayed in the current page.
DataGrid is rendered in this demo with paging and PageCount set to 5. Also, PageSizes must be set to true in order for the pager dropdown to dynamically change the current page size.
More information about the Pager feature can be found in this documentation section.