Web Components 그리드 그룹화 기준

    The Ignite UI for Web Components Group By behavior in Web Components IgcGrid creates grouped data rows based on the column values. The Group By in the IgcGridComponent allows for visualizing the groups in a hierarchical structure. The grouped data rows can be expanded or collapsed and the order of grouping may be changed through the UI or API. When Row Selection is enabled, a Group By row selector is rendered in the left-most area of the group row. In case the rowSelection property is set to single, checkboxes are disabled and only serve as an indication for the group where selection is placed. If the rowSelection property is set to multiple, clicking over the Group By row selector selects all records belonging to this group.

    Web Components Grid Group By Example

    이 예에서는 대량의 데이터를 그룹화하는 기능을 보여줍니다. 열 헤더를 상단(그룹화 영역)으로 드래그하면 사용자는 선택한 열에 대한 데이터를 계층 구조로 볼 수 있습니다. 더 많은 열 헤더를 맨 위로 드래그하여 여러 필드에서 그룹화할 수 있습니다. 이러한 그룹화 옵션은 사용자가 훨씬 빠르고 시각적으로 허용되는 방식으로 데이터를 표시하려는 수많은 행과 열이 있는 테이블이 있는 경우 유용합니다.

    Initial Grouping State

    It is possible to define initial grouping of the grid by assigning an array of expressions to the groupingExpressions property of the grid.

    constructor() {
    var grid = document.getElementById("grid") as IgcGridComponent;
    grid.groupingExpressions = [
        { fieldName: 'ProductName', dir: SortingDirection.Desc },
        { fieldName: 'Released', dir: SortingDirection.Desc }
    ];
}

    Grouping expressions implement the ISortingExpression interface.

    Group By API

    Grouping API

    Grouping is available through the UI and through a robust API exposed by the grid component. Developers can allow end-users to group the grid data by certain columns, by setting each column's Groupable property to true.

    <igc-grid auto-generate="false" id="grid">
    <igc-column field="OrderID" hidden="true"></igc-column>
    <igc-column field="ShipCountry" header="Ship Country" width="200px" groupable="true"> </igc-column>
    <igc-column field="OrderDate" header="Order Date" data-type="date" width="200px" groupable="true"> </igc-column>
    <igc-column field="PostalCode" header="Postal Code" width="200px" groupable="true"> </igc-column>
    <igc-column field="Discontinued" width="200px" data-type="boolean" groupable="true" name="column1" id="column1"> </igc-column>
    <igc-column field="ShipName" header="Ship Name" width="200px" groupable="true"> </igc-column>
    <igc-column field="ShipCity" header="Ship City" width="200px" groupable="true"> </igc-column>
    <igc-column field="ShipperName" header="Shipper Name" width="200px" groupable="true"> </igc-column>
    <igc-column field="Salesperson" header="Sales Person" width="200px" groupable="true"> </igc-column>
    <igc-column field="UnitPrice" header="Unit Price" width="200px" groupable="true"> </igc-column>
    <igc-column field="Quantity" width="200px" groupable="true"> </igc-column>
</igc-grid>

        constructor() {
        var column1 = (this.column1 = document.getElementById("column1") as IgcColumnComponent);
        column1.groupable = true;
    }

    During runtime the expressions are gettable and settable from the groupingExpressions property. If you need to add or change an existing expression you may also use the groupBy method with either a single or an array of expressions.

    grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true });

    Expand/Collapse API

    In addition to grouping expressions you can also control the expansion states for group rows. They are stored in a separate property of the IgcGridComponent component groupingExpansionState which is a collection of IgcGroupByExpandState. Each expansion state is uniquely defined by the field name it is created for and the value it represents for each level of grouping, i.e. the identifier is a hierarchy array of IgcGroupByKey.

    As with groupingExpressions, setting a list of IgcGroupByExpandState directly to the groupingExpansionState will change the expansion accordingly. Additionally IgcGridComponent exposes a method toggleGroup that toggles a group by the group record instance or via the expanded property of the row.

    const groupRow = this.grid.getRowByIndex(0).groupRow;
grid.toggleGroup(groupRow);

    const groupRow = this.grid.getRowByIndex(0);
groupRow.expanded = false;

    Groups can be created expanded (default) or collapsed and the expansion states would generally only contain the state opposite to the default behavior. You can control whether groups should be created expanded or not through the groupsExpanded property.

    Select/Deselect All Rows in a Group API

    Selecting/Deselecting all rows in a group is available through the selectRowsInGroup and deselectRowsInGroup API methods.

    The code snippet below can be used to select all rows within a group using the group record instance selectRowsInGroup method. Additionally, the second parameter of this method is a boolean property through which you may choose whether the previous row selection will be cleared or not. The previous selection is preserved by default.

    const groupRow = this.grid.getRowByIndex(0).groupRow;
grid.selectRowsInGroup(groupRow);

    If you need to deselect all rows within a group programmatically, you can use the deselectRowsInGroup method.

    const groupRow = this.grid.getRowByIndex(0).groupRow;
grid.deselectRowsInGroup(groupRow);

    Templating

    Group Row Templates

    The group row except for the expand/collapse UI is fully templatable. By default it renders a grouping icon and displays the field name and value it represents. The context to render the template against is of type IgcGroupByRecord.

    예를 들어, 다음 템플릿은 그룹 행 요약을 더욱 자세하게 만듭니다.

        public groupByRowTemplate = (ctx: IgcGroupByRowTemplateContext) => {
        const groupRow: IgcGroupByRecord = ctx.implicit;
        return html`<span>Total items with value: ${ groupRow.value } are ${ groupRow.records.length }</span>`;
    }

    Group Row Selector Templates

    As mentioned above the group row except for the expand/collapse UI is fully templatable. To create a custom Group By row selector template use groupByRowSelectorTemplate. From the template, you can access the implicitly provided context variable, with properties that give you information about the Group By row's state.

    The selectedCount property shows how many of the group records are currently selected while totalCount shows how many records belong to the group.

    public groupByRowSelectorTemplate = (ctx: IgcGroupByRowSelectorTemplateContext) => {
    return html`
        ${ ctx.implicit.selectedCount } / ${ ctx.implicit.totalCount  }
    `;
}

    The groupRow property returns a reference to the group row.

    public groupByRowSelectorTemplate = (ctx: IgcGroupByRowSelectorTemplateContext) => {
    const groupRow = ctx.implicit.groupRow;
    return html` <div @click=${(e: any) => this.handleGroupByRowSelectorClick(e, groupRow)} ">Handle groupRow</div> `;
};

    The selectedCount and totalCount properties can be used to determine if the Group By row selector should be checked or indeterminate (partially selected).

    Web Components Grid Group By With Paging

    그룹 행은 데이터 행과 함께 페이징 프로세스에 참여합니다. 각 페이지의 페이지 크기에 포함됩니다. 축소된 행은 페이징 프로세스에 포함되지 않습니다. 확장 또는 축소 작업을 수행하면 Paging이 페이지 수를 다시 계산하고 필요한 경우 페이지 인덱스를 조정합니다. 여러 페이지에 걸쳐 있는 그룹은 페이지 간에 분할됩니다. 그룹 행은 시작하는 페이지에만 표시되며 후속 페이지에서는 반복되지 않습니다. 그룹 행의 요약 정보는 전체 그룹을 기준으로 계산되며 Paging의 영향을 받지 않습니다.

    Web Components Group By With Paging Example

    Group By With Summaries

    Group By와 요약 간의 통합은 요약 항목에 설명되어 있습니다.

    Keyboard Navigation

    그룹화 UI는 다음과 같은 키보드 상호 작용을 지원합니다.

    • 그룹 행의 경우(포커스는 행 또는 확장/축소 셀에 있어야 함)

      • ALT + RIGHT- 그룹 확장
      • ALT + LEFT- 그룹 축소
      • SPACE-rowSelection 속성이 다중으로 설정된 경우 그룹의 모든 행을 선택합니다.

    • For group IgcChipComponent components in the group by area (focus should be on the chip)

      • SHIFT + LEFT- 가능한 경우 그룹화 순서를 변경하여 초점을 맞춘 칩을 왼쪽으로 이동합니다.
      • SHIFT + 오른쪽- 가능한 경우 그룹화 순서를 변경하여 초점을 맞춘 칩을 오른쪽으로 이동합니다.
      • SPACE- 정렬 방향을 변경합니다.
      • DELETE- 필드 그룹을 해제합니다.
      • 칩의 개별 요소도 초점을 맞출 수 있으며 키를 사용하여 상호 작용할 수 있습니다 ENTER.

    Web Components Grid Custom Group By

    그리드를 사용하면 열별 또는 그룹화 표현식별로 사용자 정의 그룹화를 정의할 수 있으며, 이는 사용자 정의 조건을 기반으로 그룹화를 제공합니다. 이는 복잡한 개체별로 그룹화해야 하거나 기타 애플리케이션별 시나리오에 유용합니다.

    The sample below demonstrates custom grouping by Date, where the date values are sorted and grouped by Day, Week, Month or Year based on user-selected grouping mode.

    Web Components Custom Group By Example

    The sample defines custom sorting for the different date conditions. Each custom strategy defines the GroupingComparer method, which is the custom compare function used when sorting the values. Additionally it extracts the values from the date needed for the comparison.

    public groupByMode = "Month";
public getParsedDate(date: any) {
    return {
        day: date.getDay(),
        month: date.getMonth() + 1,
        year: date.getFullYear()
    };
}

    A GroupingComparer function is defined for the grouping expressions, which determines the items belonging to the same group based on the selected grouping mode. Values in the sorted data for which this function returns 0 are marked as part of the same group.

    grid.groupingExpressions = [
    { fieldName: 'OrderDate', dir: SortingDirection.Desc,
    groupingComparer: (a, b) => {
            const dateA = this.getParsedDate(a);
            const dateB = this.getParsedDate(b);
            if (this.groupByMode === 'Month') {
                return dateA.month === dateB.month ? 0 : -1;
            } else if (this.groupByMode === "Year") {
                return dateA.year === dateB.year ? 0 : -1;
            } else if (this.groupByMode === 'Week') {
                return this.getWeekOfDate(a) === this.getWeekOfDate(b) ? 0 : -1;
            }
            return dateA.day === dateB.day && dateA.month === dateB.month ? 0 : -1;
        }
    }
];

    Styling

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <igc-grid class="grid">

    그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

    .grid {
    --ig-grid-group-row-background: #969799;
    --ig-grid-group-row-selected-background: #969799;
    --ig-grid-group-label-column-name-text: #f8f8f8;
    --ig-grid-group-label-text: #f8f8f8;
    --ig-grid-group-count-text-color: #222;
    --ig-grid-expand-icon-color: #f8f8f8;
    --ig-grid-expand-icon-hover-color: #f8f8f8;
}

    Demo

    Known Limitations

    한정 설명
    그룹화된 열의 최대 개수는 10개입니다. 10개 이상의 열이 그룹화되면 오류가 발생합니다.

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.