[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Web Components 행 그룹화

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

Web Components Row Group-By Area Example

Group-By Area

위 예시처럼 DataGrid의 속성을 사용자 인터페이스에 대해 True로 설정isGroupByAreaVisible 하세요. 그룹별 영역은 사용자가 DataGrid와 간접적으로 상호작용할 때 상호작용하지 않고도 열을 그룹화하고 정렬할 수 있는 더 많은 옵션을 제공합니다. 그룹은 사용자의 필요에 따라 위치하고 재정렬할 수 있습니다. 이 영역은 DataGrid에서처럼groupDescriptions 칼럼이 프로그래밍적으로 추가될 때도 표시됩니다.

Using Group Descriptions Example

Hierarchical Groups

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

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

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

Collapsible Groups

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

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

Summary

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

import { IgcIgcColumnGroupDescription } from 'igniteui-webcomponents-data-grids';
import { ListSortDirection } from 'igniteui-webcomponents-core';
import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core';

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

    this.grid = document.getElementById("grid") as IgcDataGridComponent;
    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

• IgcDataGridComponent
• groupDescriptions
• groupHeaderDisplayMode
• isGroupByAreaVisible
• isGroupCollapsable