Display Collection List

Learn how to display a collection list from a data source (Airtable, API, PandaSuite Data Provider...)

Choose source

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.

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

Display conditions

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.