> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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 the `+` button labelled **Add Element or Container** within an empty container - From the **Elements** tab, select **Airtable Grid** element **Refer to the GIF below:** ![Adding the Airtable Grid Element](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-13-at-21_1lgskfl.gif) ![The Airtable Grid Element](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_71224b.png) ![The Airtable Grid element on Builder](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1w140zk.png) --- # Integrating Airtable To integrate Airtable, follow the instructions and steps given below: 1. 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) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-13-at-14_1nf3k6f.gif) 2. You will be redirected to an Airtable base ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitleddesign2_hi00yj.gif) 3. Click on **Copy base** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-1_14i84ks.png) 4. Choose a workspace to copy the base to and click on **Add base** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-2_c8hv6t.png) 5. 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 ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_16qmvwv.png) 6. Click on the **Create Token** button and then follow the steps shown in the video below: ${youtube}[Airtable Token Generation](VXs0SUCTJfY) 7. 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. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-13-at-15_5a9e3b.gif) 8. Do the **Airtable configuration** by adding the **Base** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_5orrma.png) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-13-at-20_18i65v2.gif) --- # 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:** ${youtube}[Airtable Prefilter](FVAJTex4zNA) # 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) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-2023-01-25t163301884_cmu4xy.png) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-2023-01-25t163303315_2rmp29.png) This GIF demonstrates the above steps: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-01-24-at-63_p62kji.gif) ## 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) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-2023-01-25t163441277_vrxpyk.png) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-2023-01-25t163443597_1vtvkx1.png) This GIF demonstrates the above steps: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-01-24-at-63_104u7kk.gif) ## 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) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-2023-01-25t163804392_9ajpnt.png) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-2023-01-25t163830121_4tvi28.png) This GIF demonstrates the above steps: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-01-24-at-64_5c8oo7.gif) ## 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](https://cdn.dorik.com/627b88a2bb53f40029a192a7/634bade06d82a900119e45f9/images/Untitled-design-39-1_yx6dnusj.gif) --- ## 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: 1. Default Fields 2. Custom Fields Let's take a look at each field setting inside this option: 1. **Default Fields** ![Default Fields](https://cdn.dorik.com/627b88a2bb53f40029a192a7/634bade06d82a900119e45f9/images/Untitled-design-40_pmerp2r2.gif) 1. **Custom Fields** ![Custom Fields](https://cdn.dorik.com/627b88a2bb53f40029a192a7/634bade06d82a900119e45f9/images/Untitled-design-41_jrlucbi7.gif) --- ## Filters and Search This option allows you to add a **search bar** and a **filter** to your **Airtable Grid** element. ![](https://cdn.dorik.com/627b88a2bb53f40029a192a7/634bade06d82a900119e45f9/images/Untitled-design-42_drzwe0rj.gif) --- ## 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. ![](https://cdn.dorik.com/627b88a2bb53f40029a192a7/634bade06d82a900119e45f9/images/Untitled-design-43_wljdl34v.gif) --- ## 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 ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-12at23024p_11ql2ax.gif) --- ## 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. ![](https://cdn.dorik.com/619eae04c1ba4d0011df90a0/634d376e6d82a900119e4d61/images/Airtable-Grid-19-grid-item-converted_exqhb3j2.gif) --- ## 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. ![](https://tinyurl.com/bddden4u) --- ## 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 ${youtube}[.](feJYhuLWBLo) ---