Angular Tree Grid Pagination

    A paginação é usada para dividir um grande conjunto de dados em uma sequência de páginas com conteúdo semelhante. Angular paginação de tabelas melhora a experiência do usuário e a interação com dados. A paginação em grade em árvore é configurável por meio de um componente separado projetado na árvore da grade definindo umaigx-paginator tag, semelhante à adição de uma coluna. Como em qualquer Tabela Angular, a paginação na Grade de Árvore suporta templates para páginas personalizadas.

    Angular Pagination Example

    O exemplo a seguir representa a paginação em grade de árvore e expõe as opções, o uso deitems per page e como a paginação pode ser ativada. O usuário também pode navegar rapidamente pelas páginas da Grade de Árvore através dos botões "Ir para a última página" e "Ir para a primeira página".

    Adicionar umigx-paginator componente vai controlar se o recurso está presente, você pode habilitá-lo/desativá-lo usando uma propriedade simples*ngIf com alternância. AperPage entrada controla os registros visíveis por página. Vamos atualizar nossa Grade de Árvore para habilitar a paginação:

    <igx-tree-grid #treeGrid [data]="data" [height]="'500px'" [width]="'100%'">
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-tree-grid>

    Exemplo:

    <igx-paginator #paginator [totalRecords]="20">
    <igx-paginator-content>
        <div id="numberPager" style="justify-content: center;">
            <button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()" igxButton="flat">
                PREV
            </button>
            <span>
               Page {{paginator.page}} of {{paginator.totalPages}}
            </span>
            <button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()" igxButton="flat">
                NEXT
            </button>
        </div>
    </igx-paginator-content>
</igx-paginator>

    Usage

    Oigx-paginator componente é usado junto com oigx-tree-grid componente do exemplo abaixo, mas você pode usá-lo com qualquer outro componente caso seja necessária funcionalidade de paginação.

    <igx-tree-grid #treeGrid [data]="data">
    <igx-paginator #paginator [(page)]="treeGrid.page" [totalRecords]="treeGrid.length" [(perPage)]="10"
            [selectOptions]="selectOptions">
    </igx-paginator>
</igx-tree-grid>

    Paginator Component Demo

    Remote Paging

    A paginação remota pode ser realizada declarando um serviço, responsável pela busca de dados e um componente, que será responsável pela construção da Grade e assinatura de dados. Para informações mais detalhadas, confira oTree Grid Remote Data Operations tema.

    Estilização

    Para começar a estilizar o paginador, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativos:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Seguindo a abordagem mais simples, criamos um novo tema que estende epaginator-theme aceita os$text-color​$background-color​$border-color parâmetros.

    $dark-paginator: paginator-theme(
  $text-color: #d0ab23;,
  $background-color: #231c2c,
  $border-color: #d0ab23;
);

    Como visto, opaginator-theme controle apenas as cores do contêiner de paginação, mas não afeta os botões na interface do pager. Para estilizar esses botões, vamos criar um novo tema de botão com ícones:

    $dark-button: icon-button-theme(
  $foreground: #d0ab23,
  $hover-foreground: #231c2c,
  $hover-background: #d0ab23,
  $focus-foreground: #231c2c,
  $focus-background: #d0ab23,
  $disabled-foreground: #9b7829
);
    Note

    Em vez de codificar os valores de cor como acabamos de fazer, podemos alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para orientações detalhadas sobre como usá-los.

    O último passo é incluir os mixins de componentes, cada um com seu respectivo tema:

    @include css-vars($dark-paginator);

.igx-grid-paginator__pager {
  @include css-vars($dark-button);
}
    Note

    Incluímos o tema de ícone-botão criado dentro.igx-paginator__pager, para que apenas os botões do paginador sejam estilizados. Caso contrário, outros botões de ícones na grade também seriam afetados.

    Note

    Se o componente estiver usando umEmulated ViewEncapsulation, é necessário quepenetrate esse encapsulamento use::ng-deep para estilizar os componentes que estão dentro do contêiner de paginação, como o botão:

    @include css-vars($dark-paginator);

:host {
  igx-paginator {
    ::ng-deep {
      @include css-vars($dark-button);
    }
  }
}

    Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.