# 테이블 시트 디자인 모드

## Content

SpreadJS는 테이블 시트 뷰에서 자유 헤더 영역과 다중 헤더를 생성하고 편집할 수 있는 디자인 모드를 제공합니다. **테이블 시트 디자인(TABLE SHEET DESIGN)** 탭의 **디자인 모드(Design Mode)** 리본 버튼을 클릭하여 디자인 모드에 진입할 수 있습니다.
![9.7fbc71.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/9.7fbc71.040c04.png?width=800)
선택한 행 앞에 새 행을 추가하려면 행 머리글의 “+” 버튼을 클릭하세요. 마찬가지로, 선택한 행을 삭제하려면 행 머리글의 “-” 버튼을 클릭합니다.
![10.3d9919.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/10.3d9919.9201f9.png?width=800)
변경 사항을 적용하고 디자인 모드를 종료하려면, 다시 한 번 “디자인 모드(Design Mode)” 리본 버튼을 클릭하세요.

## 자유 헤더 영역

자유 헤더 영역의 편집 상태로 들어가려면 셀을 더블 클릭하세요. 값은 언제든지 수정할 수 있으며, 스타일 적용과 열 그룹화도 지원합니다.
![11.be4772.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/11.be4772.791109.gif?width=800)

## 다중 열 헤더

여러 열에 대해 같은 값을 각 열 셀에 입력하면 자동 병합이 되어 다중 열 헤더 캡션을 추가할 수 있습니다. 값은 디자인 모드에서만 수정 가능하며 스타일은 지원되지 않습니다. 다중 헤더 구간에 유일한 행이 비어 있을 경우 기본 캡션이 사용됩니다.
![12.34e5e7.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/12.34e5e7.4af984.gif?width=800)

## 그룹 레이아웃 설정

**테이블 시트 디자인(TABLE SHEET DESIGN)** 탭의 **그룹(Group)** 섹션에 있는 **그룹 레이아웃(Group Layout)** 드롭다운에서 원하는 레이아웃을 선택하여 그룹화된 데이터의 표시 방식을 최적화할 수 있습니다.
![13.0c29be.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/13.0c29be.46e02b.png?width=800)
그룹 레이아웃이 **개요 형식(Outline)** 또는 **압축 형식(Condensed)** 모드로 설정된 경우, **위치(Group Spacing)** 옵션에서 원하는 값을 선택하여 그룹 간의 간격을 조절할 수 있습니다.
![14.8d6b47.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/14.8d6b47.e84504.png?width=800)
SpreadJS 디자이너 컴포넌트는 테이블 시트 오른쪽에 위치한 테이블 시트 패널을 사용하여 집계 수식, 캡션 또는 기타 그룹화 필드를 설정할 수 있도록 지원합니다.
![15.3705c5.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/15.3705c5.1c3962.png?width=300)
SpreadJS에서 다중 캡션 헤더, 자유 헤더 영역 및 기타 그룹 레이아웃 설정을 적용하는 방법은 [테이블 시트 뷰](/spreadjs/docs/features/tablesheet/tablesheet-views)를 참조하세요.

## 수식 실행

데이터 원본(DataSource)의 **열(Columns)** 탭에서 수식 실행이 필요한 열을 선택한 후, 아래로 스크롤하여 **수식 실행** 섹션에서 수식을 정의할 수 있습니다.
![16.084085.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/16.084085.5782c8.png?width=400)
'**언제(When)**'에서 해당 옵션을 선택하고, **수식(Formula)** 텍스트 박스에 수식을 입력합니다. “**임의 필드(Any Field)**” 체크박스를 선택하면 필드의 어떤 변경 사항이든 수식을 실행하도록 감지합니다. 또는 드롭다운 메뉴에서 개별 필드를 선택할 수도 있습니다.
![17.9be3c1.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/17.9be3c1.97964f.png?width=400)