# 테이블 시트 생성

## Content

이 항목에서는 아래에 설명된 사용 사례 시나리오를 통해 스프레드시트에서 테이블 시트를 생성하는 방법을 설명합니다.

## 사용 사례 시나리오

물류 수입 및 유통 회사가 백엔드 데이터베이스에 있는 고객 정보와 관련된 대량의 데이터를 처리하고자 한다고 가정해보겠습니다.
테이블 시트는 대량의 데이터를 표시하고 관리하는 데 도움이 되며, 사용자가 데이터를 정렬, 필터링, 그룹화하여 분석할 수 있도록 합니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-basic.png)

테이블 시트를 생성하려면 아래 단계를 따르시기 바랍니다.

1. [Workbook.addSheetTab](/spreadjs/api/v18/classes/GC.Spread.Sheets.Workbook#addSheetTab) 메서드를 사용하여 `SheetType`이 `"tableSheet"`인 시트를 추가해 테이블 시트를 초기화합니다.

    ```javascript
        //tablesheet 초기화
        var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
    ```
2. [DataManager](/spreadjs/api/v18/classes/GC.Data.DataManager#_ctor) 메서드를 사용하여 데이터 매니저를 초기화합니다.

    ```javascript
        //데이터 매니저 초기화
        var dataManager = spread.dataManager();
    ```
3. [addTable](/spreadjs/api/v18/classes/GC.Data.DataManager#addTable) 메서드를 사용하여 데이터 매니저에 테이블을 추가합니다. 이 메서드는 테이블 이름(문자열)과 **IDataSourceOption** 인터페이스 옵션을 인자로 받습니다.
<br>
    `IDataSourceOption` 인터페이스는 두 가지 유형의 데이터 소스를 설정할 수 있습니다:
    * `data` – JSON의 객체 배열, CSV 문자열 또는 XML 형식의 로컬 데이터 소스
    * `remote` – REST API, OData, GraphQL을 지원하는 원격 데이터 소스

    ```javascript
        //데이터 매니저에 데이터 추가
        var myTable = dataManager.addTable("myTable", {
            remote: {
                read: {
                    url: 'https://demodata.grapecity.com/wwi/api/v1/customers'
                }
            }
        });
    ```

    데이터 연산에 대한 자세한 내용은 “[데이터 작업](/spreadjs/docs/v18/features/tablesheet/data-operations)” 항목을 참고하시기 바랍니다.
4. [addView](/spreadjs/api/v18/classes/GC.Data.Table#addView) 메서드를 사용하여 데이터 매니저의 테이블에 뷰(View)를 추가하고, 열 정보를 정의합니다.
<br>
    기본적으로 뷰는 테이블의 모든 기본 열을 포함합니다. 열 속성과 기타 뷰 옵션에 대한 자세한 내용은 [테이블 시트 뷰](/spreadjs/docs/v18/features/tablesheet/tablesheet-views) 항목을 참고하시기 바랍니다.

    ```javascript
    var view = myTable.addView("myView"); // 이 뷰는 테이블의 모든 기본 열을 포함
    ```
5. [fetch](/spreadjs/api/v18/classes/GC.Data.Table#fetch) 메서드를 사용하여 데이터 매니저 테이블에서 데이터를 가져온 후, [setDataView](/spreadjs/api/v18/classes/GC.Spread.Sheets.TableSheet.TableSheet#setDataView) 메서드를 사용하여 가져온 뷰를 테이블 시트에 바인딩합니다.
<br>
    `fetch` 메서드는 테이블과 뷰 각각에 대해 호출할 수 있으며, 해당 데이터가 반환됩니다.

    ```javascript
    //테이블 시트에 뷰 바인딩
    myTable.fetch().then(function () {
        var view = myTable.addView("myView");
        sheet.setDataView(view);
    });
    ```