# View 열 구성

## Content

View는 열(Column)로 정의됩니다.
각 열은 다음을 결정합니다.

* 어떤 데이터가 표시되는지
* 어떻게 표시 이름이 지정되는지
* 어떤 크기로 표시되는지
* 어떻게 서식이 적용되는지
* 시트에서 어떻게 동작하는지

열은 View 생성 시 정의하거나 나중에 추가할 수 있습니다.

## 열 정의 모델

열은 다음 중 하나로 정의할 수 있습니다.

* 문자열(필드 이름)
* 구성 객체

### 필드 이름 사용

```javascript
var view = table.addView("myView", [
    "Id",
    "Name",
    "Score"
]);
```

이 방식은 지정한 필드를 기본 설정으로 포함합니다.

### 열 구성 객체 사용

```javascript
var view = table.addView("myView", [
    { value: "Id", caption: "ID", width: 60 },
    { value: "Name", caption: "Full Name", width: 150 },
    { value: "Score", width: 80 }
]);
```

구성 객체를 사용하면 표시 및 동작을 완전히 제어할 수 있습니다.

## 열 값 선택 및 계산

`value` 속성은 열에 표시할 내용을 정의합니다.
다음 중 하나를 사용할 수 있습니다.

* 호스트 테이블의 필드
* 관련 테이블의 필드
* 수식
* 행 수준 표현식

### 관련 테이블 필드 사용

```javascript
{ value: "customer.companyName", width: 200 }
```

관련 필드를 사용하려면 관계가 정의되어 있어야 합니다.

### 수식 사용

```javascript
{ value: "=[@Score] * 2", caption: "Double Score" }
```

수식은 `@`를 사용하여 현재 행의 필드를 참조할 수 있습니다.

### 행 템플릿 열

```javascript
{ value: "=[@]", caption: "Summary" }
```

이를 통해 스타일 서식 지정자를 사용하여 전체 행 서식을 지정할 수 있습니다.

## Null 및 빈 값 표시 제어

Null 값과 빈 값이 표시되는 방식을 사용자 지정할 수 있습니다.

### 테이블 스키마 수준

```javascript
var myTable = dataManager.addTable("myTable", {
    data: sampleData,
    schema: {
        columns: {
            Name: { showNullAs: "[NULL]", showEmptyAs: "[EMPTY]" }
        }
    }
});
```

### View 열 수준

```javascript
{ 
    value: "Phone",
    showNullAs: "[NO PHONE]",
    showEmptyAs: "[BLANK]"
}
```

이 설정은 값이 표시되는 방식에만 영향을 주며 실제 데이터는 변경하지 않습니다.

## 열 너비 및 레이아웃

`width` 속성은 열 크기를 제어합니다.
다음을 지원합니다.

* 픽셀 값
* 별표 크기 조정

### 고정 너비

```javascript
{ value: "Name", width: 150 }
```

### 별표 너비

```javascript
{ value: "Email", width: "2*" }
{ value: "Phone", width: "*" }
```

별표 크기 조정은 남은 가로 공간을 비례적으로 분배합니다.

## 머리글 구성

머리글 모양 및 레이아웃을 사용자 지정할 수 있습니다.

### 머리글 스타일

```javascript
var headerStyle = {
    font: "italic bold 14pt Calibri"
};

{ value: "Id", headerStyle: headerStyle }
```

### Header Fit 모드(테이블 시트)

지원되는 모드:

* `"normal"` (기본값)
* `"vertical"`
* `"stack"`

```javascript
{ value: "orderDate", headerFit: "vertical" }
```

머리글 구성은 표시 방식에만 적용됩니다.

## 셀 스타일 및 서식 지정자

`style` 속성은 열 수준의 셀 모양을 제어합니다.
예제:

```javascript
{
    value: "Score",
    style: {
        hAlign: "right"
    }
}
```

서식 지정자는 스타일 내에서 정의할 수 있습니다.

```javascript
var employeeStyle = {
    formatter: '{{=[@employee.FirstName] & " " & [@employee.LastName]}}'
};

{
    value: "employee",
    caption: "Employee",
    style: employeeStyle
}
```

서식 지정자는 다음을 사용할 수 있습니다.

* 수식
* 템플릿 구문
* `@`를 통한 전체 행 데이터 접근

이를 통해 원시 데이터를 수정하지 않고도 계산된 표시 결과를 제공할 수 있습니다.

## 유효성 검사 및 데이터 동작

열 정의에는 다음을 포함할 수 있습니다.

* `readonly`
* `required`
* `defaultValue`
* `validator`
* `isPrimaryKey`

예제:

```javascript
{
    value: "Score",
    required: true,
    validator: {
        type: "number",
        min: 0,
        max: 100
    }
}
```

이 설정들은 UI에서 데이터 편집 시 동작 방식에 영향을 줍니다.

## ViewOptions

열별 구성 외에도 View 수준 옵션을 정의할 수 있습니다.

```javascript
var view = table.addView("myView", columnInfos, true, {
    defaultColumnWidth: 120,
    showCrossValueHeader: true,
    cross: { /* 교차 열 구성 */ }
});
```

ViewOptions는 다음을 제어합니다.

* 기본 열 너비
* 초기 스타일 규칙
* 교차 열 동작

자세한 정의는 API 참조 문서를 참고하세요.