Selección de cuadrícula React

    La Ignite UI for React admite la selección de filas y celdas individuales o múltiples.

    React Ejemplo de selección de cuadrícula

    EXAMPLE
    DATA
    TSX

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

    Descripción general

    La selección en la cuadrícula de datos React está habilitada a nivel de fila y celda y se puede configurar mediante la opción selectionMode de la cuadrícula React. Esta propiedad acepta cinco opciones diferentes, que se enumeran a continuación:

    • None: la selección no está habilitada.
    • SingleCell: la selección de una sola celda está habilitada.
    • SingleRow: la selección de una sola fila está habilitada.
    • MultipleCell: la selección de múltiples celdas está habilitada.
    • MultipleRow: la selección de varias filas está habilitada.
    • RangeCell: está habilitada la selección de un rango de múltiples celdas haciendo clic y arrastrando.

    El valor predeterminado de selectionBehavior es ModifierBased, donde solo se selecciona una fila o celda a la vez y se requieren teclas modificadoras (CTRL) para realizar una selección múltiple de elementos. selectionBehavior establecido en Toggle permitirá seleccionar varias filas o celdas con un solo clic.

    MultipleRow incluye la siguiente funcionalidad:

    • Haga clic y arrastre para seleccionar filas
    • Mayús y haga clic para seleccionar varias filas.
    • Mayús y presione las teclas de flecha arriba/abajo para seleccionar varias filas.

    Al presionar la barra espaciadora se alterna la selección de la fila activa entre MultipleRow o SingleRow.

    Ignite UI for React | CTA Banner

    Selección de rango de filas

    El siguiente ejemplo demuestra cómo seleccionar o anular la selección de todas las filas de la cuadrícula. Tenga en cuenta que selectionMode debe establecerse en MultipleRow.

    EXAMPLE
    DATA
    TSX
    CSS

    Referencias de API