View 열 구성

View는 열(Column)로 정의됩니다.

각 열은 다음을 결정합니다.

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

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

열 정의 모델

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

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

필드 이름 사용

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

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

열 구성 객체 사용

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

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

열 값 선택 및 계산

value 속성은 열에 표시할 내용을 정의합니다.

다음 중 하나를 사용할 수 있습니다.

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

수식 사용

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

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

행 템플릿 열

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

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

Null 및 빈 값 표시 제어

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

테이블 스키마 수준

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

View 열 수준

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

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

열 너비 및 레이아웃

width 속성은 열 크기를 제어합니다.

다음을 지원합니다.

픽셀 값
별표 크기 조정

고정 너비

{ value: "Name", width: 150 }

별표 너비

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

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

머리글 구성

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

머리글 스타일

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

{ value: "Id", headerStyle: headerStyle }

Header Fit 모드(테이블 시트)

지원되는 모드:

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

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

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

셀 스타일 및 서식 지정자

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

예제:

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

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

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

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

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

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

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

유효성 검사 및 데이터 동작

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

readonly
required
defaultValue
validator
isPrimaryKey

예제:

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

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

ViewOptions

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

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

ViewOptions는 다음을 제어합니다.

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

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