Paginación de cuadrícula jerárquica Angular

    La paginación se utiliza para dividir un gran conjunto de datos en una secuencia de páginas que tienen un contenido similar. La paginación de tablas Angular mejora la experiencia del usuario y la interacción con los datos. La paginación de cuadrícula jerárquica se puede configurar a través de un componente independiente proyectado en el árbol de cuadrícula mediante la definición de una etiqueta igx-paginator, similar a la adición de una columna. Como en cualquier tabla Angular, la paginación en la cuadrícula jerárquica admite plantillas para páginas personalizadas.

    Angular Pagination Example

    El siguiente ejemplo representa la paginación de cuadrícula jerárquica y expone las opciones de uso de items per page y cómo se puede habilitar la paginación. El usuario también puede navegar rápidamente a través de las páginas de la cuadrícula jerárquica mediante los botones "Ir a la última página" e "Ir a la primera página".

    Agregar un componente igx-paginator controlará si la función está presente; puede habilitarla/deshabilitarla usando un simple *ngIf con una propiedad de alternancia. La entrada perPage controla los registros visibles por página. Actualicemos nuestra cuadrícula jerárquica para habilitar la paginación:

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

    Ejemplo:

    <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

    El componente igx-paginator se usa junto con el componente igx-hierarchical-grid en el siguiente ejemplo, pero puede usarlo con cualquier otro componente en caso de que se necesite la funcionalidad de paginación.

    <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

    Debido a ciertas limitaciones en cómo se implementan las cuadrículas secundarias de IgxHierarchicalGrid y cómo funciona el alcance DI, al definir un componente de paginador dentro de las etiquetas igx-row-island, siempre asegúrese de usar la directiva IgxPaginator en el paginador mismo. Esto asegurará que la cuadrícula secundaria tenga la instancia del paginador correcta como referencia:

    <igx-hierarchical-grid>
    ...
    <igx-row-island>
        ...
        <igx-grid-toolbar *igxPaginator>
           ...
        </igx-grid-toolbar>
    </igx-row-island>
    ...
</igx-hierarchical-grid>

    Paginator Component Demo

    Remote Paging

    La paginación remota se puede lograr declarando un servicio responsable de la obtención de datos y un componente que será responsable de la construcción de la red y la suscripción de datos. Para obtener información más detallada, consulte el tema Hierarchical Grid Remote Data Operations.

    Estilismo

    Para comenzar a diseñar el paginador, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

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

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

    Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el paginator-theme y acepta los parámetros $text-color, $background-color y $border-color.

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

    Como se ha visto, solo controla los paginator-theme colores del contenedor de paginación, pero no afecta a los botones de la interfaz de usuario del paginador. Para dar estilo a esos botones, vamos a crear un nuevo tema de botón de icono:

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

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores mediante el uso de las palette funciones y color. Consulte el Palettes tema para obtener orientación detallada sobre cómo usarlos.

    El último paso es incluir los mixins de componentes, cada uno con su respectiva temática:

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

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

    Incluimos el tema​.igx-paginator__pager de botón de icono creado, de modo que solo se estilizaría el estilo de los botones del paginador. De lo contrario, otros botones de iconos de la cuadrícula también se verían afectados.

    Note

    Si el componente está usando un Emulated ViewEncapsulation, es necesario que penetrate esta encapsulación use::ng-deep para diseñar los componentes que están dentro del contenedor de paginación, como el botón:

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

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

    Demo

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.