Airtable Grid

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 Add Element in an empty row and section
From the Airtable Elements section, select Airtable Grid

Refer to the GIF below:

Adding the Airtable Grid Element

The Airtable Grid Element


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.



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



After this, go to the URL www.airtable.com/account



From here, copy the API key as shown below



Go back to the builder and select Add New API Key from the Airtable Grid editor. Then give it a name and paste the API key you copied in the previous step.



Select the name of the key, choose the base and select the way you want your Airtable element to be displayed.



Choose a base type






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.

Layout Configuration


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

Default Fields

Custom 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


Was this article helpful?
Cancel
Thank you!