> ## 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 Table # 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:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/airtable-table_iytwou.gif) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_xltw9d.png) --- # Airtable Configuration To integrate Airtable, follow the instructions and steps given below: 1. Expand the Airtable Connection option in the Airtable Job Board editor and click on **Clone Airtable Templates.** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_rgelkn.png) 2. You will be redirected to a preset Airtable base ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-4_9uj7wa.gif) 3. Click on **Copy base** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-2_y171z4.png) 4. Choose a **workspace** to copy the base to and click on **Add base** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-3_12aguva.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_hotb7b.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 and click on the `+` button under the **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/add-token-name_129bj0k.gif) 8. Do the **Airtable configuration** by adding the **Base** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-13-at-40_jx3vf9.gif) 9. Your Airtable Job Board has been connected and configured ⬇️ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-6_8nzp5f.png) --- # 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:** ${youtube}[Airtable Table](vC75QPj2ljw) --- # 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: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-7_1nqo9ht.png) --- ## 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. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-7_113uc9v.gif) --- ## 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: 1. **Default Fields** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-8_1luvk5t.gif) 2. **Custom Fields** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-9_3ll42g.gif) --- ## Filters and Search This option allows you to add a **search bar** and a **filter** to your **Airtable Table** element. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-10_1apremg.gif) --- ## 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. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-11_10ugkqt.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 Job Board. Refer to the **GIF** below to see the settings inside this option ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-12_m1zyw1.gif) --- ## 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. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgifcom-video-to-gif_13n5rv0.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://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-1_xzz9ta.gif) --- ## 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. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image-2_dy77t7.gif) --- ###### Related Links: [Airtable Grid](https://help.dorik.com/en/article/airtable-grid-1tyhp7m/) [Airtable Job Board](https://help.dorik.com/en/article/airtable-job-board-pf0u67/)