피벗 테이블 구성 요소

이 항목에서는 피벗 테이블 구성 요소 및 관련 용어에 대한 기본 정보를 설명합니다.

아래 이미지는 스프레드시트의 피벗 영역(Pivot Area)(피벗 테이블 포함)과 피벗 패널(Pivot Panel)을 보여줍니다.

image-20260303.9d1ac5.png

피벗 영역

피벗 영역은 아래 이미지와 같이 다양한 필드와 레이블 항목을 포함하는 피벗 테이블을 표시합니다.

피벗 패널

피벗 패널은 피벗 테이블의 필드를 추가, 제거, 드래그 및 이동하는 데 사용할 수 있는 작업 창(Task Pane)입니다. 피벗 테이블 패널은 아래 이미지와 같이 PivotTable Fields, PivotTable Area, Pivot View Manager 섹션으로 구성됩니다.

image-20260303.1041df.png

또한 panelLayout 옵션을 사용하여 피벗 패널의 레이아웃을 사용자 지정할 수 있습니다. 위 이미지는 기본 패널 레이아웃(stack)을 보여주며, 아래 이미지는 'flow' 피벗 패널을 보여줍니다.

image-20260303.48bd17.png

다음 코드 예제는 피벗 패널 레이아웃을 flow로 설정합니다.

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

기본적으로 피벗 패널은 고정 크기를 가집니다. 그러나 마우스를 왼쪽 가장자리에 올려 포인터가 양방향 화살표로 변경되면 마우스 왼쪽 버튼을 누른 채 드래그하여 피벗 패널의 크기를 조정할 수 있습니다. 이를 통해 긴 필드 이름도 확인할 수 있습니다.

resizePanel-20260303.d66fbf.gif

크기 조정 가능한 피벗 패널을 사용하려면 Designer 네임스페이스의 DefaultConfig 변수에서 SpreadJS 디자이너의 기본 구성 설정을 변경해야 합니다.

다음 코드 예제는 DefaultConfig에서 크기 조정 가능한 피벗 패널을 설정합니다.

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

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

// 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

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

피벗 테이블 영역

PivotTable Area는 피벗 테이블의 행, 열, 값 및 필터 필드를 표시하는 피벗 패널의 영역입니다. 이러한 영역 간에 피벗 테이블 필드를 드래그 앤 드롭하여 서로 다른 피벗 테이블 보기로 전환할 수 있습니다.

다음 표는 위 영역에 대해 설명합니다.

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

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

// 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에 저장된 다양한 피벗 테이블 보기를 보여줍니다.

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

// 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);

자세한 내용은 피벗 뷰 매니저 항목을 참조하세요.