React Grid 열 이동 개요

Ignite UI for React 열을 이동할 수 있는 기능을 지원하여 표시되는 열 순서에 따라 열을 표시할 방법을 유연하게 결정할 수 있습니다.

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.

열 이동이 로Deferred 설정되면, 열을 이동할 때 분리기가 나타납니다. 열을 이동할 때, 마우스 포인터를 놓으면, 이동한 열이 구분자 오른쪽에 있는 열을 대신하게 됩니다. 이 구분자는 각각 와columnMovingSeparatorWidth 속성을 사용하여columnMovingSeparatorBackground 너비와 색상을 커스터마이즈할 수도 있습니다.

원한다면 열의 움직임을 애니메이션으로 만들 수도 있습니다. 이는 그리드의 속성을 설정columnMovingAnimationMode 함으로써 할 수 있습니다. 애니메이션은 기본적으로 켜져 있지 않습니다.

Code Snippet

다음은 지연된 열 이동, 활성화된 애니메이션 및 5px 너비의 구분 기호를 사용하여 Ignite UI for React에서 열 이동을 구현하는 방법을 보여줍니다.

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

React Grid 열 이동 개요

React Grid Column Moving Example

Code Snippet

API References