# 테이블 시트

## Content

SpreadJS 디자이너 컴포넌트는 워크북에 테이블 시트를 추가하는 기능을 제공합니다.
**테이블 시트** 리본 버튼은 **삽입** 탭의 **시트** 그룹에서 찾을 수 있습니다. 이 버튼을 클릭하면 열린 워크북에 **TableSheet1** 탭이 추가되고, **테이블 시트 디자인** 탭이 활성화됩니다.
![1.01ef09.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/1.01ef09.626ee2.gif?width=800)
**데이터** 탭의 **데이터 바인딩**(Data Binding) 그룹에 있는 **데이터 원본**(DataSource) 리본 버튼을 클릭하여 데이터 소스를 생성할 수 있습니다. **데이터 원본**(DataSource) 탭이 나타나면, 여기서 테이블을 추가하고 CRUD(생성, 읽기, 수정, 삭제) 기능을 위한 원격 URL을 설정할 수 있습니다. 또한, **열**(Columns) 탭을 통해 테이블 데이터를 가져올 수도 있습니다.
![2.84222c.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/2.84222c.47081b.gif?width=800)
열(Column) 항목을 클릭하면 해당 열의 속성(Properties)과 스키마 유형(Schema Type)을 설정하거나 관계(Relationship)를 추가할 수 있습니다. 목록 맨 끝에 있는 ‘**계산 열 추가**(Add Calculate Column)’를 클릭하여 계산된 열도 추가할 수 있습니다.
![3.2387ea.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/3.2387ea.087363.gif?width=800)
디자이너 컴포넌트에서 데이터 소스를 추가한 후, 사용자는 디자이너 컴포넌트 **테이블 시트** 패널을 통해 테이블 시트에 데이터 소스를 바인딩할 수 있습니다. **바인딩 표**(Binding Table) 드롭다운에서 기존 테이블 데이터 소스를 선택하거나 새 테이블 데이터 소스를 생성하세요. 그러면 이전에 비어 있던 영역에 테이블 시트 뷰가 로드됩니다.
![4.b7d9d4.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/4.b7d9d4.5c4f74.gif?width=800)
테이블 시트의 필드 영역과 그룹 영역은 런타임 환경과 동일하게 작동합니다. 자세한 내용은 [테이블 시트 컴포넌트](/spreadjs/docs/features/tablesheet/tablesheet-components)를 참조하세요.

> **참고**: 데이터 원본(DataSource) 시트는 SSJSON 또는 Excel 파일로 내보내지 않지만, 테이블 옵션이 적용된 데이터 원본(DataSource) 테이블은 SSJSON에 포함됩니다.

## 데이터 원본 열에서 관계 표시하기

**SpreadJS**는 디자이너 컴포넌트와 템플릿 디자이너 테이블 시트 패널 모두에서 **데이터 원본(Data Source)** 열 목록에 관계를 열로 표시할 수 있도록 지원합니다.
![5.01dff4.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/5.01dff4.df4722.gif?width=800)
데이터 소스를 생성하려면 **DATA > Data Binding** 탭 그룹에서 **DataSource** 리본 버튼을 클릭하세요. 그러면 **DataSource** 탭이 표시되며, 여기서 테이블을 추가하고 원격 URL을 설정하여 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 사용할 수 있습니다. 또한 **Columns** 탭을 통해 테이블 데이터를 가져올 수도 있습니다.
![2.84222c.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/2.84222c.775453.gif?width=800)
열 항목을 클릭하면 해당 열의 속성, 스키마 유형을 확인하거나 수정할 수 있으며, 관계를 추가할 수도 있습니다. 또한 목록 끝의 **Add Calculate Column**을 클릭하여 계산 열을 추가할 수 있습니다.
![3.2387ea.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/3.2387ea.9f291b.gif?width=800)
디자이너 컴포넌트에서 데이터 소스를 추가한 후, 사용자는 **디자이너 테이블 시트 패널**을 통해 테이블 데이터 소스를 **테이블 시트**에 바인딩할 수 있습니다. **Binding Table** 드롭다운에서 기존 테이블 데이터 소스를 선택하거나 새 테이블 데이터 소스를 생성하면, 이전에 비어 있던 영역에 TableSheet 뷰가 로드됩니다.
![4.b7d9d4.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/4.b7d9d4.fa972e.gif?width=800)
테이블 시트의 **필드 영역(field area)**과 **그룹 영역(group area)**은 런타임 환경과 동일하게 작동합니다. 자세한 내용은 [테이블 시트 구성요소](/spreadjs/docs/features/tablesheet/tablesheet-components)를 참조하세요.

> **Note:** DataSource 시트 자체는 SSJSON 또는 Excel 파일로 내보낼 수 없지만, DataSource 테이블과 테이블 옵션은 SSJSON에 포함됩니다.

## 디자이너 패널에서 관계 표시하기

SpreadJS는 **테이블 시트 디자이너** 사이드 패널에서 관계(Relationship)를 표시합니다. UI 공간을 절약하기 위해 사이드 패널에는 관계 열의 이름과 확장/축소 버튼만 표시됩니다. 필요할 때 관계 열 노드를 확장하거나 축소하여 하위 노드를 쉽게 확인할 수 있습니다.
![6.4adf9c.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/6.4adf9c.f46efd.gif?width=800)
사이드 패널에서는 부모 열 관계 노드 간의 관계를 트리 구조로 보여줍니다. 또한 테이블 시트에서 열을 선택하거나 해제할 수 있는 체크박스가 제공됩니다.

* 메인 관계 열을 선택하면 테이블 시트에 객체 형태의 열이 추가됩니다.
* 하위 관계 열을 선택하면 해당 열이 추가되며, 하위 열 이름은 `"."`를 사용해 계층 구조를 나타냅니다.

## 관계 열 Drag & Drop

사용자는 **테이블 시트 디자이너** 사이드 패널의 **Binding Table** 필드 및 그룹 영역에서 관계 노드를 드래그 앤 드롭할 수 있습니다.
사이드 패널에서 관계 노드를 드래그하는 방법:

* **Binding Table 필드 내에서 이동**

![7.cbfec5.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/7.cbfec5.9cecd4.gif)

* **Groups 영역으로 이동**

![8.dab31d.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/8.dab31d.e08088.gif)
관찰되는 바와 같이, 드래그 시 표시되는 힌트는 관계의 값을 사용하여 그룹 영역에서 이름 중복을 방지합니다.