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 tabela melhora a experiência do usuário e a interação de dados. A paginação da grade de árvore é configurável por meio de um componente separado projetado na árvore de grade, definindo uma igx-paginator tag, semelhante à adição de uma coluna. Como em qualquer tabela Angular, a paginação na grade de árvore dá suporte ao modelo para páginas personalizadas.

    Angular Pagination Example

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

    Adicionar um igx-paginator componente controlará se o recurso está presente, você pode habilitá-lo/desabilitá-lo usando uma propriedade simples *ngIf com uma alternância. A perPage 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

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

    <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 obtida declarando um serviço, responsável pela busca de dados e um componente, que será responsável pela construção do Grid e pela assinatura de dados. Para informações mais detalhadas, consulte o Tree Grid Remote Data Operations tópico.

    Estilização

    Para começar a estilizar o paginador, precisamos importar o index arquivo, onde todas as funções do tema e mixins de componentes residem:

    @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 os paginator-theme parâmetros e aceita os $text-color​ ​$background-color parâmetros e . $border-color​

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

    Como visto, o paginator-theme apenas controla as cores do contêiner de paginação, mas não afeta os botões na interface do usuário do pager. Para estilizar esses botões, vamos criar um novo tema de botão de ícone:

    $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 obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter 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 ícone-botão-tema​.igx-paginator__pager criado, para que apenas os botões do paginador sejam estilizados. Caso contrário, outros botões de ícone na grade também seriam afetados.

    Note

    Se o componente estiver usando um Emulated ViewEncapsulation, é necessário penetrate usar esse encapsulamento::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.