React 행 그룹화

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

React Row Group-By Area Example

Group-By Area

위의 예제와 같이 DataGrid의 속성을 True로 사용자 isGroupByAreaVisible 인터페이스에 설정합니다. 그룹화 기준 영역을 사용하면 DataGrid와 간접적으로 상호 작용할 때 상호 작용 없이 열을 그룹화하고 정렬할 수 있는 더 많은 옵션을 사용할 수 있습니다. 그룹은 사용자 요구에 따라 배치되고 재정렬될 수 있습니다. 이 영역은 DataGrid에서와 같이 groupDescriptions 프로그래밍 방식으로 열이 추가될 때도 채워집니다.

Using Group Descriptions Example

Hierarchical Groups

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

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

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

Collapsable 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;
}