# 사용자 지정 피벗 테이블 스타일
## Content
SpreadJS는 사용자 지정 피벗 테이블 스타일을 추가, 제거 및 수정하여 피벗 테이블 테마를 관리할 수 있도록 지원합니다. 이러한 스타일은 피벗 테이블에 적용할 수 있으며, 스타일을 적용하려면 스타일 이름만 설정하면 됩니다.
피벗 테이블 스타일은 [GC.Spread.Sheets.WorkBook](/spreadjs/api/v18/classes/GC.Spread.Sheets.Workbook) 클래스의 `customPivotTableThemes` 속성을 사용하여 사용자 지정할 수 있습니다. `CustomPivotTableThemesManager` 클래스는 사용자 지정 피벗 테이블 테마를 관리하기 위한 다음과 같은 메서드를 제공합니다:
* `all`: 모든 사용자 지정 피벗 테이블 테마 가져오기
* `get`: 이름으로 특정 사용자 지정 피벗 테이블 테마 가져오기
* `add`: 스타일 객체 또는 이름을 사용하여 새 사용자 지정 피벗 테이블 테마 추가
* `remove`: 이름으로 사용자 지정 피벗 테이블 테마 제거
* `update`: 이름 또는 스타일 객체를 사용하여 기존 사용자 지정 피벗 테이블 테마 업데이트
또한 `GC.Spread.Sheets.WorkBook` 클래스의 `defaultPivotTableTheme` 메서드를 사용하면 모든 피벗 테이블에 일관된 스타일을 적용할 수 있도록 기본 피벗 테이블 스타일을 효과적으로 관리할 수 있습니다.
>type=warning
> **참고**:
>
> * 피벗 테이블 스타일 이름은 고유해야 합니다.
> 예: 이미 "TEST"라는 사용자 지정 피벗 테이블 스타일이 존재한다면, 동일한 이름의 스타일을 다시 만들 수 없습니다.
> * 피벗 테이블 스타일 이름은 대소문자를 구분하지 않습니다.
> * 스타일 이름이 피벗 테이블에 추가되면, 해당 이름으로 스타일을 검색합니다.
> 이름이 내부 스타일과 일치하는 경우, 해당 스타일이 직접 적용됩니다. 그렇지 않은 경우 `customStyles` 컬렉션에서 해당 스타일을 검색하여 존재하면 적용됩니다. 없다면 기본 스타일이 적용됩니다.
> * `defaultPivotTableTheme` 값은 피벗 테이블 스타일 이름을 나타내는 문자열이어야 합니다.
> * 피벗 테이블이 명시적으로 스타일을 지정하지 않고 생성되었고, 기본 이름과 일치하는 스타일이 존재하는 경우 해당 스타일이 피벗 테이블에 적용됩니다.
> * 사용자 지정 피벗 테이블 테마는 구버전 Excel IO에서는 지원되지 않습니다.
## 코드 사용
다음 코드는 사용자 지정 피벗 테이블 테마를 관리하는 데 필요한 다양한 메서드를 보여줍니다.
1. 새 피벗 테이블 테마 추가
```javascript
const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
// "custom0"이라는 이름의 새 피벗 테이블 테마 추가
const pivotTableStyle = spread.customPivotTableThemes.add("custom0");
const firstColumnStripeStyle = new GC.Spread.Pivot.PivotTableStyle();
firstColumnStripeStyle.backColor = "skyblue";
pivotTableStyle.firstColumnStripeStyle(firstColumnStripeStyle);
```
2. 피벗 테이블 테마 가져오기
```javascript
// 피벗 테이블 테마 가져오기
const pivotTableStyle = spread.customPivotTableThemes.get("custom0");
```
3. 피벗 테이블 테마 적용
```javascript
// 피벗 테이블 생성
const sourceData = [["Date","Buyer","Type","Amount"],
["01-Jan","Mimi","Fuel",74],
["15-Jan","Mary","Food",235],
["17-Jan","Denny","Sports",20],
["21-Jan","Kelly","Books",125]];
activeSheet.setArray(0, 0, sourceData);
activeSheet.tables.add('sourceData', 0, 0, 5, 4);
// 피벗 테이블 테마 설정
const pivotTable = activeSheet.pivotTables.add(
"pivottable1",
"sourceData",
1,
1,
GC.Spread.Pivot.PivotTableLayoutType.compact,
GC.Spread.Pivot.PivotTableThemes.medium2
);
// 스타일을 피벗 테이블에 적용
pivotTable.theme("custom0");
```
4. 피벗 테이블 테마 수정
기존 피벗 테이블 스타일을 변경하면 해당 스타일이 적용된 모든 테이블에 자동으로 업데이트됩니다.
```javascript
// 피벗 테이블 테마 수정
const pivotTableStyle = spread.customPivotTableThemes.get("custom0");
pivotTableStyle.firstColumnStripeStyle().backColor = "red";
// 피벗 테이블 테마 업데이트
spread.customPivotTableThemes.update("custom0", new GC.Spread.Pivot.PivotTableTheme());
```
5. 기존 테마 삭제
사용자 지정 피벗 테이블 스타일을 삭제하면 해당 스타일을 사용 중이던 모든 테이블은 기본 스타일로 전환됩니다.
```javascript
// 피벗 테이블 테마 삭제
spread.customPivotTableThemes.remove("custom0");
```
6. 기본 테마 설정
```javascript
// 기본 피벗 테이블 테마 설정
spread.defaultPivotTableTheme("custom0");
```
## 디자이너에서 사용
SpreadJS 디자이너를 사용하여 사용자 지정 피벗 테이블 스타일을 포맷할 수도 있습니다. 아래 단계를 따르시기 바랍니다:
1. **디자인(DESIGN)** 탭의 **피벗테이블 스타일(PivotTable Styles)** 그룹에서 **피벗테이블 스타일(PivotTableStyles)** 버튼을 클릭합니다.
2. 드롭다운 화살표를 클릭하고 **새 피벗 테이블 스타일(New Pivot Table Style..)** 옵션을 선택하여 필요한 스타일 요소를 설정해 새 피벗 테이블 스타일을 추가합니다.
3. 사용자가 생성한 모든 피벗 테이블 스타일은 스타일 목록의 **사용자 지정(Custom)** 섹션에 표시됩니다.
4. 사용자 지정 피벗 테이블 스타일을 마우스 오른쪽 버튼으로 클릭하여, 필요에 따라 **적용, 수정, 복제, 삭제, 기본값으로 설정** 등의 작업을 수행할 수 있습니다.
>type=warning
> **참고:** 기본 제공 피벗 테이블 스타일은 수정하거나 삭제할 수 없습니다.