# 표시/접기 버튼 추가

## Content

리포트 시트의 표시/접기 버튼을 사용하면 특정 셀을 확장하거나 축소할 수 있습니다. 단, 리포트 시트에서는 Preview 렌더 모드에서만 셀의 표시/접기 기능이 동작합니다.
`IReportTemplateCell` 인터페이스의 `showCollapseButton` 속성을 `true`로 설정하면 템플릿 시트에 표시/접기 버튼을 추가할 수 있습니다.
이 `showCollapseButton` 속성은 리포트에서 해당 셀의 자식 셀을 접거나 펼칠 수 있는 버튼을 표시할지 여부를 제어합니다.

```auto
// 템플릿 시트에서 표시/접기 버튼을 설정
const columns = ['shipCountry', 'shipCity'];
templateSheet.setTemplateCell(0, 0, {
     type: 'Group',
     binding: 'Orders[shipCountry]',
     showCollapseButton: true,
});
templateSheet.setTemplateCell(0, 1, {
      type: 'List',
      binding: 'Orders[shipCity]',
});
reportSheet.refresh();
```

다음 이미지는 `shipCountry` 항목에 표시/접기 버튼이 추가된 결과를 보여줍니다:
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.84063c.png)

>type=warning
> **참고:** SpreadJS는 추가적으로 `ReportSheet` 클래스에서 두 가지 메서드인 `getCollapseState`와 `toggleCollapseState`를 제공합니다. 이 메서드를 사용하여 셀의 현재 확장/축소 상태를 확인하거나, 특정 셀의 확장 상태를 전환할 수 있습니다.

### 셀 확장 및 축소

SpreadJS는 템플릿 시트에서 각 그룹화된 셀의 **가시성을 동적으로 제어**할 수 있는 기능을 제공합니다.
이를 통해 리포트 시트가 로드될 때 **해당 셀 그룹이 확장된 상태로 표시될지, 축소된 상태로 표시될지를** 정의할 수 있습니다. 이때 사용하는 속성이 **IReportTemplateCell** 인터페이스의 **initialExpansionState** 속성입니다.
이 기능은 특히 **트리 그룹 리포트(Tree Group Report)**, **크로스 리포트(Cross Report)**, **계층형 데이터를 가진 표준 리포트** 등을 설계할 때 유용합니다.
기본적으로 **initialExpansionState** 속성은 'Expanded'로 설정되어 있어, 별도 설정이 없다면 리포트 로드시 그룹화된 셀은 확장된 상태로 표시됩니다.

```javascript
// 그룹화된 셀의 초기 확장 상태를 Expanded로 설정
templateSheet.setTemplateCell(r + 2, 0, {
        type: 'Group',
        binding: `Sales[${x}]`,
        spillDirection: 'Vertical',
        context: {
        vertical: r > 0 ? `A${r + 2}` : 'Default',
        },
        showCollapseButton: r !== 3,
        initialExpansionState: 'Expanded,
});
```

다음 이미지는 리포트가 처음 로드될 때 그룹화된 셀이 확장된 상태로 표시되는 모습을 보여줍니다:
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.93fb4f.png)

>type=warning
> 참고:
>
> * `initialExpansionState` 속성은 Preview 렌더링 모드에서만 설정할 수 있습니다.
> * 이 옵션은 `showCollapseButton` 옵션이 `false`로 설정되어 있더라도 정상적으로 작동합니다.