# 테이블 시트 관계

## Content

테이블 시트는 관계를 생성하여 동일한 뷰에 여러 데이터 테이블을 바인딩할 수 있는 기능을 제공합니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-relationview-flowchart.png)

위의 순서도 이미지에 표시된 것처럼, 테이블 시트 관계는 관련 테이블과 관련 필드를 정의하며, 기본 키 및 외래 키 관계가 있는 테이블 구조에서 널리 사용될 수 있습니다. 관계에 포함된 두 데이터 테이블은 데이터 매니저 내에서 양방향 바인딩으로 작동하며, 두 테이블의 모든 속성에 접근할 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-relationview.gif)

다음 단계는 "Sales"와 "Customers" 테이블 간에 테이블 시트 관계를 추가하는 방법을 보여줍니다.

1. [addTable](/spreadjs/api/classes/GC.Data.DataManager#addTable) 메서드를 사용하여 여러 테이블을 data manager에 추가합니다. [lookup](/spreadjs/docs/features/tablesheet/tablesheet-relationships/look) 열을 사용하여 열 값을 표현하고 수정합니다.

    ```javascript
    //dataManager에 고객 테이블 추가
    var customerTable = dataManager.addTable("customerTable", {
        remote: {
            read: {
                url: 'https://demodata.grapecity.com/wwi/api/v1/customers'
    
            }
        }
    });
    
    // dataManager에 세일즈 테이블 추가
        var salesTable = dataManager.addTable("salesTable", {
                    remote: {
                        read: {
                            url: 'https://demodata.grapecity.com/wwi/api/v1/sales?PageNumber=10&PageSize=500'
                        }
                    },
                    schema: {
                        columns: {
                            customerKey: {
                                //                lookup: "myCustomer"
                                lookup: {
                                    name: "myCustomer", columns: [
                                        { value: "customerKey", width: 100, caption: "Customer Key" },
                                        { value: "customer", width: "*", caption: "Customer" },
                                        { value: "category", width: 100, caption: "Category" }
                                    ]
                                }
                            }
                        }
                    }
    ```
2. [addRelationship](/spreadjs/api/classes/GC.Data.DataManager#addRelationship) 메서드를 사용하여 테이블 간 관계를 추가합니다.
    이 메서드는 소스 테이블, 필드 이름, 관계 이름, 대상 테이블, 필드 이름 및 관계 이름을 인수로 받습니다.
    아래 코드 예제에서는 `"customerTable"`이 대상 테이블이고 `"customerKey"`가 두 테이블을 연결하는 외래 키입니다.

    ```javascript
    //세일즈 테이블과 고객 테이블 사이 관계 추가
    dataManager.addRelationship(salesTable, "customerKey", "myCustomer", customerTable, "customerKey", "mySales");
    ```
3. 관계형 View에서 사용될 다중 열 드롭다운 뷰를 생성합니다.

    ```javascript
    //사용자 정의 뷰 추가
    customerTable.fetch().then(function () {
        var selectView = customerTable.addView("customersView",
            [
    { value: 'customerKey' },
    { value: 'customer' },
    { value: 'category' }
            ]);
    
        // 관계형 뷰 다중 열 드롭다운 생성 
        var multiSelectStyle = {
            formatter: '{{=IFERROR(CONCAT([@myCustomer.customer], ", ", [@myCustomer.customerKey]), "")}}',
        };
    ```
4. 테이블 시트에 뷰를 바인딩합니다.

    ```javascript
    var myView = salesTable.addView("myView", [
        { value: "saleKey", width: 100, caption: "Sale Key" },
        { value: "salesPerson", width: 150, caption: "Sales Person" },
        { value: "customerKey", width: 350, caption: "Customer Information", style: multiSelectStyle },
        { value: "address", width: 350, caption: "Address" },
        { value: "stockItem", width: 350, caption: "Stock Item" },
        { value: "quantity", width: 100, caption: "Quantity" }
    ]);
    myView.fetch().then(function () {
        console.log(myView);
        // 테이블 시트에 사용자정의 뷰 설정
        tableSheet.setDataView(myView);
    });
    ```