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.
React Grid Column Moving Example
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 deshabilitará el movimiento de columnas 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.
Code Snippet
A continuación se muestra 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 píxeles de ancho:
import { ColumnMovingAnimationMode } from 'igniteui-react-grids';
import { ColumnMovingMode } from 'igniteui-react-grids';
<IgrDataGrid
ref={this.onGridRef}
height="500px"
width="100%"
dataSource={this.data}
columnMovingMode={ColumnMovingMode.Deferred}
columnMovingAnimationMode={ColumnMovingAnimationMode.SlideOver}
columnMovingSeparatorWidth={5} />