How to Integrate Retool with Airtable

Before configuring anything in Retool, you need a personal access token (PAT) from Airtable. Navigate to your Airtable account at airtable.com, click your avatar in the top-right corner, and select 'Developer hub'. In the left sidebar choose 'Personal access tokens', then click 'Create new token'. Give the token a descriptive name like 'Retool Integration'. Under Scopes, add at minimum: data.records:read (to list and retrieve records) and data.records:write (to create, update, and delete records). If you also need schema information — field names, types, and table structure — add schema.bases:read as well. Under Access, select 'Only these bases' and choose the specific bases your Retool app will use. This scopes the token to minimum required permissions. Click 'Create token' and copy the generated value immediately — Airtable will not show it again. Store it somewhere safe temporarily; you will paste it into Retool in the next step. Note: if you are building on behalf of a team, consider whether a service account PAT (created under a shared Airtable account) is more appropriate than your personal token, since PATs are tied to individual accounts.

In Retool, navigate to the Resources tab in the left sidebar (or go to your organization's Retool homepage and click Resources at the top). Click the '+ Create new' button or '+ Add resource', then scroll through the connector list and select 'REST API'. On the resource configuration screen, fill in the following fields: Name — give it a clear name like 'Airtable (Company Base)' so it is easy to identify in the query editor. Base URL — enter https://api.airtable.com. For Authentication, select 'Bearer token' from the dropdown. In the token field, paste the personal access token you created in the previous step. Leave all other fields at their defaults for now. Click 'Test connection' — Retool will make a lightweight request to verify the token is valid and the base URL is reachable. If the test passes, click 'Save resource'. The resource is now available to all apps in your Retool organization. If you need to connect to multiple Airtable accounts or want to separate read-only from read-write access, create separate REST API resources for each. All queries made through this resource are proxied server-side — the bearer token is never sent to the browser.

Open the Retool app where you want to display Airtable data (or create a new app). In the Code panel at the bottom, click '+ New query' and select your Airtable REST API resource. Set the Method to GET. For the URL path, enter /v0/{baseId}/{tableName} — replacing {baseId} with your actual Airtable Base ID (found at airtable.com/developers/web/api/introduction when you select your base; it starts with 'app') and {tableName} with your table name URL-encoded if it contains spaces (e.g., 'Content%20Calendar'). Alternatively, you can reference Retool component values dynamically: /v0/appXXXXXXXXXXXXXX/{{ select1.value }}. Add URL parameters to control the response. Under Params, add filterByFormula with a value like NOT({Status} = 'Archived') to exclude certain records, sort[0][field] to sort by a specific field name, sort[0][direction] set to 'desc' or 'asc', maxRecords set to 100 to limit page size, and offset set to {{ getRecords.data.offset || '' }} for pagination. Click 'Run query' to test. Airtable returns a JSON object with a records array — each record has an id, createdTime, and fields object. Name this query something descriptive like getVendors.

1{
2  "method": "GET",
3  "path": "/v0/appYOURBASEIDHERE/Vendors",
4  "params": {
5    "filterByFormula": "NOT({Status} = 'Archived')",
6    "sort[0][field]": "Created",
7    "sort[0][direction]": "desc",
8    "maxRecords": "100",
9    "offset": "{{ getVendors.data.offset || '' }}"
10  }
11}

Airtable's API returns records in a nested format — each record has id, createdTime, and fields as a nested object. Retool's Table component expects a flat array of objects. You need a JavaScript transformer to flatten this structure. In the query editor for your getVendors query, click the 'Advanced' tab, then toggle on 'Transform results'. This opens an inline transformer editor where you write a JavaScript function. The transformer receives the raw API response as the data variable and should return a flat array. Write the transformation to map each record to a flat object combining the record id with all field values. After writing the transformer, click Run to verify the output is a flat array. Now drag a Table component from the component panel onto your canvas. In the Table's properties on the right, set the Data source to {{ getVendors.data }}. The table should populate with your flattened records. Configure column visibility, rename headers as needed, and set column types — for example, change a status column to type Select to show a colored badge. If you want pagination, enable it in the Table's properties and set the query's offset parameter to {{ table1.paginationOffset }}.

1// Transformer: flatten Airtable records into a flat array
2const records = data.records || [];
3return records.map(record => ({
4  id: record.id,
5  createdTime: new Date(record.createdTime).toLocaleDateString(),
6  ...record.fields
7}));

To write data back to Airtable, you need additional queries using POST (create) and PATCH (update) methods. For updating an existing record: create a new query, select your Airtable resource, set Method to PATCH, and set the path to /v0/appYOURBASEIDHERE/Vendors/{{ table1.selectedRow.id }}. In the Body section, select JSON and enter a fields object with the fields to update — reference component values using Retool's double-brace syntax for each field. For creating a new record: create another query, set Method to POST, use path /v0/appYOURBASEIDHERE/Vendors, and in the body set a fields object with all required field values from your form components. Drag a Form component onto the canvas to serve as your input UI. Add TextInput, Select, and DatePicker components inside the form. Wire the form's Submit button to trigger your create query using an event handler: click the Submit button → Event Handlers → Add handler → Action: Trigger query → select your createVendor query. On the create query's Success event handler, add: Trigger query → getVendors to refresh the table, and Show notification with message 'Record created successfully'. Test by filling in the form and clicking Submit — the new record should appear in Airtable and your Retool table should refresh automatically.

1{
2  "method": "PATCH",
3  "path": "/v0/appYOURBASEIDHERE/Vendors/{{ table1.selectedRow.id }}",
4  "body": {
5    "fields": {
6      "Status": "{{ statusSelect.value }}",
7      "Notes": "{{ notesInput.value }}",
8      "Last Updated By": "{{ current_user.email }}"
9    }
10  }
11}

Airtable's API returns a maximum of 100 records per request. For bases with more than 100 records, the response includes an offset field that acts as a pagination cursor. To implement load-more or full pagination in Retool, you need to handle this offset value. The simplest approach for smaller bases (under a few hundred records) is to chain multiple queries: run the first page, check if data.offset exists, and if so, run a second query with that offset value. For larger bases, implement proper server-side pagination using Retool's Table pagination feature. Enable pagination on your Table component (set Pagination type to 'Server-side'), then in your query use {{ table1.paginationOffset }} as the offset parameter. Add a pageSize URL parameter set to {{ table1.pageSize }}. When users click Next in the table, Retool automatically updates paginationOffset and re-runs the query. For the Table component to know the total record count (needed for page navigation), fetch the total using Airtable's COUNTA formula query or maintain a count field in a summary table. For complex integrations involving multiple Airtable bases, cross-base transformations, and automated sync workflows, RapidDev's team can help architect and build your Retool solution.

1// JavaScript query to fetch all records by following offsets
2const allRecords = [];
3let offset = '';
4
5do {
6  const params = {
7    maxRecords: 100,
8    ...(offset ? { offset } : {})
9  };
10  const response = await utils.executeQuery('getVendors', params);
11  allRecords.push(...(response.records || []));
12  offset = response.offset || '';
13} while (offset);
14
15return allRecords.map(record => ({ id: record.id, ...record.fields }));