Blazor DataGrid Example - Custom Pager Template
Order ID | Customer ID | Order Date | Freight | Ship Country |
|---|
| 1 | ALFKI | 5/15/1991 | $2.30 | Denmark |
| 2 | ANATR | 4/4/1990 | $3.30 | Germany |
| 3 | ANTON | 11/30/1957 | $4.30 | Austria |
| 4 | BLONP | 10/22/1930 | $5.30 | Brazil |
| 5 | BOLID | 2/18/1953 | $6.30 | Switzerland |
| 6 | ALFKI | 5/15/1991 | $4.60 | Denmark |
| 7 | ANATR | 4/4/1990 | $6.60 | Germany |
| 8 | ANTON | 11/30/1957 | $8.60 | Austria |
| 9 | BLONP | 10/22/1930 | $10.60 | Brazil |
| 10 | BOLID | 2/18/1953 | $12.60 | Switzerland |
of 0 pages
This sample demonstrates how to customize the DataGrid pager UI using templates.
The Blazor DataGrid provides comprehensive pager customization through the pager template feature. Use the Templates property of the GridPageSettings component to create custom pager layouts.
In this demo, the pager template includes:
- A textbox for jumping directly to a specific page number
- Icon buttons for navigating between previous and next pages
This custom pager implementation provides an alternative interface to the default pager, allowing developers to create pagers that match their application's design and user experience requirements.
For more detailed information about pager templates, refer to the pager template documentation.