Getting Started

The Airtable Table element allows you to integrate Airtable and embed data from Airtable’s API in a table format. This article will cover how you can add and edit the Airtable Table element. Follow all instructions accordingly.

Adding the Airtable Table element

Follow the steps below to add an Airtable Table to your site.

- Click on the + button labeled Add Element or Container within an empty container
- From the Elements section, select Airtable Table element

Refer to the GIF & screenshot below:

Airtable Configuration

To integrate Airtable, follow the instructions and steps given below:

Expand the Airtable Connection option in the Airtable Job Board editor and click on Clone Airtable Templates.




You will be redirected to a preset Airtable base





Click on Copy base





Choose a workspace to copy the base to and click on Add base





From here, click on the Account (1️⃣) option and select the Developer hub (2️⃣) option, as shown below.

Or you can go to this link- https://airtable.com/create/tokens





Click on the Create Token button and then follow the steps shown in the video below:





Go back to the builder and click on the + button under the Token option. Then, give it a Name and paste the Token you copied in the previous step.




Do the Airtable configuration by adding the Base




Your Airtable Job Board has been connected and configured ⬇️

Adding Prefilter

To filter out data you do not want to display on your Airtable Element, follow the steps below:

- After configuring the Airtable element, expand the Prefilter option just below the Airtable Configuration option
- Click on + Add New Filter
- Select a field
- Choose a filtering option (Equal, Does Not Equal, Contains, Does Not Contain, etc.)

Refer to the list below to understand how these filters work:

Filters

Equal
Does Not Equal
Contains
Does Not Contain
Is Empty
Is Not Empty

Supported Airtable Field Types

singleSelect
multipleSelects
singleLineText
longText
phoneNumber(will be treated as TEXT)
url(will be treated as TEXT)
email(will be treated as TEXT)
date(not dateTime)
formula(will be treated as NUMBER /TEXT)
rollup(will be treated as NUMBER/TEXT)
multipleLookUp(will be treated as NUMBER/TEXT/multipleSelects)
currency(will be treated as NUMBER)
percent(will be treated as NUMBER)
rating(will be treated as NUMBER)
number
autoNumber(will be treated as NUMBER

Refer to the GIF below to see an example of how prefilter works:

Editing the Airtable Table Element

Follow the steps and instructions below to add and edit an Airtable Table on your site.

The Airtable Table element editor has the following options:

- Airtable Connection
- Layout Configuration
- Fields
- Filters and Search
- Filters and Search Style
- Load More Button style
- Job Board Item Style
- Popup Setting

The Airtable Table element editor:

Layout Configuration

This option allows you to make changes to the layout of the Airtable Table element. Refer to the GIF below to see these settings in action.

Fields

This option lets you change the fields inside the Airtable Table element. There are two types of fields that you can make changes to:

- Default Fields
- Custom Fields

Let's take a look at each field setting inside this option:

Default Fields




Custom Fields

Filters and Search

This option allows you to add a search bar and a filter to your Airtable Table element.

Filter and Search Style

This option allows you to stylize the Search bar and filter in your Airtable Table element. Refer to the GIF below to see the demonstration.

Load More Button Style

This option allows you to stylize the Load More button. The Load More button works when a user wants to view more items in the Airtable Job Board.

Refer to the GIF below to see the settings inside this option

Table Item Styles

You can stylize the items in your Airtable Table element using this option. Refer to the GIF below to see how the settings work inside this option.

Popup Setting

This option allows you to change how the popup will appear after a user clicks on an item on the Airtable.

Refer to the GIF below to see how these settings work

Popup Styles

You can stylize how your Airtable Table’s element should look with this option. Refer to the GIF below to check how the settings work.

Related Links:

Airtable Grid


Airtable Job Board

Updated on: 13/05/2024