# View

## Content

## What Is a View

A View defines how table data is structured and presented.
In the DataManager architecture:

* Table manages and stores data.
* View defines how that data is exposed.
* Sheet (TableSheet / GanttSheet) renders the view.

A View acts as the structural layer between data and UI.
It determines:

* Which fields are visible
* How columns are ordered and labeled
* How values are formatted
* Whether related table fields are included
* What visual or validation rules apply

A View does not store data independently. It reflects the current state of its host table.

## Why Use a View

A table often serves multiple presentation scenarios.
For example:

* A summary sheet may display only key fields.
* A detailed sheet may include related table information.
* A GanttSheet may require task-specific columns.
* An analysis sheet may apply conditional formatting rules.

Instead of modifying the table schema for each scenario, you create multiple views.
Each View represents a different projection of the same table data.

## View in the Data Flow

The typical flow is:

```auto
Data Source → Table → View → Component
```

* The **Table** loads and manages raw data.
* The **View** defines structure and presentation.
* The **Component** binds to the View and renders it.

This separation ensures:

* Data integrity remains in the table layer.
* Presentation logic remains in the view layer.
* UI components remain independent of raw data structure.

## Core Capabilities

A View provides the following capabilities:

### Structural Control

* Select columns
* Define column order
* Rename columns
* Add computed columns

### Presentation Control

* Configure column width (pixel or star sizing)
* Customize header style and layout
* Format cell content using formulas or templates
* Control null and empty display behavior

### Rule-Based Behavior

* Apply conditional formatting
* Add sparkline rules
* Define validation rules
* Add view-level style rules

### Cross-Table Projection

* Include fields from related tables
* Use dot notation to access related data
* Format values using related fields

### Runtime Management

* Add or remove columns dynamically
* Add or remove style rules
* Control automatic filter and sort behavior
* Inspect total and visible data length

## Relationship to Table

* A View always belongs to a single host table.
* A table can contain multiple views.
* Removing a view does not affect the table data.
* Modifying a view does not change the table schema.

Cross-table access requires a defined relationship.

## Required Initialization

After creating a View, call:

```javascript
view.fetch();
```

This initializes the view and prepares it for binding.
To force reload from the data source:

```javascript
view.fetch(true);
```

## Bind Targets

A View can be bound to:

* **TableSheet**
* **GanttSheet**

The sheet renders the structure defined by the view.

## Next Steps

* **[View Basics](/spreadjs/docs/features/data-manager/view/view-basics-)** \- Learn how to create\, initialize\, and manage views\.
* **[View Column Configuration](/spreadjs/docs/features/data-manager/view/view-column-configuration)** \- Learn how to define column structure\, layout\, and formatting\.
* **[View Styling and Rule](/spreadjs/docs/features/data-manager/view/view-styling-and-rules)** \- Learn how to apply conditional formatting\, sparkline rules\, and validation\.
* **[View with Relationships](/spreadjs/docs/features/data-manager/view/view-with-relationships)** \- Learn how to include related table fields in a view\.