# View

**Kind:** Class

A class that represents an Airtable view. Every `Table` has one or more views.

## Properties

### `id`

Type: `string`

The ID for this model.

### `isDeleted`

Type: `boolean`

`true` if the model has been deleted, and `false` otherwise.

In general, it's best to avoid keeping a reference to an object past the
current event loop, since it may be deleted and trying to access any data
of a deleted object (other than its ID) will throw. But if you keep a
reference, you can use `isDeleted` to check that it's safe to access the
model's data.

### `isLockedView`

Type: `boolean`

If the view is locked. Can be watched.

```js
console.log(myView.isLockedView);
// => false
```

### `name`

Type: `string`

The name of the view. Can be watched.

```js
console.log(myView.name);
// => 'Grid view'
```

### `type`

Type: `ViewType`

The type of the view, such as Grid, Calendar, or Kanban. Should never change because view types cannot be modified.

```js
console.log(myView.type);
// => 'kanban'
```

### `url`

Type: `string`

The URL for the view. You can visit this URL in the browser to be taken to the view in the Airtable UI.

```js
console.log(myView.url);
// => 'https://airtable.com/appxxxxxxxxxxxxxx/tblxxxxxxxxxxxxxx/viwxxxxxxxxxxxxxx'
```

## Methods

### `selectMetadata()`

Select the field order and visible fields from the view. Returns a
`ViewMetadataQueryResult`.

Consider using `useViewMetadata` instead if you're creating a React UI. The
`useViewMetadata` hook handles loading/unloading and updating your UI automatically,
but manually `select`ing data is useful for one-off data processing.

**Returns:** `ViewMetadataQueryResult`

```js
async function loadMetadataForViewAsync(view) {
    const viewMetadata = view.selectMetadata();
    await viewMetadata.loadDataAsync();

    console.log('Visible fields:');
    console.log(viewMetadata.visibleFields.map(field => field.name));
    // => ['Field 1', 'Field 2', 'Field 3']

    console.log('All fields:');
    console.log(viewMetadata.allFields.map(field => field.name));
    // => ['Field 1', 'Field 2', 'Field 3', 'Hidden field 4']

    viewMetadata.unloadData();
}
```

### `selectMetadataAsync()`

Select and load the field order and visible fields from the view. Returns a
`ViewMetadataQueryResult` promise where the metadata has already been loaded.

Consider using `useViewMetadata` instead if you're creating a React UI. The
`useViewMetadata` hook handles loading/unloading and updating your UI automatically,
but manually `select`ing data is useful for one-off data processing.

**Returns:** `Promise<ViewMetadataQueryResult>`

```js
async function loadMetadataForViewAsync(view) {
    const viewMetadata = await view.selectMetadata();

    console.log('Visible fields:');
    console.log(viewMetadata.visibleFields.map(field => field.name));
    // => ['Field 1', 'Field 2', 'Field 3']

    console.log('All fields:');
    console.log(viewMetadata.allFields.map(field => field.name));
    // => ['Field 1', 'Field 2', 'Field 3', 'Hidden field 4']

    viewMetadata.unloadData();
}
```

### `selectRecords(opts)`

Select records from the view. Returns a `RecordQueryResult`.

Consider using `useRecords` or `useRecordIds` instead, unless you need the
features of a QueryResult (e.g. `queryResult.getRecordById`). Record hooks handle
loading/unloading and updating your UI automatically, but manually `select`ing records is
useful for one-off data processing.

**Parameters:**
- `opts` (`RecordQueryResultOpts`) — Options for the query, such as sorts, fields, and record coloring. By

**Returns:** `TableOrViewQueryResult`

```js
import {useBase, useRecords} from '@airtable/blocks/UI';
import React from 'react';

function TodoList() {
    const base = useBase();
    const table = base.getTableByName('Tasks');
    const view = table.getViewByName('Grid view');

    const queryResult = view.selectRecords();
    const records = useRecords(queryResult);

    return (
        <ul>
            {records.map(record => (
                <li key={record.id}>
                    {record.name || 'Unnamed record'}
                </li>
            ))}
        </ul>
    );
}
```

### `selectRecordsAsync(opts)`

Select and load records from the view. Returns a `RecordQueryResult` promise where
record data has been loaded.

Consider using `useRecords` or `useRecordIds` instead, unless you need the
features of a QueryResult (e.g. `queryResult.getRecordById`). Record hooks handle
loading/unloading and updating your UI automatically, but manually `select`ing records is
useful for one-off data processing.

Once you've finished with your query, remember to call `queryResult.unloadData()`.

**Parameters:**
- `opts` (`RecordQueryResultOpts`) — Options for the query, such as sorts, fields, and record coloring. By

**Returns:** `Promise<TableOrViewQueryResult>`

```js
async function getRecordCountAsync(view) {
    const query = await view.selectRecordsAsync();
    const recordCount = query.recordIds.length;
    query.unloadData();
    return recordCount;
}
```

### `toString()`

A string representation of the model for use in debugging.

**Returns:** `string`

### `unwatch(keys, callback, context?)`

Unwatch keys watched with `.watch`.

Should be called with the same arguments given to `.watch`.

Returns the array of keys that were unwatched.

**Parameters:**
- `keys` (`WatchableViewKey | ReadonlyArray<WatchableViewKey>`) — the keys to unwatch
- `callback` (`object`) — the function passed to `.watch` for these keys
- `context?` (`FlowAnyObject | null`) — the context that was passed to `.watch` for this `callback`

**Returns:** `Array<WatchableViewKey>`

### `watch(keys, callback, context?)`

Get notified of changes to the model.

Every call to `.watch` should have a matching call to `.unwatch`.

Returns the array of keys that were watched.

**Parameters:**
- `keys` (`WatchableViewKey | ReadonlyArray<WatchableViewKey>`) — the keys to watch
- `callback` (`object`) — a function to call when those keys change
- `context?` (`FlowAnyObject | null`) — an optional context for `this` in `callback`.

**Returns:** `Array<WatchableViewKey>`