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

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

React Tree Grid Pagination Example

O exemplo a seguir representa IgrTreeGrid a paginação e expõe o uso de opções de itens por página e como a paginação pode ser habilitada. O usuário também pode navegar rapidamente pelas páginas por meio dos botões "Ir para a última página" e "Ir para a IgrTreeGrid primeira página".

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

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

Usage

O IgrPaginator componente é usado junto com o IgrTreeGrid componente no exemplo abaixo, mas você pode usá-lo com qualquer outro componente caso a funcionalidade de paginação seja necessária.

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.