Visão geral da paginação de grade de Web Components

    O recurso Ignite UI for Web Components Pagination no Web Components 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 da grade React melhora a experiência do usuário e a interação de dados. A paginação IgcGridComponent é configurável por meio de um componente separado projetado na árvore da grade, definindo uma tag IgcPaginator, semelhante à adição de uma coluna. Como em qualquer tabela Web Components, a paginação no Web Components Grid oferece suporte a modelos para páginas personalizadas.

    Web Components Grid Pagination Example

    O exemplo a seguir representa a paginação IgcGridComponent 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 IgcGridComponent 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);
}

    <igc-grid id="grid" class="gridSize" height="500px" width="100%" >
    <igc-paginator per-page="10">
    </igc-paginator>
</igc-grid>

    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 IgcPaginator é usado junto com o componente IgcGridComponent no exemplo abaixo, mas você pode usá-lo com qualquer outro componente caso a funcionalidade de paginação seja necessária.

    <igc-grid id="grid" className="gridSize">
    <igc-paginator id="paginator" per-page="10">
    </igc-paginator>
</igc-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGrid;
    var paginator = this.paginator = document.getElementById('paginator') as IgcPaginatorComponent;
    const selectOptions = [5, 15, 20, 50];
    grid.data = this.data;
    paginator.page = grid.page;
    paginator.totalRecords = grid.totalRecords;
    paginator.selectOptions = selectOptions;
}

    Paginator Component Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.