List block layouts
To get started, you need to connect a data source from Settings ⇒ Data Source or or hit Connect Data Source directly from the block settings sidebar (Source tab). Learn more about data sources and how to configure them here.
As soon as you connect a data source, your block settings will become available and you can start setting it up. In this overview, we will not build a list but will rather review different list layouts and explore their specific features. So, let’s review the settings that are common for all the list layouts, and then we'll take a closer look at each layout in the next sections.
After adding any of the list layouts from Blocks => Dynamic => List, you need to select the source where you want to import your data from. This is done from the Source tab ****of the block settings. Below, we’ve selected Airtable as a data source and can now select the specific base and table we want to connect to.
<aside> 💡 We’re using Airtable in the below example. List block also works with the other data sources like Google Sheets, HubSpot (beta), and SmartSuite (beta).
</aside>
Block’s Source tab
As soon as we select a Base and Table, we'll see the rest of the Source settings appear below. Let's take a look at those as well.
Here, you can set one of your Airtable table views as a default view, and the items in the list will be sorted and filtered according to the sorting and filtering configuration of that particular view. ****It can be a different type (e.g. "Calendar") or the same type but with different configuration (e.g. with different filters applied).
Views on Airtable
Sort by
Here you have a list of available sorting options based on your Airtable fields (columns). Each field will have an ascending and descending order options (see below).
Sorting
Items per page
You can choose how many items appear in the list by default. If there are more items to display, a See More button will be added at the end of the list, allowing the user to expand the list and view the ****additional items.
Items per row
You can also choose how many items ("3" or "4") each row should contain.