[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Descripción general del movimiento de columnas de cuadrícula Web Components
La Ignite UI for Web Components Data Grid admite la capacidad de mover columnas, lo que le brinda flexibilidad sobre cómo desea mostrarlas con respecto al orden de las columnas mostradas.
Web Components Grid Column Moving Example
El movimiento de columnas en la cuadrícula de datos Ignite UI for Web Components 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 Web Components con movimiento de columnas diferido, animaciones habilitadas y un separador de 5 píxeles de ancho:
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';
import { ColumnMovingMode } from 'igniteui-webcomponents-grids';
<igc-data-grid id="grid"
height="100%"
width="100%"
column-moving-mode="Deferred"
column-moving-animation-mode="SlideOver"
column-moving-separator-width="5">
</igc-data-grid>
let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;