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

    O recurso Paginação Ignite UI for React em React Grid é 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. IgrGrid 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 React dá suporte ao modelo para páginas personalizadas.

    Exemplo de paginação de grade React

    O exemplo a seguir representa IgrGrid 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 IgrGrid primeira página".

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

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

    Paginação com Agrupar por

    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.

    Uso

    O IgrPaginator componente é usado junto com o IgrGrid 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]; <IgrGrid className="gridSize"> <IgrPaginator perPage={10} page={1} selectOptions={selectOptions}> </IgrPaginator> </IgrGrid>

    Demonstração do componente paginador

    Referências de API

    Recursos adicionais

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.