# 그룹화

## Content

테이블 시트는 지정된 필드로 데이터 소스를 그룹화하는 기능을 지원합니다. 즉, 동일한 셀 내용을 자동으로 하나의 셀로 병합합니다. 그룹화된 열은 기준 열의 왼쪽에 배치되며, 다음과 같은 유형의 열로 구성됩니다:

* **기준 열(Base column)**: 원래의 열 값을 포함합니다.
* **요약 열(Summary column)**: 사용자 정의 수식으로 계산된 집계 결과를 포함합니다.
* **슬라이서 열(Slicer column)**: 집계 결과의 세부 항목(슬라이스)을 포함합니다.

다음 이미지는 테이블 시트 그룹화에서의 다양한 열 유형을 보여줍니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-grouping.png)

`TableSheet` 클래스의 [groupBy](/spreadjs/api/classes/GC.Spread.Sheets.TableSheet.TableSheet#groupBy) 및 [removeGroupBy](/spreadjs/api/classes/GC.Spread.Sheets.TableSheet.TableSheet#removeGroupBy) 메서드를 사용하여 각각 그룹화를 추가하거나 제거할 수 있습니다.
다음 코드 샘플은 요약 열과 슬라이서 열을 포함한 그룹화 열을 추가하는 방법을 보여줍니다:

```javascript
function grouping() {
    // 'sellingPackage' 필드를 기준으로 그룹화하며, 요약 필드와 슬라이서 필드를 포함
    sheet.groupBy([
        {
            caption: "Selling Package", field: "sellingPackage", width: 150, style: { backColor: "#F9CA9A" },
            summaryFields: [
                {
                    caption: "SUM(Unit Price)",
                    formula: "=SUM([unitPrice])",
                    slice: { field: "=YEAR([@validFrom])", width: 120, style: { backColor: "#FCE3CA", formatter: "#,##0.00" } },
                    width: 150,
                    style: { backColor: "#FAD7B2", formatter: "#,##0.00" }
                }
            ]
        }
    ]);
}
```

## 그룹화 레이아웃

테이블 시트는 **Tabular, Outline, Condensed**의 그룹 레이아웃을 제공하여 그룹화된 데이터를 최적의 방식으로 표시할 수 있도록 지원합니다.

### **Tabular 모드**

이 모드에서는 그룹 필드, 요약 및 슬라이스에 대해 카테고리 또는 계산 열이 생성됩니다.
다음 이미지는 “**Office**” 열을 기준으로 데이터를 그룹화한 Tabular 레이아웃을 보여줍니다.
![image](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/ts-grouplayout-tabular.488fee.png)
다음 샘플 코드는 Tabular 그룹 레이아웃을 구현하는 방법을 보여줍니다.

```javascript
sheet.options.groupLayout.mode = GC.Spread.Sheets.TableSheet.GroupingLayout.tabular; 
```

### **Outline 모드**

이 모드에서는 그룹화 필드명과 값이 머리글에 추가되고, 각 그룹 항목 앞에 계층 구조로 표시됩니다.
다음 이미지는 Outline 모드를 보여줍니다.
![image](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/ts-grouplayout-outline.c78d8b.png)
다음 샘플 코드는 Outline 그룹 레이아웃을 구현하는 방법을 보여줍니다.

```javascript
sheet.options.groupLayout.mode = GC.Spread.Sheets.TableSheet.GroupingLayout.outline; 
```

### **Condensed 모드**

이 모드는 모든 머리글 정보와 집계를 한 줄로 통합하여 머리글과 바닥글을 얇게 표시함으로써 표시를 간소화합니다.
다음 이미지는 Condensed 모드를 보여줍니다.
![image](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/ts-grouplayout-condensed.5e03d9.png)
다음 샘플 코드는 Condensed 그룹 레이아웃을 구현하는 방법을 보여줍니다.

```javascript
sheet.options.groupLayout.mode = GC.Spread.Sheets.TableSheet.GroupingLayout.condensed; 
```

### 제한 사항

* **Outline 및 Condensed 레이아웃**에서는 슬라이서 그룹화 구성이 표시되지 않습니다. **Tabular 레이아웃**은 `position` 및 `relateTo` 설정을 표시하지 않습니다.
* **Condensed 및 Outline 모드**에서는 헤더 또는 푸터에 둘 이상의 요약 결과가 있는 경우 첫 번째 요약 결과만 표시됩니다.
* `detailColumnsVisible` 메서드는 Outline 및 Condensed 모드에서는 작동하지 않습니다.

>type=warning
> **참고:** SpreadJS 디자이너를 사용하여 이러한 그룹화 레이아웃 설정을 적용할 수 있습니다.
> 자세한 내용은 [테이블 시트 디자인 모드](/spreadjs/docs/spreadjs-designer-component/spdesignerwork/tablesheet-designer/DesignMode) 항목을 참고하시기 바랍니다.