React Hierarchical Grid Pagination Overview

The Ignite UI for React Pagination feature in React 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. IgrHierarchicalGrid pagination is configurable via a separate component projected in the grid tree by defining a IgrPaginator tag, similar to adding of a column. As in any React table, the pagination in the React Hierarchical Grid supports template for custom pages.

React Hierarchical Grid Pagination Example

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

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

<IgrHierarchicalGrid className="gridSize" height="500px" width="100%">
    <IgrPaginator key="paginator" perPage="10">
    </IgrPaginator>
</IgrHierarchicalGrid>

Usage

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

Usage

Paginator Configuration within Child Grids

Paginator Component Demo

API References

Additional Resources