Angular Paginação de grade hierárquica

    Pagination is used to split a large set of data into a sequence of pages that have similar content. Angular table pagination improves user experience and data interaction. Hierarchical Grid pagination is configurable via a separate component projected in the grid tree by defining a igx-paginator tag, similar to adding of a column. As in any Angular Table, the pagination in the Hierarchical Grid supports template for custom pages.

    Angular Pagination Example

    The following example represents Hierarchical Grid pagination and exposes the options usage of items per page and how paging can be enabled. The user can also quickly navigate through the Hierarchical Grid pages via "Go to last page" and "Go to first page" buttons.

    Adding a igx-paginator component will control whether the feature is present, you can enable/disable it by using a simple *ngIf with a toggle property. The perPage input controls the visible records per page. Let’s update our Hierarchical Grid to enable paging:

    <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

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

    <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 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 oHierarchical 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.