Blazor Hierarchical Grid Pagination Overview

The Ignite UI for Blazor Pagination feature in Blazor Hierarchical Grid is used to split a large set of data into a sequence of pages that have similar content. React grid pagination improves user experience and data interaction. IgbHierarchicalGrid 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 Blazor Hierarchical Grid supports template for custom pages.

Blazor Hierarchical Grid Pagination Example

The following example represents IgbHierarchicalGrid pagination and exposes the options usage of items per page and how paging can be enabled. The user can also quickly navigate through the IgbHierarchicalGrid pages via "Go to last page" and "Go to first page" buttons.

.gridSize {
    --ig-size: var(--ig-size-small);
}

<IgbHierarchicalGrid @ref=grid Class="gridSize" Width="100%" Height="500px" Data=Data>
    <IgbPaginator PerPage="10"></IgbPaginator>
</IgbHierarchicalGrid>

Usage

The IgbPaginator component is used along with the IgbHierarchicalGrid component in the example below, but you can use it with any other component in case paging functionality is needed.

TO-DO H-GRID CODE SNIPPET

Paginator Configuration within Child Grids

TO-DO H-GRID CODE SNIPPET

Paginator Component Demo

API References

Additional Resources

Our community is active and always welcoming to new ideas.