React 행 그룹화

Ignite UI for React 행을 '고정 헤더' 행 그룹으로 그룹화할 수 있습니다. 이는 Microsoft Outlook의 그룹화 기준 기능과 유사합니다. 이 기능은 자신의 기준에 따라 데이터를 시각적으로 그룹화하는 쉬운 방법입니다.

React Row Group-By Area Example

Group-By Area

위 예에 표시된 것처럼 사용자 인터페이스에 대해 DataGrid의 IsGroupByAreaVisible 속성을 True로 설정합니다. 그룹별 영역을 사용하면 사용자는 DataGrid를 간접적으로 상호 작용할 때 상호 작용 없이 열을 그룹화하고 정렬할 수 있는 더 많은 옵션을 사용할 수 있습니다. 사용자 요구에 따라 그룹을 배치하고 재정렬할 수 있습니다. 이 영역은 열이 프로그래밍 방식으로 DataGrid의 groupDescriptions로 추가되는 경우에도 채워집니다.

Using Group Descriptions Example

Hierarchical Groups

groupHeaderDisplayMode 속성을 사용하면 그룹이 계층적일 수 있습니다. 기본적으로 추가된 각 그룹 설명은 함께 집계됩니다. groupHeaderDisplayMode를 Split으로 설정하면 IgrGrid의 groupDescriptions 속성에 정의된 그룹에 대한 섹션 헤더가 생성됩니다.

import { GroupHeaderDisplayMode } from 'igniteui-react-core';

public componentDidMount() {
    // ...
    this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split;
}

Collapsable Groups

또한 IgrGrid는 최종 사용자가 isGroupCollapsable 속성을 통해 그룹화된 데이터를 확장하거나 축소할 수 있도록 각 그룹 섹션에 토글을 표시할 수 있습니다.

public componentDidMount() {
    // ...
    this.grid.isGroupCollapsable = true;
}

Summary

귀하의 편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사할 수 있습니다.

import { IgrColumnGroupDescription } from 'igniteui-react-grids';
import { ListSortDirection } from 'igniteui-react-core';
import { GroupHeaderDisplayMode } from 'igniteui-react-core';

public componentDidMount() {
    window.addEventListener('load', this.onLoad);
}

public onLoad() {
    const state = new IgrColumnGroupDescription();
    state.field = "Country";
    state.displayName = "Location";
    state.sortDirection = ListSortDirection.Descending;
    const city = new IgrColumnGroupDescription();
    city.field = "City";
    city.displayName = "";
    const income = new IgrColumnGroupDescription();
    income.field = "Income";
    income.displayName = "Income";

    this.grid.groupDescriptions.add(state);
    this.grid.groupDescriptions.add(city);
    this.grid.groupDescriptions.add(income);

    this.grid.isGroupCollapsable = true;
    this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split;
}