React 그리드 열 이동 개요

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-grids';
import { ColumnMovingMode } from 'igniteui-react-grids';

<IgrDataGrid
    ref={this.onGridRef}
    height="500px"
    width="100%"
    dataSource={this.data}
    columnMovingMode={ColumnMovingMode.Deferred}
    columnMovingAnimationMode={ColumnMovingAnimationMode.SlideOver}
    columnMovingSeparatorWidth={5} />

React 그리드 열 이동 개요

React Grid Column Moving Example

Code Snippet

API References