Blazor Grid Pagination Overview
Pagination is used to split a large set of data into a sequence of pages that have similar content. Blazor table pagination improves user experience and data interaction.
IgbGrid pagination is configurable via a separate component projected in the grid tree by defining a
IgbPaginator tag, similar to adding of a column. As in any Blazor table, the pagination in the
IgbGrid supports template for custom pages.
Blazor Grid Pagination Example
The following example represents
IgbGrid pagination and exposes the options usage of items per page and how paging can be enabled. The user can also quickly navigate through the
IgbGrid pages via "Go to last page" and "Go to first page" buttons.
<IgbGrid @ref=grid Width="100%" Height="500px" Data=marketData DisplayDensity="DisplayDensity.Cosy"> <IgbPaginator PerPage="10"></IgbPaginator> </IgbGrid>
Paging with Group By
Group rows participate in the paging process along with data rows. They count towards the page size for each page. Collapsed rows are not included in the paging process.
Integration between Paging and Group By is described in the Group By topic.
<IgbGrid @ref=grid Data=marketData DisplayDensity="DisplayDensity.Compact"> <IgbPaginator Page="grid.Page" TotalRecords="grid.TotalRecords" PerPage="10" DisplayDensity="grid.DisplayDensity"> </IgbPaginator> </IgbGrid>
Paginator Component Demo
- Virtualization and Performance
- Column Moving
- Column Pinning
- Column Resizing
Our community is active and always welcoming to new ideas.