Angular Paginação de grade hierárquica

    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 hierárquica é configurável por meio de um componente separado projetado na árvore da grade, definindo uma igx-paginator tag, semelhante à adição de uma coluna. Como em qualquer Tabela Angular, a paginação na Grade Hierárquica dá suporte ao modelo para páginas personalizadas.

    Angular Pagination Example

    O exemplo a seguir representa a paginação de Grade Hierárquica 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 Hierárquica 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 Hierárquica para habilitar a paginação:

    <igx-hierarchical-grid #hierarchicalGrid [data]="data" [height]="'500px'" [width]="'100%'">
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-hierarchical-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-hierarchical-grid componente no exemplo abaixo, mas você pode usá-lo com qualquer outro componente caso a funcionalidade de paginação seja necessária.

    <igx-hierarchical-grid>
    <igx-column *ngFor="let c of hColumns" [field]="c.field">
    </igx-column>
    <igx-row-island [key]="'childData'" [autoGenerate]="true">
        <igx-row-island [key]="'childData'" [autoGenerate]="true">
            <igx-paginator *igxPaginator></igx-paginator>
        </igx-row-island>
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>
    <igx-row-island [key]="'childData2'" [autoGenerate]="true">
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>

    <igx-paginator></igx-paginator>
</igx-hierarchical-grid>

    Paginator Configuration within child grids

    Devido a certas limitações em como as grades filho de um IgxHierarchicalGrid são implementadas e como o escopo de DI funciona, ao definir um componente paginador dentro das marcas igx-row-island, sempre certifique-se de usar a diretiva IgxPaginator no próprio paginador. Isso garantirá que a grade filho tenha a instância correta do paginador como referência:

    <igx-hierarchical-grid>
    ...
    <igx-row-island>
        ...
        <igx-grid-toolbar *igxPaginator>
           ...
        </igx-grid-toolbar>
    </igx-row-island>
    ...
</igx-hierarchical-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 Hierarchical 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.