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

    O recurso Ignite UI for React Pagination em React Tree Grid é usado para dividir um grande conjunto de dados em uma sequência de páginas com conteúdo semelhante. React paginação em grade melhora a experiência do usuário e a interação com dados.IgrTreeGrid A paginação pode ser configurada por meio de um componente separado projetado na árvore da grade definindo umaIgrPaginator tag, semelhante à adição de uma coluna. Como em qualquer tabela React, a paginação na Grade de Árvore React suporta templates para páginas personalizadas.

    React Tree Grid Pagination Example

    O exemplo a seguir representaIgrTreeGrid 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 pelasIgrTreeGrid 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);
}

    <IgrTreeGrid className="gridSize" height="500px" width="100%">
    <IgrPaginator perPage={10}>
    </IgrPaginator>
</IgrTreeGrid>

    Usage

    OIgrPaginator componente é usado junto com oIgrTreeGrid 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];

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

    Paginator Component Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.