export const meta = {
  title: `Working with collections`,
  description: `Collections`
};

Collections are any list of repeating items. You can visually create a collection from any individual component by selecting the **Create collection** button in the top right corner of the UI component editor. All collections are generated as code with real-time subscriptions automatically set up.

## Data binding

Amplify Studio offers a visual way to bind collections to items in your data model. Collection items can be filtered, sorted, or linked to specific records from the content management view.

1. Launch [Amplify Studio](/console/adminui/start/#logging-in-and-creating-an-app) for an app
2. Create a [collection](/console/tutorial/collections/) from a component
3. Link collection to a data model
4. Set filters to customize what data should be displayed
5. Set sort conditions to customize how the data should be displayed
   > **Note:** If your component doesn't have a property backed by a data model, then you need to manually map a component's property to a designated data model field.

![Screenshot showing data binding](/images/console/ui-collections-databind.png)

### Set filters

Filters control what records are displayed in a collection.

![Screenshot showing setting filters](/images/console/ui-collections-set-filters.png)

### Set sort conditions

Sort conditions control the direction records are displayed in a collection.

![Screenshot showing setting sort conditions](/images/console/ui-collections-set-sort-conditions.png)

## Edit layout

You can edit some of the Amplify UI [collection properties](https://ui.docs.amplify.aws/react/components/collection) directly in Studio. Changes to the layout properties (e.g. List vs. grid, direction, order, padding) are reflected in the real-time preview.

![Screenshot showing collection layout edit](/images/console/ui-collections-layout.png)