# Style & UI Metadata

## Content

Style and UI metadata define how a column is presented when consumed by a view implementation.
These settings:

* Do not modify stored data
* Do not affect record structure
* Do not participate in parsing or indexing

They describe how column data should be rendered or interacted with in a table view.
Although defined in the table schema, these properties are applied only when a view (such as a TableSheet view) consumes the column definition.

## caption

Defines the header text of the column.

```javascript
columns: {
    name: {
        caption: "Employee Name"
    }
}
```

If not specified, the column name is used as the default caption.
`caption` affects only presentation.

## width

Defines the default width of the column when rendered in a view.

```javascript
columns: {
    name: {
        width: 150
    }
}
```

Width can be:

* A numeric pixel value
* A star-sizing string (depending on view support)

Width has no impact on stored data.
For layout behavior details, see [View Column Configuration](/spreadjs/docs/features/data-manager/view/view-column-configuration).

## style

Defines the default cell style for the column.

```javascript
columns: {
    price: {
        style: { formatter: "$#,##0.00" }
    }
}
```

Style options may include:

* Formatter
* Alignment
* Font
* Background color
* Cell type (depending on view support)

Style configuration is consumed by the view layer.

## headerStyle

Defines the header cell style.

```javascript
columns: {
    orderId: {
        headerStyle: {
            backColor: "#3390FF",
            font: "bold 14px Calibri"
        }
    }
}
```

Header styles apply only to column headers and are view-dependent.

## conditionalFormats

Defines conditional formatting rules applied to the column.

```javascript
columns: {
    price: {
        conditionalFormats: [rule]
    }
}
```

Conditional formats:

* Apply styles based on cell values
* Are evaluated by the view layer
* Do not alter underlying data

## validator

Defines validation rules applied to the column.

```javascript
columns: {
    quantity: {
        validator: {
            type: "number",
            comparisonOperator: "greaterThan",
            value1: 0
        }
    }
}
```

Validators:

* Enforce input constraints
* May provide error messages
* Are evaluated during editing operations

Validation logic does not change stored values unless input is rejected.
For advanced validation behavior, see [Data Validation](/spreadjs/docs/features/datavalidate).

## allowSort, allowFilterByValue, allowFilterByList

Control the visibility and availability of sorting and filtering capabilities in views.

```javascript
columns: {
    orderId: {
        allowSort: false,
        allowFilterByValue: false,
        allowFilterByList: false
    }
}
```

These settings:

* Affect view interaction behavior
* Do not affect underlying query logic in DataManager

## headerFit

Defines how column headers are laid out in certain view implementations.

```javascript
columns: {
    orderId: {
        headerFit: "stack"
    }
}
```

Supported modes depend on the view implementation.
Header fit affects layout only.

## outlineColumn

Marks a column as an outline column in views that support hierarchical display.

```javascript
columns: {
    name: {
        outlineColumn: true
    }
}
```

This property is relevant when hierarchical data is configured at the schema level.
Hierarchical modeling is documented separately in [Hierarchical Data](/spreadjs/docs/features/data-manager/schema/hierarchical-data).

## Schema-Level vs View-Level Configuration

Style and UI metadata can be defined at both:

* Table schema level
* View column level

When both are present:

* View-level configuration overrides schema-level defaults
* Schema-level settings act as baseline metadata

This separation ensures:

* Data modeling remains view-independent
* Presentation logic can vary across views
* Schema definitions remain reusable

## Responsibility Boundary

Style & UI metadata:

* Describe default presentation behavior
* Are consumed by views
* Do not change data
* Do not affect parsing or relationships

For rendering details and UI-specific behavior, refer to:

* [View Column Configuration](/spreadjs/docs/features/data-manager/view/view-column-configuration)
* [View Styling and Rules](/spreadjs/docs/features/data-manager/view/view-styling-and-rules)
* [Conditional Formatting](/spreadjs/docs/features/condformat)
* [Data Validation](/spreadjs/docs/features/datavalidate)

This maintains a clear separation between data modeling and presentation logic within the documentation system.