[!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.
Web Components Resumen del movimiento de columnas de cuadrícula
La cuadrícula de datos de Ignite UI for Web Components 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 que se muestran.
Web Components Grid Column Moving Example
Column moving in the Ignite UI for Web Components Data Grid is on by default, and can be controlled by setting the columnMovingMode property of the grid. This property has two options, Deferred or None. Deferred will allow column moving, while None will disable column moving for the entire grid.
When column moving is set to Deferred, a separator will show up while moving a column. While moving a column, once the mouse pointer is released, the moved column will take the place of the column placed to the right of the separator. This separator can also be customized in width and color by using the columnMovingSeparatorWidth and columnMovingSeparatorBackground properties, respectively.
You can also animate the column movements, if you wish. This can be done by setting the columnMovingAnimationMode property of the grid. Animations are not on by default.
Code Snippet
A continuación, se muestra cómo implementar el movimiento de columnas en la cuadrícula de datos de Ignite UI for Web Components con movimiento de columna diferido, animaciones habilitadas y un separador de 5 px de ancho:
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids';
import { ColumnMovingMode } from 'igniteui-webcomponents-data-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;