React Grid 열 이동 개요

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

React Grid Column Moving Example

Ignite UI for React 데이터 그리드에서 열이 이동하는 것은 기본적으로 켜져 있으며, 그리드의 속성을 설정columnMovingMode 하여 제어할 수 있습니다. 이 부동산에는 두 가지 옵션이 있습니다.Deferred​None​Deferred 열의 이동을 허용하는 반면None, 전체 그리드에 대한 열의 이동은 비활성화됩니다.

열 이동이 로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} />

API References

• columnMovingAnimationMode
• columnMovingMode
• columnMovingSeparatorBackground
• columnMovingSeparatorWidth
• Deferred