Visão geral da paginação Blazor Grid

O recurso Ignite UI for Blazor Pagination no Blazor Grid é usado para dividir um grande conjunto de dados em uma sequência de páginas que têm conteúdo semelhante. A paginação de grade React melhora a experiência do usuário e a interação de dados. A paginação IgbGrid é configurável por meio de um componente separado projetado na árvore de grade definindo uma tag IgbPaginator, semelhante à adição de uma coluna. Como em qualquer tabela Blazor, a paginação no Blazor Grid oferece suporte a modelos para páginas personalizadas.

Blazor Grid Pagination Example

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

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

<IgbGrid @ref=grid Class="gridSize" Width="100%" Height="500px" Data=Data>
    <IgbPaginator PerPage="10"></IgbPaginator>
</IgbGrid>

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

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

<IgbGrid @ref=grid Data=Data className="gridSize">
    <IgbPaginator Page="grid.Page" TotalRecords="grid.TotalRecords" PerPage="10">
    </IgbPaginator>
</IgbGrid>

Paginator Component Demo

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.