Descripción general de la paginación en cuadrícula de árbol React

    La función de paginación de Ignite UI for React en React Tree Grid se utiliza para dividir un gran conjunto de datos en una secuencia de páginas que tienen contenido similar. La paginación React Grid mejora la experiencia del usuario y la interacción con los datos. La paginación IgrTreeGrid se puede configurar a través de un componente independiente proyectado en el árbol de la cuadrícula mediante la definición de una etiqueta IgrPaginator, similar a la adición de una columna. Como en cualquier tabla React, la paginación en React Tree Grid admite plantillas para páginas personalizadas.

    Ejemplo de paginación en cuadrícula de árbol React

    En el ejemplo siguiente se representa IgrTreeGrid la paginación y se exponen 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 a través de los botones "Ir a la IgrTreeGrid última página" e "Ir a la primera página".

    EXAMPLE
    DATA
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    .gridSize {
        --ig-size: var(--ig-size-small);
    }
    css
    <IgrTreeGrid className="gridSize" height="500px" width="100%">
        <IgrPaginator key="paginator" perPage="10">
        </IgrPaginator>
    </IgrTreeGrid>
    tsx

    Uso

    El IgrPaginator componente se utiliza junto con el IgrTreeGrid componente en el ejemplo siguiente, pero puede utilizarlo con cualquier otro componente en caso de que se necesite la funcionalidad de paginación.

    const selectOptions = [5, 15, 20, 50];
    
    <IgrTreeGrid className="gridSize">
        <IgrPaginator key="paginator" perPage={10} page={1} selectOptions={selectOptions}>
        </IgrPaginator>
    </IgrTreeGrid>
    tsx

    Demostración del componente paginador

    EXAMPLE
    DATA
    TSX
    CSS

    Ignite UI for React | CTA Banner

    Referencias de API

    Recursos adicionales

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