# Collection

> Learn how to display data from your collection as a list using PandaSuite. Discover how to connect data sources, create and customize list items, bind text and images, and implement display conditions for dynamic elements.

https://docs.pandasuite.com/essentials/data/collection/

**Display the data from your collection as a list.**

A Collection is the data-driven counterpart of a [Flexbox](https://docs.pandasuite.com/essentials/components/flexbox/): it arranges its repeated items along a main axis, horizontal or vertical, the same way. You set the direction and the spacing, the container places each item, and items follow one another without overlapping.

[Video: Display Collection List tutorial: showing the data of a collection as a list in a PandaSuite application](https://www.youtube.com/embed/ZlEOUxwcYTE?&hl=en&cc_lang_pref=en&cc_load_policy=1)

## Connect the data source

To connect your collection to a data source:

- Insert the **Collection / List** component.
- In the properties, click on **Source** and choose **From a data source**. Select your data source, then the list to display (here, the Airtable **records**).
- Click on the **Validate** button.

> **Info: Source type matters**
>
> What a **Collection / List** exposes in data binding depends on its source.
> With a **Collection**, the window adds **Current Item**, a **Reference** to the
> row, giving access to its fields and identifier. With an **Array**, it adds
> **Current Index** (the row's position) instead. See
> [Current Item](https://docs.pandasuite.com/essentials/data/data-binding/#current-item) and
> [Current Index](https://docs.pandasuite.com/essentials/data/data-binding/#current-index).

[Video: Source of the Collection List, From a data source, then the Airtable component and its records array (22 places), confirmed with Validate]

> **Warning**
>
> Your application must first be connected to a data source. For an API such as Airtable, you need the HTTP component. Learn how to do this: [Connect to Airtable](https://docs.pandasuite.com/essentials/integrations/connect-to-airtable/). Test the request and launch the query when the screen containing your component is displayed.

## Create a list item

In the collection, a single item will be created and repeated based on the data source.

Customize the design of this item: card, single-line text... Double-click on the component to edit its content.

If you use a design tool, export each element individually so it can be dynamically linked to data.

> **Info**
>
> Need inspiration for your list item UI? Check out: [Guide to list UI design: principles and examples](https://www.justinmind.com/blog/list-ui-design/) (Justinmind)

Insert a [Group](https://docs.pandasuite.com/essentials/components/group/) component. Adjust its size and visually represent a list item inside.

[Image: List item template inside the Collection List: a Group, framed, holding the card with district, image placeholder and place name]

Now that your template is ready, display the fields from the database ( *Name*, *Address*, *Description*, *Image*, *Category*...) using [data binding](https://docs.pandasuite.com/essentials/data/data-binding/).

[Image: City Guide table in Airtable: 9 Paris places with the Name, Address, Arrondissement, Description, Image and Category fields]

## Bind text

To display the *Name* field in a text block, select the text block, click **Edit** next to **Content**, select the text and click **Insert data**. Then click the **Data** tag that replaces it to open the [data binding](https://docs.pandasuite.com/essentials/data/data-binding/) window.

Select **Current Item** and navigate through your data source. With an array such as the Airtable **records**, the window offers **Current Index** instead: open the current row, then its fields.

**Current Item** is a reference to the row currently displayed by the collection: open one of its fields to bind that field's value, or stop at it to use the item's identifier. Learn more in [Data binding](https://docs.pandasuite.com/essentials/data/data-binding/#current-item).

[Video: the card title gets Insert data, then Current Index, the current row, fields and Name, whose value is Rosa Bonheur, confirmed with Validate]

> **Info**
>
> By choosing **Current Item**, you directly access the source data of the current row, such as a row from Airtable: *Rosa Bonheur*.

## Bind an image

In Airtable, images are exposed as URLs, which are automatically converted into images by PandaSuite.

Select the image, hover over **Source** and click the [data binding](https://docs.pandasuite.com/essentials/data/data-binding/) icon that appears.

[Video: the card image Source gets Current Index, the current row, fields, Image, the first item and its url field, confirmed with Validate]

## Display conditions

Display conditions are an advanced feature that allows you to automatically select the item to display based on a specific condition. This option becomes available when a second item is added to the **Collection / List** component. It is particularly useful when the design or structure of an item needs to adapt to the nature of the connected data.

For example, you can display an *Image* or *Video* item depending on the value of a *Type* field in your data source. In the [Real Estate Catalog](https://pandasuite.com/templates/real-estate-app/) template, this feature is used to indicate whether a property is *exclusive* or not, based on a boolean field.

[Image: Real Estate Catalog template: the list's Exclusivity? display condition shows the card exclusivity item, with its EXCLUSIVITY badge]

> **Info**
>
> Tip: To make only part of an item conditional without using global display conditions, simply insert the [Condition](https://docs.pandasuite.com/essentials/components/condition/) component inside the item. This allows you to add specific actions based on a multi-state setup.

## Combine static and dynamic display with display conditions

It is possible to mix dynamic data sources and static elements to meet different interactivity needs. You can maintain a static display for elements requiring specific, non-generic interactivity (leveraging the many interactive features of PandaSuite) while creating dynamic pages using [data binding](https://docs.pandasuite.com/essentials/data/data-binding/) for a standard display.

Display conditions play a key role here in managing these two types of elements. You can use this feature to target static elements and associate them with a specific renderer. For example, [the Condition component](https://docs.pandasuite.com/essentials/components/condition/) can check the identifier of the data source and redirect to the appropriate static page.

Conversely, it is also possible to update your dynamic content to include unique identifiers for screens and use them in a screen change action. By linking these identifiers via data binding, you can create smooth and coherent navigation between your dynamic data and static elements.