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 na Ignite UI for React Data Grid está ativada por padrão e pode ser controlada definindo a propriedade columnMovingMode da grade. Essa propriedade tem duas opções, Deferred ou None. Deferred permitirá a movimentação de colunas, enquanto None desabilitará a movimentação de colunas para toda a grade.

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

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