React Grid Pagination Overview

    The Ignite UI for React Pagination feature in React 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. IgrGrid 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 Grid supports template for custom pages.

    React Grid Pagination Example

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

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

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

    Paging with Group By

    As linhas de grupo participam do processo de paginação junto com as linhas de dados. Elas contam para o tamanho de página para cada página. As linhas recolhidas não são incluídas no processo de paginação.

    A integração entre Paging e Group By é descrita no tópico Group By.

    Usage

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

    const selectOptions = [5, 15, 20, 50];

<IgrGrid className="gridSize">
    <IgrPaginator key="paginator" perPage={10} page={1} selectOptions={selectOptions}>
    </IgrPaginator>
</IgrGrid>

    Paginator Component Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.