# 피벗 테이블 구성 요소

## Content

이 항목에서는 피벗 테이블 구성 요소 및 관련 용어에 대한 기본 정보를 설명합니다.
아래 이미지는 스프레드시트의 **피벗 영역(Pivot Area)**(피벗 테이블 포함)과 **피벗 패널(Pivot Panel)**을 보여줍니다.
![image-20260303.9d1ac5.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260303.9d1ac5-20260602.27540d.png?width=800)

## 피벗 영역

피벗 영역은 아래 이미지와 같이 다양한 필드와 레이블 항목을 포함하는 피벗 테이블을 표시합니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/pivotarea.png?width=800)

## 피벗 패널

피벗 패널은 피벗 테이블의 필드를 추가, 제거, 드래그 및 이동하는 데 사용할 수 있는 작업 창(Task Pane)입니다. 피벗 테이블 패널은 아래 이미지와 같이 **PivotTable Fields**, **PivotTable Area**, **Pivot View Manager** 섹션으로 구성됩니다.
![image-20260303.1041df.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260303.1041df-20260602.9a325d.png)
또한 `panelLayout` 옵션을 사용하여 피벗 패널의 레이아웃을 사용자 지정할 수 있습니다. 위 이미지는 기본 패널 레이아웃(stack)을 보여주며, 아래 이미지는 'flow' 피벗 패널을 보여줍니다.
![image-20260303.48bd17.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260303.48bd17-20260602.68f375.png)
다음 코드 예제는 피벗 패널 레이아웃을 flow로 설정합니다.

```javascript
var layoutType = panel.panelLayout();
panel.panelLayout(GC.Spread.Pivot.PivotPanelLayoutType.flow);
```

기본적으로 피벗 패널은 고정 크기를 가집니다. 그러나 마우스를 왼쪽 가장자리에 올려 포인터가 양방향 화살표로 변경되면 마우스 왼쪽 버튼을 누른 채 드래그하여 피벗 패널의 크기를 조정할 수 있습니다. 이를 통해 긴 필드 이름도 확인할 수 있습니다.
![resizePanel-20260303.d66fbf.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/resizePanel-20260303.d66fbf-20260602.70a310.gif?width=800)
크기 조정 가능한 피벗 패널을 사용하려면 `Designer` 네임스페이스의 [DefaultConfig](/spreadjs/api/designer/modules/GC.Spread.Sheets.Designer#defaultconfig) 변수에서 SpreadJS 디자이너의 기본 구성 설정을 변경해야 합니다.
다음 코드 예제는 `DefaultConfig`에서 크기 조정 가능한 피벗 패널을 설정합니다.

```javascript
let designer = new GC.Spread.Sheets.Designer.Designer("designer-container");
var config = GC.Spread.Sheets.Designer.DefaultConfig;
let pivotPanelIndex = config.sidePanels.findIndex((item) => item.uiTemplate === "pivotTablePanelTemplate");
config.sidePanels[pivotPanelIndex].allowResize = true;
config.sidePanels[pivotPanelIndex].showResizeLine = true
config.sidePanels[pivotPanelIndex].minWidth = "200px";
config.sidePanels[pivotPanelIndex].maxWidth = "800px";
designer.setConfig(config);
```

### 피벗 테이블 필드

PivotTable Fields 섹션은 데이터 원본의 필드를 표시하며, 이를 피벗 테이블에 추가할 수 있습니다. 원하는 피벗 테이블 보기를 만들기 위해 이러한 필드를 선택하거나 선택 해제할 수 있습니다.
![image-20260303.29d2cb.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260303.29d2cb-20260602.4ef384.png)
다음 코드 예제는 피벗 패널에서 PivotTable Fields 섹션을 숨기는 방법을 보여줍니다.

```javascript
// Hide the "PivotTable fields" section
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.area | GC.Spread.Pivot.PivotPanelSection.viewList);
```

#### 검색 상자

PivotTable Fields 섹션은 필드 목록 위에 검색 상자를 제공하여 대규모 데이터 원본에서 원하는 필드를 빠르게 찾을 수 있도록 합니다.
![image-20260303.078a71.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260303.078a71-20260602.dfb269.png)

>type=note
> **참고:**
>
> * 검색은 대소문자를 구분하지 않으며 와일드카드를 지원합니다 (`?`는 단일 문자, `*`는 임의 길이의 문자열).
> * 검색어와 일치하는 필드가 없으면 필드 목록에 **"No matches"**가 표시됩니다.
> * **Esc** 키를 눌러 검색 상자를 지우고 필드 목록을 초기화할 수 있습니다.

### 피벗 테이블 영역

PivotTable Area는 피벗 테이블의 행, 열, 값 및 필터 필드를 표시하는 피벗 패널의 영역입니다. 이러한 영역 간에 피벗 테이블 필드를 드래그 앤 드롭하여 서로 다른 피벗 테이블 보기로 전환할 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/pivottablearea.png)
다음 표는 위 영역에 대해 설명합니다.

| 영역 | 설명 |
| --- | --- |
| 행 | 선택된 필드의 값을 행 레이블(Row Labels)로 사용하여 피벗 테이블에 행으로 표시합니다. |
| 열 | 선택된 필드의 값을 열 레이블(Column Labels)로 사용하여 피벗 테이블에 열로 표시합니다. |
| 필터 | 피벗 테이블에서 필터 작업에 사용됩니다. |
| 값 | 선택된 필드의 통계 데이터를 표시합니다. |

다음 코드 예제는 피벗 패널에서 PivotTable Area 섹션을 숨기는 방법을 보여줍니다.

```javascript
// Hide the "PivotTable Area" section
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields | GC.Spread.Pivot.PivotPanelSection.viewList);
```

### 피벗 뷰 매니저

Pivot View Manager는 피벗 테이블의 보기를 관리하는 데 사용할 수 있습니다. 특정 시점에 저장된 피벗 테이블 상태를 빠르게 복원할 수 있습니다. 다음 이미지는 View Manager에 저장된 다양한 피벗 테이블 보기를 보여줍니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/viewmanager.png)
다음 코드 예제는 피벗 패널에서 Pivot View Manager 섹션을 숨기는 방법을 보여줍니다.

```javascript
// Hide the "Pivot View Manager" section
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields | GC.Spread.Pivot.PivotPanelSection.area);
```

자세한 내용은 [피벗 뷰 매니저](/spreadjs/docs/features/pivot-table/pivot-view-manager) 항목을 참조하세요.