# 데이터 테이블 변환

## Content

SpreadJS는 일반 테이블과 데이터 테이블 간의 변환을 원활하게 수행할 수 있어, 동적 데이터 통합이나 정적 데이터 관리가 필요한 상황에서 유용합니다. 이 기능은 구조화된 데이터 바인딩이 필요한 애플리케이션(예: 실시간 분석, 보고) 또는 스냅샷 보존이 필요한 경우(예: 데이터 감사, 템플릿 재사용)에 필수적입니다. 변환 과정은 두 가지 방법으로 구현할 수 있습니다.

1. **API 기반 접근:** `convertToDataTable` 및 `convertFromDataTable`과 같은 전용 메서드를 사용하여 프로그래밍 방식으로 제어.
2. **디자이너 UI 조작:** SpreadJS 디자이너의 시각적 인터페이스를 통해 변환 수행.

이 가이드에서는 두 가지 접근 방식을 단계별로 설명하며, 실용적인 사용 사례와 기술적 정확성을 강조합니다.

## 테이블을 데이터 테이블로 변환

기존 테이블 데이터를 데이터 매니저 환경에 쉽게 통합할 수 있습니다. 이를 통해 데이터 매니저가 제공하는 컨트롤 직접 바인딩, 고급 필터링, 정렬, 그룹화 및 데이터 소스 조작 기능을 활용하면서 시트 상의 시각적 테이블 표현을 계속 사용할 수 있습니다.

### 주요 정책 및 주의사항

테이블을 데이터 테이블로 변환할 때 다음 사항을 유의하세요.

* **바인딩되지 않은 테이블:** 이미 데이터 소스에 바인딩되지 않은 일반 시트 테이블만 변환 가능.
* **데이터 및 수식 초기화:** 변환 후, 원래 일반 테이블의 데이터 범위에 있는 데이터와 수식은 시트 셀에서 한 번 삭제되며, 데이터 매니저 테이블에서 가져온 데이터와 열 정의로 테이블이 채워집니다.
* **데이터 매니저 테이블 생성:** `spread.dataManager().tables` 컬렉션에 새로운 테이블 생성.
* **바인딩:** 원래 시트 테이블은 새로 생성된 데이터 매니저 테이블에 바인딩됩니다. 시트 테이블은 이제 데이터 매니저가 관리하는 데이터의 뷰 역할을 수행.
* **이름 지정:** 새 데이터 매니저 테이블은 원래 테이블과 동일한 이름을 사용하려 시도합니다. 동일한 이름의 테이블이 이미 존재하면, 기존 최대 숫자 +1을 붙여 자동으로 고유 이름으로 조정됩니다.

### API 사용

다음 코드를 통해 일반 테이블을 데이터 테이블로 변환할 수 있습니다.

```javascript
// 시트에 일반 테이블 추가
var sheet = spread.getActiveSheet();
sheet.tables.add('table1', 0, 0, 4, 4, GC.Spread.Sheets.Tables.TableThemes.light1);

// 테이블에 값 설정
sheet.setArray(0, 0, [
      ['Id', 'Name', 'Age', 'Grade'],
      [1000, 'Tom', 23, 98],
      [1001, 'Bob', 22, 80],
      [1002, 'Tony', 23, 99]
]);

let dmTable = spread.dataManager().tables['table1']; // dmTable은 undefined
// 일반 테이블을 데이터 테이블로 변환하고 데이터 매니저 테이블 생성 및 바인딩
let table = sheet.tables.convertToDataTable('table1');
// table1에서 데이터 매니저 테이블이 생성됨
let bindingTable = table.getBindingSource(); // 일반 테이블이 데이터 테이블로 변환됨
dmTable = spread.dataManager().tables['table1']; // dmTable이 생성됨
// bindingTable === dmTable // true 반환. table에서 가져온 bindingTable은 데이터 매니저의 dmTable과 동일
```

### 디자이너 사용

디자이너를 통해 시각적으로 변환을 수행할 수 있습니다.

1. **테이블 선택:** 변환할 일반 테이블 내 아무 셀이나 클릭. 그러면 리본의 **Table Design** 탭이 활성화됩니다. **Table Design** 탭의 **Tables Binding** 박스 내 **Binding Source**가 비어 있음.
    ![5.2.93b35a.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/5.2.93b35a.1fb005.png?width=600)
2. **변환 옵션 접근:**
    * 리본의 **Table Design** 탭 → "Table Binding" 섹션 → **"Convert to Data Table"** 버튼 클릭.
        ![5.3.04d0ff.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/5.3.04d0ff.d167dd.png?width=600)
    * 또는 테이블에서 마우스 오른쪽 클릭 → **"Table"** 서브 메뉴 → **"Convert to Data Table"** 선택.
        ![image.309a89.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.309a89.f5b1f0.png?width=600)
3. **OK 클릭:** 변환 확인.
    ![image.1f15a6.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.1f15a6.5f55c6.png?width=250)
4. 변환 완료. 이전에 비어있던 바인딩 소스에 "Table2"가 표시되며, 원래 일반 테이블이 데이터 테이블로 성공적으로 변환됨.
    ![5.6.82217d.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/5.6.82217d.cef6c1.png?width=600)
    ![image.909744.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.909744.2648b7.png?width=600)

## 데이터 테이블을 일반 테이블로 변환

SpreadJS는 시트 테이블을 데이터 매니저 소스와 연결 해제할 수 있습니다. 데이터 바인딩된 테이블을 변환하면:

* 테이블에 표시된 데이터와 열 수식이 테이블이 차지하는 시트 범위의 셀에 직접 복사되어 설정됩니다.
* 시트 테이블 인스턴스가 일반 테이블로 변경되며, 더 이상 데이터 매니저에 바인딩되지 않습니다.
* 원본 데이터 매니저 테이블은 삭제되지 않고 유지되며, 다른 용도로 계속 사용 가능.

이 기능은 특정 테이블 인스턴스에서 데이터 소스로부터 스냅샷을 가져와, 데이터 매니저 연결 없이 정적으로 작업하고자 할 때 유용합니다.

### API 사용

다음 코드를 통해 데이터 바인딩 테이블을 일반 테이블로 변환할 수 있습니다.

```javascript
var sheet = spread.getActiveSheet();

// 데이터 소스 추가
const productsTable = spread.dataManager().addTable("products", {
  remote: {
         read: {
         url: 'https://northwind.vercel.app/api/products'
        }
  }
});

productsTable.fetch().then(()=>{
// 일반 테이블 추가 및 데이터 매니저 테이블 바인딩
sheet.tables.addFromDataSource("Table1", 0, 0, "products", GC.Spread.Sheets.Tables.TableThemes.medium7);

// 데이터 매니저 테이블을 바인딩한 테이블을 일반 테이블로 변환
let table = sheet.tables.convertFromDataTable('Table1');
let bindingTable = table.getBindingSource(); // 데이터 테이블이 일반 테이블로 변환되면 bindingTable은 null
});
```

### 디자이너 사용

디자이너 를 통해 시각적으로 변환을 수행할 수 있습니다.

1. **테이블 선택:** 변환할 데이터 테이블 내 아무 셀이나 클릭. **Table Design** 탭이 활성화됨.
    ![4.1.9b0807.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/4.1.9b0807.0bde85.png?width=600)
2. **변환 옵션 접근:**
    * 리본의 **Table Design** 탭 → "Table Binding" 섹션 → **"Convert from Data Table"** 버튼 클릭.
        ![4.2.fd44d3.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/4.2.fd44d3.3640a8.png?width=600)
    * 또는 테이블에서 마우스 오른쪽 클릭 → **"Table"** 서브 메뉴 → **"Convert from Data Table"** 선택.
        ![image.b7e434.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.b7e434.416e3a.png?width=600)
3. **OK 클릭:** 변환 확인.
    ![image.d076e1.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.d076e1.b697b0.png?width=250)
4. 변환 완료. **Table Design** 탭의 **Tables Binding** 박스 내 **Binding Source**가 비어 있음.
    ![4.3.6b0de3.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/4.3.6b0de3.769ce9.png?width=600)