[!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에 정의된 EVER 그룹에 대한 섹션 헤더를 생성합니다. groupDescriptions의 속성 IgcDataGridComponent.

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

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

Collapsable 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