Web Components Grid Pagination Overview

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

    Web Components Grid Pagination Example

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    .gridSize {
    --ig-size: var(--ig-size-small);
}
css
    <igc-grid id="grid" class="gridSize" height="500px" width="100%" >
    <igc-paginator per-page="10">
    </igc-paginator>
</igc-grid>
html

    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.

    Ignite UI for Web Components | CTA Banner

    Usage

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

    <igc-grid id="grid" className="gridSize">
    <igc-paginator id="paginator" per-page="10">
    </igc-paginator>
</igc-grid>
html
    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGrid;
    var paginator = this.paginator = document.getElementById('paginator') as IgcPaginatorComponent;
    const selectOptions = [5, 15, 20, 50];
    grid.data = this.data;
    paginator.page = grid.page;
    paginator.totalRecords = grid.totalRecords;
    paginator.selectOptions = selectOptions;
}
ts

    Paginator Component Demo

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.