Descripción general del movimiento de columnas React Grid

    La Ignite UI for React Data Grid admite la capacidad de mover columnas, lo que le brinda flexibilidad sobre cómo desea mostrar sus columnas con respecto al orden de las columnas mostradas.

    Ejemplo de movimiento de columna de cuadrícula de React

    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.

    El movimiento de columnas en la Ignite UI for React Data Grid está activado de forma predeterminada y se puede controlar configurando la propiedad columnMovingMode de la cuadrícula. Esta propiedad tiene dos opciones: Deferred o None. Deferred permitirá el movimiento de columnas, mientras que None lo deshabilitará para toda la cuadrícula.

    Cuando el movimiento de columnas está configurado en Deferred, aparecerá un separador mientras se mueve una columna. Al mover una columna, una vez que se suelta el puntero del mouse, la columna movida tomará el lugar de la columna ubicada a la derecha del separador. Este separador también se puede personalizar en ancho y color mediante las propiedades columnMovingSeparatorWidth y columnMovingSeparatorBackground, respectivamente.

    También puedes animar los movimientos de las columnas, si lo deseas. Esto se puede hacer configurando la propiedad columnMovingAnimationMode de la cuadrícula. Las animaciones no están activadas de forma predeterminada.

    Fragmento de código

    A continuación, se demuestra cómo implementar el movimiento de columnas en la Ignite UI for React Data Grid con movimiento de columnas diferido, animaciones habilitadas y un separador de 5 px de ancho:

    import { ColumnMovingAnimationMode } from 'igniteui-react-grids';
    import { ColumnMovingMode } from 'igniteui-react-grids';
    ts
    <IgrDataGrid
        ref={this.onGridRef}
        height="500px"
        width="100%"
        dataSource={this.data}
        columnMovingMode={ColumnMovingMode.Deferred}
        columnMovingAnimationMode={ColumnMovingAnimationMode.SlideOver}
        columnMovingSeparatorWidth={5} />
    tsx
    Ignite UI for React | CTA Banner

    Referencias de API