Visão geral da paginação de grade do React

    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

    O exemplo a seguir representaIgrGrid a paginação e expõe as opções, uso de itens por página e como a paginação pode ser ativada. O usuário também pode navegar rapidamente pelasIgrGrid páginas através dos botões "Ir para a última página" e "Ir para a primeira página".

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

    <IgrGrid className="gridSize" height="500px" width="100%">
    <IgrPaginator 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

    OIgrPaginator componente é usado junto com oIgrGrid componente do exemplo abaixo, mas você pode usá-lo com qualquer outro componente caso seja necessária funcionalidade de paginação.

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

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

    Paginator Component Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.