# 피벗 테이블 레이아웃
## Content
SpreadJS는 `PivotTableLayoutType` 열거형을 사용하여 피벗 테이블의 레이아웃을 선택하고 적용할 수 있도록 지원합니다.
* 압축 형식
* 개요 형식
* 표 형식
## 압축 형식
* 압축 형식은 피벗 테이블의 기본 보고서 레이아웃이며, 각 행 레이블을 동일한 열에 개별 행으로 표시합니다. 이 레이아웃은 이름처럼 피벗 테이블의 너비를 줄여 데이터를 압축된 형태로 표현합니다. 아래 이미지는 압축 형식 레이아웃의 예시입니다.
다음 표는 압축 형식 레이아웃을 사용할 때 행 레이블, 행 필드 및 소계의 동작과 위치를 설명합니다:
| 행 레이블 | 행 필드 | 소계 |
| ----- | ---- | --- |
| 행 필드 레이블은 항상 내부 필드 레이블 위에 위치합니다. | 모든 행 필드는 하나의 열에 표시됩니다. | 소계는 각 그룹의 위 또는 아래에 표시될 수 있습니다. |
| 각 행 레이블은 상위 필드보다 약간 들여쓰기 되어 필드를 이해하기 쉽게 합니다. | | 소계를 설정하면 다음과 같이 행 필드가 변경됩니다:
**Top**: 기존 행에 소계를 행 레이블 항목 옆에 추가
**Bottom**: 새 행에 소계를 아래쪽에 추가 |
| 행 레이블은 반복할 수 없습니다. | | 열 필드의 경우, 소계는 항상 아래쪽에 표시됩니다. |
| 이 레이아웃에서만 필드의 들여쓰기 수준을 변경할 수 있습니다. | | 소계가 아래에 있더라도 행 레이블은 항상 위쪽에 표시됩니다. |
다음 코드는 피벗 테이블에 압축 형식 레이아웃을 설정하는 예시입니다:
```javascript
myPivotTable.layoutType(GC.Spread.Pivot.PivotTableLayoutType.compact);
```
압축 형식 레이아웃에서는 `rowLabelIndent` 옵션을 사용하여 행 필드의 들여쓰기 수준을 사용자 지정할 수 있습니다.
다음은 들여쓰기를 설정하는 코드 예시입니다:
```javascript
myPivotTable.options.rowLabelIndent = 12;
```
## 개요 형식
개요 형식 레이아웃은 각 행 필드를 개별 열에 표시합니다. 이 레이아웃은 모든 필드 이름을 헤딩 레이블로 표시하고자 할 때 유용하며, 피벗 테이블 너비에 제약이 없을 때 적합합니다. 아래 이미지는 개요 형식 레이아웃의 예시입니다.
다음 표는 개요 형식 레이아웃을 사용할 때 행 레이블, 행 필드 및 소계의 동작과 위치를 설명합니다:
| 행 레이블 | 행 필드 | 소 |
| ----- | ---- | --- |
| 각 행 레이블은 개별 행에 정의됩니다. | 모든 행 필드는 개별 열에 표시됩니다. | 소계는 각 그룹의 위 또는 아래에 표시될 수 있습니다. |
| 행 필드 레이블은 항상 내부 필드 레이블 위에 위치합니다. | 각 행 필드는 열 머리글에 이름을 표시합니다. | 소계를 설정하면 다음과 같이 행 필드가 변경됩니다:
**Top**: 기존 행에 소계를 행 레이블 항목 옆에 추가
**Bottom**: 새 행에 소계를 아래쪽에 추가 |
| 행 레이블은 반복할 수 있습니다. | | 열 필드의 경우, 소계는 항상 아래쪽에 표시됩니다. |
다음 코드는 개요 형식 레이아웃을 설정하는 예시입니다:
```javascript
myPivotTable.layoutType(GC.Spread.Pivot.PivotTableLayoutType.outline);
```
## 표 형식
표 형식 레이아웃은 개요 형식과 유사하지만, 외부 필드의 행 레이블이 관련 내부 필드의 첫 번째 레이블과 같은 행에 위치한다는 점이 다릅니다. 따라서 피벗 테이블의 행 수를 줄일 수 있습니다. 아래 이미지는 표 형식 레이아웃의 예시입니다.
다음 표는 표 형식 레이아웃을 사용할 때 행 레이블, 행 필드 및 소계의 동작과 위치를 설명합니다:
| 행 레이블 | 행 필드 | 소 |
| ----- | ---- | --- |
| 외부 필드의 행 레이블은 관련 내부 필드의 첫 번째 레이블과 같은 행에 표시됩니다. | 모든 행 필드는 개별 열에 표시됩니다. | 소계는 각 그룹의 **아래쪽**에만 표시될 수 있습니다. |
| 행 레이블은 반복할 수 있습니다. | 각 행 필드는 열 머리글에 이름을 표시합니다. | 소계를 아래에 설정하면, 새 행이 아래쪽에 추가됩니다. |
| | | 열 필드의 경우, 소계는 항상 아래쪽에 표시됩니다. |
다음 코드는 표 형식 레이아웃을 설정하는 예시입니다:
```javascript
myPivotTable.layoutType(GC.Spread.Pivot.PivotTableLayoutType.tabular);
```
## 추가 설정
### Subtotals 및 GrandTotals 설정
`subtotalsPosition` 및 `grandTotalPosition` 옵션을 사용하여 소계 및 총계의 위치를 설정할 수 있습니다.
* `subtotalsPosition`: `none`, `top`, `bottom` 값을 가질 수 있으며 기본값은 `bottom`입니다.
* `grandTotalPosition`: `none`, `both`, `col`, `row` 값을 사용할 수 있으며 기본값은 `both`입니다.
다음은 소계 및 총계 위치를 설정하는 예시입니다:
```javascript
// 소계 위치를 none으로 설정
myPivotTable.options.subtotalsPosition = GC.Spread.Pivot.SubtotalsPosition.none;
// 총계 위치를 열 방향(col)으로 설정
myPivotTable.options.grandTotalPosition = GC.Spread.Pivot.GrandTotalPosition.col;
```
또한 SpreadJS는 단일 필드에 대해 소계 위치를 조정하여 외관을 개선할 수 있도록 지원합니다.
현재는 `subtotalsPosition.top` 및 `subtotalsPosition.bottom`만 지원됩니다.
```javascript
pivotTable.add("Date","Date",GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.subtotalPosition("Date", GC.Spread.Pivot.SubtotalsPosition.top);
```
SpreadJS 디자이너에서는 해당 필드의 필드 설정(**Field Settings)** 대화상자를 사용하여 소계 위치를 위로 설정할 수 있습니다. 단, 기본값은 아래(bottom)입니다.
>type=warning
> **참고:**
>
> * 압축 및 개요 레이아웃에서는 기본적으로 소계를 아래쪽에 표시합니다. 표 형식 레이아웃은 소계를 항상 아래에만 표시하며, 위치 변경은 허용하지 않습니다.
> * 피벗 테이블의 레이아웃을 재설정하면 각 필드의 `subtotalPosition` 설정이 전역 설정값으로 재설정됩니다.
> 전역 소계 위치를 재설정하면 모든 필드의 `subtotalPosition`이 동일한 전역값으로 재설정됩니다.
> * 현재 SpreadJS는 단일 필드의 순서를 재배치하는 기능은 지원하지 않습니다.
### 필드별 소계 표시 여부 설정
Excel과 유사하게, 특정 필드의 소계 표시 여부를 제어할 수 있습니다.
다음은 `subtotalVisible` 메서드를 사용하여 "Date" 필드에 대해 소계를 표시하는 예시입니다:
```javascript
pivotTable.subtotalVisible("Date", true); // true 또는 false 설정 가능
```
>type=warning
> **참고:**
>
> * `grandTotalPosition`을 변경하면 모든 필드의 소계 표시 설정이 초기화됩니다.
> * 필드의 소계를 숨겨도 해당 위치(top/bottom)는 영향을 받지 않습니다.
> 소계 위치 역시 소계 표시 여부에 영향을 주지 않습니다.
> * 개별 필드별로 소계 표시 여부를 독립적으로 설정할 수 있습니다.
### 레이블 항목 반복 설정
개요 및 표 형식 레이아웃에서는 `fillDownLabels` 옵션을 사용하여 외부 행 필드에서 항목 레이블을 반복 표시할 수 있습니다.
다음은 `fillDownLabels` 옵션을 활성화하는 예시입니다:
```Javascript
// 레이블 항목 반복 설정
myPivotTable.options.fillDownLabels = true;
```
>type=warning
> **참고:** 이 옵션은 압축 형식 레이아웃에서는 사용할 수 없습니다.
### 빈 행 설정
각 항목 뒤에 빈 행을 추가하여 데이터를 보다 쉽게 이해할 수 있도록 할 수 있습니다. 이를 위해 `insertBlankLineAfterEachItem` 옵션을 사용할 수 있습니다.
다음은 항목마다 빈 행을 추가하는 예시입니다:
```javascript
// 항목마다 빈 행 추가
myPivotTable.options.insertBlankLineAfterEachItem = true;
```
다음 이미지는 위에서 설명한 모든 추가 설정이 적용된 표 형식 레이아웃을 보여줍니다:
