View Column Configuration

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

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

This includes the specified fields using default settings.

Using Column Configuration Objects

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

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

Related fields require a defined relationship.

Using Formulas

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

Formulas can reference fields from the current row using @.

Row Template Column

{ 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

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

At View Column Level

{ 
    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

{ value: "Name", width: 150 }

Star Width

{ 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

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

{ value: "Id", headerStyle: headerStyle }

Header Fit Mode (TableSheet)

Supported modes:

• "normal" (default)

• "vertical"

• "stack"

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

Header configuration applies only to presentation.

Cell Style and Formatter

The style property controls column-level cell appearance.

Example:

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

A formatter can be defined in style:

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:

{
    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:

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.