[!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 Grid Column Moving Overview
The Ignite UI for Web Components Data Grid supports the ability to move columns, giving you the flexibility over how you wish to display your columns with respect to the order of the columns shown.
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.
Quando a movimentação de colunas estiver definida como Deferred, um separador será exibido ao mover uma coluna. Ao mover uma coluna, uma vez que o ponteiro do mouse for liberado, a coluna movida tomará o lugar da coluna colocada à direita do separador. Este separador também pode ser personalizado em largura e cor usando as propriedades columnMovingSeparatorWidth e columnMovingSeparatorBackground, respectivamente.
Você também pode animar os movimentos da coluna, se desejar. Isso pode ser feito definindo a propriedade columnMovingAnimationMode da grade. As animações não estão ativadas por padrão.
Code Snippet
The following demonstrates how to implement column moving in the Ignite UI for Web Components Data Grid with deferred column moving, animations enabled, and a 5px wide separator:
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;