# 숨겨진 행/열 표시

## Content

보통 스프레드시트에서 숨김으로 설정된 행과 열은 화면에 표시되지 않습니다. 그러나 복잡한 보고서 템플릿을 디자인할 때, 숨겨진 행이나 열이 완전히 보이지 않으면 해당 영역의 내용을 편집하기 어렵습니다.
리포트 시트의 "**숨겨진 행/열 표시(Show Hidden Rows and Columns)**" 기능은 리포트 시트 템플릿의 디자인 뷰에서 **숨김으로 표시된 행과 열의 가시성을 전환**할 수 있게 해줍니다. 이 기능을 사용하면 최종 출력 상태와 관계없이 템플릿의 모든 영역에 쉽게 접근하여 템플릿을 작성하고 수정할 수 있습니다.
![hidden2.4c9849.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/hidden2.4c9849.1141d4.gif?width=1100)
주요 기능:

* **디자인 타임 가시성:** 활성화하면 이전에 숨김으로 설정된 행과 열이 디자인 뷰에 표시됩니다.
* **미리보기 영향 없음:** 이 기능은 최종 보고서 미리보기나 출력에 영향을 주지 않습니다. 숨김 처리된 행과 열은 항상 최종 미리보기와 보고서 생성 시 숨김 상태를 유지합니다.
* **시각적 표시:** 표시된 숨김 행과 열은 일반 셀과 구별되는 스타일로 렌더링됩니다.
* **편집 가능:** 표시된 상태에서 해당 행과 열의 내용과 속성을 일반 셀처럼 편집할 수 있습니다.
* **스타일 사용자 지정:** 표시된 숨김 행과 열에 적용되는 배경색, 테두리, 글꼴 효과 등 스타일을 자유롭게 설정할 수 있습니다.

***

## 코드 사용 예제

리포트 시트 디자인 템플릿에서 숨김 행과 열의 표시를 제어하고 커스터마이징하려면 `reportSheet` 객체의 [options](/spreadjs/api/v18/interfaces/GC.Spread.Report.IReportOptions) 속성을 사용합니다.

### 기능 활성화 및 비활성화

특정 행/열을 숨긴 보고서 템플릿을 설정하는 예제:

```javascript
const reportSheet = spread.getActiveSheetTab();
const template = reportSheet.getTemplate();

// 템플릿 셀 값 설정
template.setTemplateCell(2, 0, { 
    binding: "Orders[orderId]",
    type: "Group",
    filter: {
        condition: {
            and: [
                { "parameter": "startDate", "column": "orderDate", "operator": "GreaterThan" },
                { "parameter": "endDate",   "column": "orderDate", "operator": "LessThan" },
                { "parameter": "customerId","column": "customerId","operator": "Equal" }
            ]
        }
    }
});

// 컬럼 바인딩 설정
const columns = ['customerId', 'orderDate', 'freight', 'shipName', 'shipCity', 'shipCountry'];
columns.forEach((item, index) => {
    template.setTemplateCell(2, index + 1, {
        type: "Group",
        binding: `Orders[${item}]`
    })
});

// 보고서 파라미터 설정
reportSheet.parameter({
    startDate: new Date("1997-01-01"),
    endDate: new Date("1998-01-01"),
    customerId: "VINET"
});

// 행 4, 열 4 숨김
template.setRowVisible(4, false);
template.setColumnVisible(4, false);
```

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.f458ff.png?width=900)
기본적으로 [showHiddenRowCol](/spreadjs/api/v18/interfaces/GC.Spread.Report.IReportOptions#showhiddenrowcol) 파라미터는 `false`로 설정되어 있으며, 이는 명시적으로 숨긴 행/열이 현재 뷰에 표시되지 않음을 의미합니다.
숨겨진 요소를 확인하려면 해당 파라미터를 `true`로 변경합니다.

```javascript
reportSheet.options.showHiddenRowCol = true;
reportSheet.refresh(); // 시트 갱신
```

> **참고:** `showHiddenRowCol` 속성을 설정하면 ReportSheet 표시가 자동으로 갱신됩니다.

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.e71b08.png?width=900)
이렇게 하면 숨김 행과 열이 일시적으로 표시되어 필요에 따라 검토하거나 작업할 수 있습니다.
또한 디자인 모드에서 `getRowVisible` 및 `getColumnVisible` 메서드의 반환 값에도 영향을 줍니다.

```javascript
template.getRowVisible(4); // true
```

***

### 표시된 숨김 요소 스타일 사용자 지정

리포트 시트는 기본 [hiddenRowColStyle](/spreadjs/api/v18/interfaces/GC.Spread.Report.IReportOptions#hiddenrowcolstyle)을 사용하며, 사용자 정의 스타일로 변경할 수도 있습니다.

```javascript
// 기본 hiddenRowColStyle
hiddenRowColStyle = {
  backColor: { type: GC.Spread.Sheets.PatternType.lightDown }
}
```

스타일을 커스터마이징하려면:

```javascript
var style = new GC.Spread.Sheets.Style();
style.backColor = "#B5B5B5";
style.foreColor = "#FFFFFF";
style.fontSize = "24px";

reportSheet.options.hiddenRowColStyle = style;
reportSheet.refresh();
```

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.b69041.png?width=900)

***

## 디자이너 사용

### 기능 활성화 및 비활성화

디자인 모드에서는 **Report Sheet Design** 리본에서 `'Show Hidden Row/Column'` 체크박스를 선택하여 숨겨진 행/열을 표시할 수 있습니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.4746d3.png?width=1200)
이 기능은 최종 보고서 미리보기나 출력에는 영향을 주지 않습니다. 숨김 행과 열은 미리보기와 보고서 생성 시 항상 숨김 상태를 유지합니다.
![hidden2.a81b6b.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/hidden2.a81b6b.29c0e8.gif?width=1200)

***

### 표시된 숨김 요소 스타일 사용자 지정

리본에서 `'Hidden Row/Column Style'` 체크박스를 선택하면 팝업 다이얼로그에서 직접 스타일을 설정할 수 있습니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.4c9b68.png?width=1200)
클릭하면 팝업 대화상자 내에서 설정을 직접 사용자 지정할 수 있습니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.9d0d3b.png?width=650)