Display Collection List
Learn how to display a collection list from a data source (Airtable, API, PandaSuite Data Provider...)
The Collection List component connects to an ordered collection of data and presents it as a list of items in a horizontal or vertical orientation. This component is associated with a data source, this one can be internal (via the PandaSuite database, another component...) or external (via HTTP component).
Your component Collection List needs to be associated with a data source. You can connect any data source that exposes an array or collection.
Click on Source and select your data source:
- To connect a PandaSuite database, choose From a database.
- To connect an external service (for example Airtable), choose From a component > HTTP.
Create a list item
Your Collection List component does not display anything by default: you need to create a template for a list item that will be repeated from your data.
You can choose any design. Double click on the component. Insert inside a Group component. Adjust its size and inside, visually represent a list item.
💡 Discover a concrete use case of the Collection / List component : Display collection from Airtable
Customize the display
Customize the display of your collection from the properties of your component.
Choose the direction in which your data will be displayed: Horizontal or Vertical.
Add a margin between your elements.
You can also allow or disallow user scrolling, display a scroll bar, and maintain the scroll position when the user returns to that screen.
Sort and filter
Use the options Sort by (ascending order/descending order) and Filter by (a condition) to customize how the collection is displayed.
Read more: Filter a collection, Sort a collection
You can choose to display this or that template based on a condition.
Prepare the different templates in your Collection component and create a condition.