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

La función Ignite UI for Web Components Paginación en Web Components Tree Grid se utiliza para dividir un gran conjunto de datos en una secuencia de páginas con contenido similar. React paginación en cuadrícula mejora la experiencia del usuario y la interacción con los datos.IgcTreeGridComponent La paginación se puede configurar mediante un componente separado proyectado en el árbol de la cuadrícula definiendo unaIgcPaginatorComponent etiqueta, similar a la suma de una columna. Como en cualquier tabla de Web Components, la paginación en la cuadrícula de árbol de Web Components soporta plantillas para páginas personalizadas.

Web Components Tree Grid Pagination Example

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

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

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

Usage

ElIgcPaginatorComponent componente se utiliza junto con elIgcTreeGridComponent componente del ejemplo siguiente, pero puedes usarlo con cualquier otro componente en caso de que se necesite funcionalidad de paginación.

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

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcTreeGrid;
    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.