# 조회 열

## Content

Lookup 열은 데이터 소스 스키마에서 `"lookup"`으로 표시할 수 있는 열이며, 테이블 시트에서 콤보박스 셀 타입 또는 다중 열 드롭다운 리스트로 표시할 수 있습니다. Lookup 열을 사용하면 테이블 시트 뷰에서 고정된 lookup 배열이나 관련된 행 집합에서 열 값을 효율적으로 선택할 수 있습니다. 이 Lookup 열 개념은 테이블 시트의 [교차 열](/spreadjs/docs/v19/features/tablesheet/tablesheet-relationships/ts-crosscolumn) 기능에서 도입되었습니다.
테이블 시트에서는 아래와 같은 방법으로 열을 `"lookup"`으로 표시할 수 있습니다:

* **배열로 설정**

열의 lookup이 데이터 소스 스키마에서 배열일 경우, 해당 열에는 자동으로 콤보박스 셀 타입이 적용되며, lookup 배열의 모든 항목이 콤보박스에 표시됩니다.
![array-lookup.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/array-lookup.121670.png)
다음 코드는 테이블 시트에서 lookup 배열을 설정하는 방법을 보여줍니다. 예를 들어, Type 열을 lookup으로 표시하고 배열 값을 설정할 수 있습니다.

```JavaScript
 var workItemTable = dataManager.addTable("WorkItems", { 
        data: [ 
            { 
                "ID": 1, 
                "Date": "9/12/2020", 
                "Description": "Know your numbers", 
                "TotalPoints": 10, 
                "Type": "Homework" 
            }, 
            //... 
        ], 
        schema: { 
            columns: { 
                Date: { dataType: "date" }, 
// set lookup column as an array 
                Type: { lookup: ["Homework", "Quiz", "Exam"] } 
            } 
        } 
    }); 
```

* **관계 이름으로 설정**

두 테이블 간의 관계를 설정할 때, 열의 lookup을 관계 이름으로 지정할 수 있습니다. 이 경우 셀 버튼과 다중 열 드롭다운이 자동으로 적용되며, 드롭다운에는 관련 테이블의 기본 열이 표시됩니다.
![relationship-students.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/relationship-students.6815ab.png)
다음 예제에서는 Students 테이블과 Grades 테이블 간의 관계를 생성하고, Grades 테이블의 `Student ID` 열을 lookup으로 지정합니다. 그러면 Students 테이블의 데이터가 드롭다운에 표시됩니다.

```JavaScript
var studentTable = dataManager.addTable("Students", { 
        data: [ 
            { 
                "ID": 1, 
                "Name": "Ellen Robinson" 
            }, 
            //... 
        ] 
    }); 
    var gradeTable = dataManager.addTable("Grades", { 
        data: [ 
            { 
                "StudentID": 1, 
                "WorkItemID": 1, 
                "Grade": 4 
            }, 
            //... 
        ], 
        schema: { 
            columns: { 
                StudentID: { 
                    lookup: 'student' 
                } 
            } 
        } 
    }); 
    dataManager.addRelationship(gradeTable, "StudentID", "student", studentTable, "ID", "grades"); 
```

* **옵션으로 설정**

lookup을 관계 이름과 열 옵션을 포함한 객체로 지정할 수 있습니다. 이 경우 셀 버튼과 다중 열 드롭다운이 자동으로 적용되며, 드롭다운에는 지정한 열이 표시됩니다. 옵션에서 허용되는 열 속성은 `value`, `width`, `visible`, `caption` 입니다.
![lookup-option-relationname.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/lookup-option-relationname.9ce76c.png)
다음 예제에서는 WorkItems 테이블과 Grades 테이블 간의 관계를 생성하고, Grades 테이블의 `WorkItem ID` 열을 lookup 옵션으로 지정하여 드롭다운에 표시할 열을 정의합니다.

```JavaScript
var workItemTable = dataManager.addTable("WorkItems", { 
        data: [ 
            { 
                "ID": 1, 
                "Date": "9/12/2020", 
                "Description": "Know your numbers", 
                "TotalPoints": 10, 
                "Type": "Homework" 
            }, 
            //... 
        ] 
    }); 
    var gradeTable = dataManager.addTable("Grades", { 
        data: [ 
            { 
                "StudentID": 1, 
                "WorkItemID": 1, 
                "Grade": 4 
            }, 
            //... 
        ], 
        schema: { 
            columns: { 
                WorkItemID: { 
                    // lookup: { name: 'workItem', columns: ["ID", "Description", "TotalPoints", "Type"]} 
                    lookup: { 
                        name: 'workItem', columns: [ 
                            { value: "ID" }, 
                            { value: "Description", width: 150 }, 
                            { value: "TotalPoints", width: 100 }, 
                            { value: "Type", width: 150, caption: "WorkItem Type" } 
                        ] 
                    } 
                } 
            } 
        } 
    }); 
    dataManager.addRelationship(gradeTable, "WorkItemID", "workItem", workItemTable, "ID", "grades"); 
```


## SpreadJS 디자이너 사용하기

SpreadJS 디자이너에서는 **데이터 원본(DataSource)** 탭을 통해 테이블시트에서 Lookup 열을 설정할 수 있습니다. 이때 스키마(Schema) 섹션의 열(Columns) 탭에서 조회(Lookup) 옵션을 사용할 수 있습니다.
![lookup-location-schema.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/lookup-location-schema.9a3225.png)
기본적으로 다음 방법 중 하나를 통해 테이블 시트에 '정적 배열'을 Lookup으로 설정할 수 있습니다:

* Lookup 편집기에서 배열 문자열을 직접 입력 (예: `"123, 628, 325"`)
* Lookup 드롭다운 목록에서 배열 문자열 선택

![schema-dropdown-lookuparray.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/schema-dropdown-lookuparray.a19d97.png)
배열 lookup을 설정하면, 테이블 시트 열의 콤보박스 드롭다운에 배열 항목이 표시됩니다.
예: `shipVia` 열
![lookup-array-sjsdesigner.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/lookup-array-sjsdesigner.9b7bf9.png)
테이블 간 관계가 있는 테이블 시트의 경우, Lookup을 관계 이름으로 설정할 수도 있습니다. 방법은 다음과 같습니다:

* 조회(Lookup) 편집기에서 관계 이름을 직접 입력 (예: `"Orders_customId"`)
* 조회(Lookup) 드롭다운 목록에서 관계 이름 선택

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

* 관계 이름을 lookup으로 설정하면, 해당 관계 이름에 연결된 열들이 스키마(Schema) 내 조회 열(Lookup columns) 옵션에 자동 표시됩니다. 표시할 열들을 선택하면, 테이블 시트의 다중 열 드롭다운에 표시됩니다.
<br>

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

* 예를 들어, `address` 열에 `Customer_phone` 관계 이름을 Lookup으로 추가하면, 버튼 셀로 표시되고 클릭 시 선택한 열이 드롭다운에 표시됩니다.

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