Visão geral da movimentação de colunas do React Grid

A Ignite UI for React Data Grid suporta a capacidade de mover colunas, dando a você flexibilidade sobre como deseja exibir suas colunas em relação à ordem das colunas mostradas.

React Grid Column Moving Example

A movimentação de colunas no Ignite UI for React Data Grid está ativada por padrão e pode ser controlada definindo acolumnMovingMode propriedade da grade. Esta propriedade tem duas opções,Deferred ouNone.Deferred Permitirá a movimentação de colunas, enquantoNone desativará o movimento de colunas em toda a grade.

Quando mover coluna está configurado paraDeferred, um separador aparecerá ao mover uma coluna. Ao mover uma coluna, uma vez que o ponteiro do mouse é liberado, a coluna movida ocupa o lugar da coluna colocada à direita do separador. Esse separador também pode ser personalizado em largura e cor usando ascolumnMovingSeparatorWidth propriedades ecolumnMovingSeparatorBackground, respectivamente.

Você também pode animar os movimentos das colunas, se quiser. Isso pode ser feito definindo acolumnMovingAnimationMode propriedade da grade. As animações não estão ativadas por padrão.

Code Snippet

O seguinte demonstra como implementar a movimentação de colunas na Ignite UI for React Data Grid com movimentação de colunas adiada, animações habilitadas e um separador de 5 px de largura:

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} />

API References

• columnMovingAnimationMode
• columnMovingMode
• columnMovingSeparatorBackground
• columnMovingSeparatorWidth
• Deferred