React 그리드 열 크기 조정

Ignite UI for React 열 크기를 조정하는 기능을 지원하므로 각 너비에 따라 열을 표시하는 방법에 대한 유연성을 제공합니다.

React Grid Column Resizing Example

Ignite UI for React의 열 크기 조정은 기본적으로 켜져 있으며 그리드의 columnResizingMode 속성을 사용하여 제어할 수 있습니다. 이 속성에는 세 가지 옵션이 있습니다. 각 옵션은 아래에 설명되어 있습니다.

• Deferred: 기본 옵션입니다. 크기를 조정할 때 열의 크기를 조정할 때 얼마나 커지거나 작아지는지를 보여주는 구분 기호가 나타납니다.
• Immediate: 크기를 조정할 때 구분 기호가 없습니다. 열의 가장자리를 끌고 그에 따라 크기를 조정하면 열의 너비가 포인터를 따라갑니다.
• None: 열 크기를 조정할 수 없습니다.

열 크기 조정이 Deferred로 설정된 경우 표시되는 구분 기호는 그리드의 columnResizingSeparatorBackground 및 columnResizingSeparatorWidth 속성을 각각 사용하여 색상과 너비에서 수정할 수 있습니다.

크기 조정 모드가 Deferred 전용으로 설정된 경우 크기가 조정될 때 열에 애니메이션을 적용할 수도 있습니다. 이는 columnResizingAnimationMode 속성을 Interpolate로 설정하여 수행됩니다.

그리드의 각 열은 개별적으로 크기를 조정할 수 있는지 여부를 결정할 수 있습니다. 특정 열의 크기 조정을 활성화하거나 비활성화하려면 해당 열의 IsResizingEnabled 속성을 설정하면 됩니다.

별 너비 열의 크기를 조정하면 해당 열이 고정 열로 변경됩니다.

Code Snippet

다음 코드 조각은 React 데이터 그리드에서 열 크기 조정을 구현하는 방법을 보여줍니다. 이 경우 Street 열은 크기 조정이 불가능합니다. 이 경우 열 크기 조정 구분 기호의 너비는 5픽셀이 되며 크기 조정이 가능한 열도 크기 조정 시 애니메이션으로 표시됩니다.

import { ColumnResizingMode } from 'igniteui-react-grids';
import { ColumnResizingAnimationMode } from 'igniteui-react-grids';

<IgrDataGrid ref={this.onGridRef}
    height="100%"
    width="100%"
    columnResizingAnimationMode={ColumnResizingAnimationMode.Interpolate}
    columnResizingMode={ColumnResizingMode.Deferred}
    columnResizingSeparatorWidth={5}
    autoGenerateColumns={false}
    dataSource={this.data} >
    <IgrTextColumn field="FirstName" headerText="First Name" />
    <IgrTextColumn field="LastName" headerText="Last Name" />
    <IgrTextColumn field="Street" headerText="Street" isResizingEnabled={false} />
    <IgrTextColumn field="City" headerText="City" />
</IgrDataGrid>

API References

• columnResizingAnimationMode
• columnResizingMode
• columnResizingSeparatorBackground
• columnResizingSeparatorWidth
• Deferred
• Interpolate