Descripción general de la paginación React Grid

La función Ignite UI for React Pagination en React 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 IgrGrid se puede configurar a través de un componente separado proyectado en el árbol de la cuadrícula definiendo una etiqueta IgrPaginator, similar a agregar una columna. Como en cualquier tabla React, la paginación en React Grid admite plantillas para páginas personalizadas.

React Grid Pagination Example

El siguiente ejemplo representa la paginación IgrGrid 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 por las páginas IgrGrid mediante los botones "Ir a la última página" e "Ir a la primera página".

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

<IgrGrid className="gridSize" height="500px" width="100%">
    <IgrPaginator key="paginator" perPage="10">
    </IgrPaginator>
</IgrGrid>

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 IgrPaginator se usa junto con el componente IgrGrid en el siguiente ejemplo, pero puede usarlo con cualquier otro componente en caso de que se necesite la funcionalidad de paginación.

const selectOptions = [5, 15, 20, 50];

<IgrGrid className="gridSize">
    <IgrPaginator key="paginator" perPage={10} page={1} selectOptions={selectOptions}>
    </IgrPaginator>
</IgrGrid>

Paginator Component Demo

API References

Additional Resources

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