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 contenido similar. La paginación de tablas Angular mejora la experiencia del usuario y la interacción de datos. La paginación de cuadrícula jerárquica se puede configurar a través de un componente separado proyectado en el árbol de la cuadrícula definiendo una etiqueta igx-paginator, similar a agregar 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>

Example:

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

Pagination Styling in Angular

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: #F4D45C,
    $background-color: #575757,
    $border-color: #292826
);

Como se ve, el paginator-theme solo controla los colores del contenedor de paginación, pero no afecta los botones en la interfaz de usuario del buscapersonas. Para darle estilo a esos botones, creemos un nuevo tema de botón:

$dark-button: button-theme(
    $icon-color: #FFCD0F,
    $icon-hover-color: #292826,
    $icon-hover-background: #FFCD0F,
    $icon-focus-color: #292826,
    $icon-focus-background: #FFCD0F,
    $disabled-color: #16130C
);

En este ejemplo solo cambiamos el color y el fondo del icono y el color del botón se deshabilitó, pero el button-theme proporciona muchos más parámetros para controlar el estilo del botón.

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

@include grid-paginator($dark-grid-paginator);
.igx-grid-paginator__pager {
    @include button($dark-button);
}

Note

Ajustamos el alcance del mixin igx-button dentro de.igx-paginator__pager, de modo que solo se diseñen los botones del paginador. De lo contrario, otros botones de la cuadrícula también se verían afectados.

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep:

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

Defining a Color Palette

En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores utilizando las funciones igx-palette e igx-color.

igx-palette genera una paleta de colores basada en los colores primarios y secundarios que se pasan:

$yellow-color: #F9D342;
$black-color: #292826;

$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);

Y luego, con igx-color podemos recuperar fácilmente el color de la paleta.

$dark-paginator: paginator-theme(
    $palette: $dark-palette,
    $text-color: color($dark-palette, "secondary", 400),
    $background-color: color($dark-palette, "primary", 200),
    $border-color: color($dark-palette, "primary", 500)
);

$dark-button: button-theme(
    $palette: $dark-palette,
    $icon-color: color($dark-palette, "secondary", 700),
    $icon-hover-color: color($dark-palette, "primary", 500),
    $icon-hover-background: color($dark-palette, "secondary", 500),
    $icon-focus-color: color($dark-palette, "primary", 500),
    $icon-focus-background: color($dark-palette, "secondary", 500),
    $disabled-color: color($dark-palette, "primary", 700)
);

Note

​igx-color e igx-palette son funciones potentes para generar y recuperar colores. Consulte el tema Palettes para obtener orientación detallada sobre cómo utilizarlas.

Using Schemas

Yendo más allá con el motor de temas, puede crear una estructura sólida y flexible que se beneficie de los esquemas. Un esquema es una receta de un tema.

Amplíe uno de los dos esquemas predefinidos, que se proporcionan para cada componente, en este caso: esquemas dark-pagination y dark-button:

// Extending the dark paginator schema
$dark-paginator-schema: extend($_dark-pagination,
        (
            text-color:(
               color: ("secondary", 400)
            ),
            background-color:(
               color: ("primary", 200)
            ),
            border-color:(
               color:( "primary", 500)
            )
        )
);
// Extending the dark button schema
$dark-button-schema: extend($_dark-button,
        (
            icon-color:(
               color:("secondary", 700)
            ),
            icon-hover-color:(
               color:("primary", 500)
            ),
            icon-hover-background:(
               color:("secondary", 500)
            ),
            icon-focus-color:(
               color:("primary", 500)
            ),
            icon-focus-background:(
               color:("secondary", 500)
            ),
            disabled-color:(
               color:("primary", 700)
            )
        )
);

Para aplicar nuestros esquemas personalizados, tenemos que extender uno de los globales (light u dark), que básicamente señala los componentes con un esquema personalizado, y luego agregarlo a los respectivos temas de los componentes:

// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
    igx-paginator: $dark-paginator-schema,
    igx-button: $dark-button-schema
));

// Definingpaginator-theme with the global dark schema
$dark-paginator: paginator-theme(
  $palette: $dark-palette,
  $schema: $custom-dark-schema
);

// Defining button-theme with the global dark schema
$dark-button: button-theme(
  $palette: $dark-palette,
  $schema: $custom-dark-schema
);

No olvide incluir los temas de la misma manera que se demostró anteriormente.

Demo

API References

• IgxHierarchicalGridComponent API
• IgxHierarchicalGridComponent Styles
• Estilos de IgxGridPaginator

Additional Resources

• Descripción general de la cuadrícula jerárquica
• Paginador
• Virtualización y rendimiento
• Filtración
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Selección

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

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub