React 행 그룹화

    Ignite UI for React 사용하면 행을 'sticky header' 행 그룹으로 그룹화할 수 있습니다. 이는 Microsoft Outlook의 Group By 기능과 유사하며, 이는 자신의 기준에 따라 데이터를 시각적으로 그룹화하는 쉬운 방법입니다.

    React Row Group-By Area Example

    Group-By Area

    Set isGroupByAreaVisible property on the DataGrid to True, as shown in the example above, to the user interface. The group-by area allows users more options to group and sort columns without interact when interacting the DataGrid indirectly. Groups can be positioned and reordered based on the users needs. This area also populates when columns are programmatically added as groupDescriptions on the DataGrid as well.

    Using Group Descriptions Example

    Hierarchical Groups

    그groupHeaderDisplayMode 속성은 그룹을 계층적으로 만들 수 있게 합니다. 기본적으로 추가된 각 그룹 설명은 함께 집계됩니다. 설정groupHeaderDisplayMode 받는 사람Split 정의된 모든 그룹에 대해 섹션 헤더를 생성합니다.groupDescriptions​IgrDataGrid.

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

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

    Collapsible Groups

    또한,IgrDataGrid 각 그룹 섹션에 토글을 표시하여 사용자가 해당 속성을 통해isGroupCollapsable 그룹화된 데이터를 확장하거나 접을 수 있도록 할 수 있습니다.

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

    Summary

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

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

    API References