React Grid 열 크기 조절

Ignite UI for React 열 크기를 조정할 수 있는 기능을 지원하여 각 열의 너비에 따라 열을 표시하는 방법을 유연하게 결정할 수 있습니다.

React Grid Column Resizing Example

Ignite UI for React DataGrid에서 열의 크기 조절은 기본적으로 켜져 있으며, 그리드의 속성을 이용columnResizingMode 해 제어할 수 있습니다. 이 부동산에는 세 가지 옵션이 있습니다. 각 옵션은 아래에 설명되어 있습니다:

• Deferred: 기본 옵션. 크기 조절 시 컬럼이 크기 또는 작아지는 것을 나타내는 분리기가 나타납니다.
• Immediate: 사이즈를 조정할 때는 분리기가 없습니다. 열의 너비는 포인터를 따라 열의 가장자리를 드래그하고 크기를 조절할 때 따라갑니다.
• None: 열은 크기 조절이 불가능합니다.

열 크기 조절이 로Deferred 설정되면, 표시되는 구분자는 격자의 와columnResizingSeparatorBackground 속성을 각각 사용하여columnResizingSeparatorWidth 색상과 너비를 변경할 수 있습니다.

크기 조절 모드가 전용으로 설정Deferred 되어 있을 때 열이 크기 조절되는 모습을 애니메이션으로 만들 수도 있습니다. 이 작업은 속성을 를 로columnResizingAnimationMode 설정Interpolate 함으로써 이루어집니다.

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

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

Code Snippet

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

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