Web Components Hierarchical Grid Pagination Overview

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

    Web Components Hierarchical Grid Pagination Example

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

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

    <igc-hierarchical-grid id="grid" class="gridSize" height="500px" width="100%" >
    <igc-paginator per-page="10">
    </igc-paginator>
</igc-hierarchical-grid>

    Usage

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

    Paginator Configuration within Child Grids

    Paginator Component Demo

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.