# View Column Configuration

## Content

A View is defined by its columns.
Each column determines:

* What data is displayed
* How it is labeled
* How it is sized
* How it is formatted
* How it behaves in the sheet

Columns can be defined when creating the view or added later.

## Column Definition Model

A column can be defined as:

* A string (field name), or
* A configuration object

### Using Field Names

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

This includes the specified fields using default settings.

### Using Column Configuration Objects

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

A configuration object allows full control over presentation and behavior.

## Selecting and Computing Column Values

The `value` property defines what the column displays.
It can be:

* A field from the host table
* A field from a related table
* A formula
* A row-level expression

### Using Related Table Fields

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

Related fields require a defined relationship.

### Using Formulas

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

Formulas can reference fields from the current row using `@`.

### Row Template Column

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

This allows full-row formatting via style formatters.

## Controlling Display of Null and Empty Values

You can customize how null and empty values are displayed.

### At Table Schema Level

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

### At View Column Level

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

These settings affect only how values are displayed, not the underlying data.

## Column Width and Layout

The `width` property controls column size.
It supports:

* Pixel values
* Star sizing

### Fixed Width

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

### Star Width

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

Star sizing distributes remaining horizontal space proportionally.

## Header Configuration

You can customize header appearance and layout.

### Header Style

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

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

### Header Fit Mode (TableSheet)

Supported modes:

* `"normal"` (default)
* `"vertical"`
* `"stack"`

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

Header configuration applies only to presentation.

## Cell Style and Formatter

The `style` property controls column-level cell appearance.
Example:

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

A formatter can be defined in style:

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

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

Formatters may:

* Use formulas
* Use template syntax
* Access full row data via `@`

This enables computed presentation without modifying raw data.

## Validation and Data Behavior

Column definitions can include:

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

Example:

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

These settings affect how data behaves when edited in the UI.

## ViewOptions

In addition to per-column configuration, you can define view-level options:

```javascript
var view = table.addView("myView", columnInfos, true, {
    defaultColumnWidth: 120,
    showCrossValueHeader: true,
    cross: { /* cross column configuration */ }
});
```

ViewOptions control:

* Default column width
* Initial style rules
* Cross-column behavior

For detailed definitions, refer to the API reference.