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 columna en la Ignite UI for React La cuadrícula de datos está activada por defecto y puede controlarse estableciendo lacolumnMovingMode propiedad de la cuadrícula. Esta propiedad tiene dos opciones,Deferred oNone.Deferred Permitirá mover columnas, mientrasNone que desactivará el movimiento de columnas en toda la cuadrícula.
Cuando el movimiento de columna está configurado en ,Deferred aparecerá un separador al mover una columna. Al mover una columna, una vez que se libera el puntero del ratón, la columna movida ocupará el lugar de la columna situada a la derecha del separador. Este separador también puede personalizarse en ancho y color usando lascolumnMovingSeparatorWidth propiedades ycolumnMovingSeparatorBackground respectivamente.
También puedes animar los movimientos de las columnas, si lo deseas. Esto se puede hacer estableciendo lacolumnMovingAnimationMode propiedad de la cuadrícula. Las animaciones no están activadas por defecto.
Code Snippet
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-data-grids';
import { ColumnMovingMode } from 'igniteui-react-data-grids';
<IgrDataGrid
ref={this.onGridRef}
height="500px"
width="100%"
dataSource={this.data}
columnMovingMode={ColumnMovingMode.Deferred}
columnMovingAnimationMode={ColumnMovingAnimationMode.SlideOver}
columnMovingSeparatorWidth={5} />