Extensions

Press shift + S to search API reference.

Model

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

Members

class View extends AbstractModel<ViewData, WatchableViewKey>
readonly idstring

The ID for this model.

readonly isDeletedboolean

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.

readonly isLockedViewboolean

If the view is locked. Can be watched.

console.log(myView.isLockedView);
// => false
readonly namestring

The name of the view. Can be watched.

console.log(myView.name);
// => 'Grid view'
readonly typeViewType

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

console.log(myView.type);
// => 'kanban'
readonly urlstring

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

console.log(myView.url);
// => 'https://airtable.com/appxxxxxxxxxxxxxx/tblxxxxxxxxxxxxxx/viwxxxxxxxxxxxxxx'
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 selecting data is useful for one-off data processing.

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
function () => Promise<ViewMetadataQueryResult>

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 selecting data is useful for one-off data processing.

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
function (opts: RecordQueryResultOpts = {}) => TableOrViewQueryResult
opts

Options for the query, such as sorts, fields, and record coloring. By default, records will be coloured according to the view.

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 selecting records is useful for one-off data processing.

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
function (opts: RecordQueryResultOpts = {}) => Promise<TableOrViewQueryResult>
opts

Options for the query, such as sorts, fields, and record coloring. By default, records will be coloured according to the view.

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 selecting records is useful for one-off data processing.

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

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

A string representation of the model for use in debugging.

unwatch
function (keys: WatchableViewKey | ReadonlyArray<WatchableViewKey>, callback: function (model: this, key: WatchableViewKey, args: ...Array<any>) => unknown, context?: FlowAnyObject | null) => Array<WatchableViewKey>
keys

the keys to unwatch

callback

the function passed to .watch for these keys

context

the context that was passed to .watch for this callback

Unwatch keys watched with .watch.

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

Returns the array of keys that were unwatched.

watch
function (keys: WatchableViewKey | ReadonlyArray<WatchableViewKey>, callback: function (model: this, key: WatchableViewKey, args: ...Array<any>) => unknown, context?: FlowAnyObject | null) => Array<WatchableViewKey>
keys

the keys to watch

callback

a function to call when those keys change

context

an optional context for this in callback.

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.