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

Column moving in the Ignite UI for React 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

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