Descripción general de la paginación de cuadrícula Web Components

    La función Ignite UI for Web Components en Web Components Grid se utiliza para dividir un gran conjunto de datos en una secuencia de páginas que tienen contenido similar. La paginación de cuadrícula React mejora la experiencia del usuario y la interacción de datos. La paginación IgcGridComponent se puede configurar a través de un componente separado proyectado en el árbol de la cuadrícula definiendo una etiqueta IgcPaginatorComponent, similar a agregar una columna. Como en cualquier tabla Web Components, la paginación en la cuadrícula Web Components admite plantillas para páginas personalizadas.

    Web Components Grid Pagination Example

    El siguiente ejemplo representa la paginación IgcGridComponent y expone las opciones de uso de elementos por página y cómo se puede habilitar la paginación. El usuario también puede navegar rápidamente a través de las páginas IgcGridComponent mediante los botones "Ir a la última página" e "Ir a la primera página".

    .gridSize {
    --ig-size: var(--ig-size-small);
}

    <igc-grid id="grid" class="gridSize" height="500px" width="100%" >
    <igc-paginator per-page="10">
    </igc-paginator>
</igc-grid>

    Paging with Group By

    Las filas de grupo participan en el proceso de paginación junto con las filas de datos. Cuentan para el tamaño de página de cada página. Las filas contraídas no se incluyen en el proceso de paginación.

    La integración entre paginación y agrupar por se describe en el tema Agrupar por.

    Usage

    El componente IgcPaginatorComponent se usa junto con el componente IgcGridComponent en el siguiente ejemplo, pero puede usarlo con cualquier otro componente en caso de que se necesite la funcionalidad de paginación.

    <igc-grid id="grid" className="gridSize">
    <igc-paginator id="paginator" per-page="10">
    </igc-paginator>
</igc-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGrid;
    var paginator = this.paginator = document.getElementById('paginator') as IgcPaginatorComponent;
    const selectOptions = [5, 15, 20, 50];
    grid.data = this.data;
    paginator.page = grid.page;
    paginator.totalRecords = grid.totalRecords;
    paginator.selectOptions = selectOptions;
}

    Paginator Component Demo

    API References

    Additional Resources

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