Getting Started

The Airtable Grid element allows you to integrate Airtable and embed data from Airtable’s API, and the format of this data displayed will be in a Grid-like structure. This article will cover how you can add and edit the Airtable Grid element. Follow all instructions accordingly.

Adding the Airtable Grid element

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

- Click on the + button labelled Add Element or Container within an empty container
- From the Elements tab, select Airtable Grid element


Refer to the GIF below:

Integrating Airtable

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

Expand the Airtable Connection option in the Airtable Grid editor and click on Clone Airtable Templates. (Cloning is used for testing purposes, you can choose your own Airtable base)




You will be redirected to an 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, click on the + button under 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

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 video below to see an example of how prefilter works:

Advanced Fields

You can render Advanced fields like Formula fields, Rollup fields, and Lookup fields into your Airtable Element.

Formula Fields

To render formula fields from your Airtable base into your Airtable element, follow the steps below:

Creating Formula Field

- Open your Airtable base
- Select the table where you want to add the formula field
- Add a new column
- Choose “Formula”
- Add any formula of your choice

Populating the data into your website builder

- Go back to your website builder
- If you have already configured your Airtable Element, click on the 🔄 button
- Expand the Fields option
- Expand Default Fields or,
- Expand Custom Fields
- You will find your Formula field(under its name) under Content if the Element Type is Text (refer to screenshot 1)








This GIF demonstrates the above steps:

Lookup Fields

To render Lookup fields from your Airtable base into your Airtable element, follow the steps below:

Creating Lookup Field

- Open your Airtable base
- Select the table where you want to add the Lookup field
- Add a new column
- Choose “Link to another record”
- Choose the table you want to link inside this column.
- Click on the + icon on your Airtable cell
- Start adding values from the table you have linked with

Populating the data into your website builder

- Go back to your website builder
- If you have already configured your Airtable Element, click on the 🔄 button
- Expand the Fields option
- Expand Default Fields or,
- Expand Custom Fields
- You will find your Lookup field(under its name) under Content if the Element Type is Text (refer to the screenshots)







This GIF demonstrates the above steps:

Rollup Fields

To render Lookup fields from your Airtable base into your Airtable element, follow the steps below:

Creating Rollup Field

- Open your Airtable base
- Select the table where you want to add the Rollup field
- Add a new column
- Choose “Rollup”
- Give the rollup field a name
- Choose the Field on the table that links to the records you want to summarize
- Choose the table field that you'd like to roll up
- Add an aggregation formula that rolls up the values in each linked record

Populating the data into your website builder

- Go back to your website builder
- If you have already configured your Airtable Element, click on the 🔄 button
- Expand the Fields option
- Expand Default Fields or,
- Expand Custom Fields
- You will find your Rollup field(under its name) under Content if the Element Type is Text (refer to the screenshots)







This GIF demonstrates the above steps:

Layout Configuration

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

Fields

This option lets you change the fields inside the Airtable Grid 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 Grid element.

Filter and Search Style

This option allows you to stylize the Search bar and filter in your Airtable Grid 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 Grid.

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

Grid Item Styles

You can stylize the items in your Airtable Grid 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 change how the popup of the Airtable Grid element should look from this option.

Refer to the video below to see how these settings work

Updated on: 13/05/2024