# View Basics 

## Content

## Creating a View

Use [`addView`](/spreadjs/api/classes/GC.Data.Table#addview) on a table:

```javascript
var view = table.addView(
    name,
    columnInfos?,
    includeDefaultColumns?,
    options?
);
```

### Parameters

* **name** \- The unique name of the view within the table\.
* **columnInfos** \- An array of field names or column configuration objects\.
* **includeDefaultColumns** \- When column information is omitted\, default table columns are included\.
* **options** \- Additional view\-level configuration\.

### Example

Assume the table contains:

```javascript
var sampleData = [
    { Id: 1, Name: "John Doe", Score: 85 },
    { Id: 2, Name: "Jane Smith", Score: 92 }
];
```

Create the table:

```javascript
var myTable = dataManager.addTable("myTable", {
    data: sampleData
});
```

Create a view:

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

This view:

* Includes only selected fields
* Renames `Id` to `ID`
* Controls column layout

If no columns are specified, the view includes all default columns of the host table.

## Initializing a View

After creating a view, you should call:

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

This step initializes the view data and prepares it for use.
The method returns a Promise:

```javascript
view.fetch().then(function () {
    tableSheet.setDataView(view);
});
```

If the underlying data source needs to be refreshed, use:

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

Calling [`fetch()`](/spreadjs/api/classes/GC.Data.View#fetch) ensures the view reflects the latest state of its host table before binding or data access.

## Binding a View to a Sheet

A View serves as the structured data source for UI components.

### Bind to TableSheet

```javascript
view.fetch().then(function () {
    tableSheet.setDataView(view);
});
```

### Bind to GanttSheet

```javascript
view.fetch().then(function () {
    ganttSheet.bindGanttView(view);
});
```

The sheet renders data according to the structure defined by the view.

## Managing Views

Each table maintains a collection of views.
You can create multiple views to represent different layouts of the same table data.

### Add a View

```javascript
table.addView("summaryView");
```

### Remove a View

```javascript
table.removeView("summaryView");
```

Removing a view does not affect the underlying table data.

## Managing Columns in a View

Columns can be adjusted after a view is created.

### Add a Column

```javascript
view.addColumn("Email");
```

### Add a Column with Configuration

```javascript
view.addColumn({
    value: "Email",
    caption: "Email Address",
    width: 200
});
```

### Remove a Column

```javascript
view.removeColumn("Email");
```

### Get Columns

```javascript
view.getColumn();     // all columns
view.getColumn(1);    // specific column
```

These operations modify only the structure of the view, not the underlying table schema.