> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.pdfgeneratorapi.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Container Component

The Container component allows you to group other components and iterate over a list of data when a Data Field is set. In this case, the container acts as a row and is used to dynamically render each record from the dataset.

${frame}[Container Component](https://www.loom.com/embed/22357ee746af4b2398325202b3163181?sid=98ffb046-1b33-4335-b87a-c8efa9dd7056)

### How to set up the container

The container iterates over an array when a **Data field** is set, so the array has to be assigned before the child components get their data fields.

1. Add the **Container** to the template and open its **Properties** tab.
2. In **Data field**, select the array you want to iterate over, for example `line_items` from the example JSON dataset below.
3. Add the components you need inside the container, for example Text, Image, or QR code. When a component is placed into the container, the container blinks to confirm that it is part of it.
4. Assign data fields to those child components.

||| Important: The placeholders inside the container must not contain the name of the assigned array. Use {product_name} instead of {line_items::product_name}, otherwise the rows are not iterated correctly.

**Example JSON dataset:**

```
[
   {
      "line_items":[
         {
            "product_name":"Singing Bowl Carved With Brick-Red Highlights And Striking Tool",
            "quantity":1,
            "image":"https://cdn.shopify.com/s/files/1/0257/9571/products/FBM2MA220_8233032b-61a1-4083-8dac-eecc704f4466.jpeg?v=1403526067",
            "sku":"333813489"
         },
         {
            "product_name":"Handcrafted Decorative Plate",
            "quantity":1,
            "image":"https://cdn.shopify.com/s/files/1/0257/9571/products/FBK2036_2_8e8a94b1-014c-4e15-b16f-938da6f0a23d.jpeg?v=1403526097",
            "sku":"333813141"
         },
         {
            "product_name":"Onyx Chess Squares Long Box",
            "quantity":2,
            "image":"https://cdn.shopify.com/s/files/1/0257/9571/products/FBK2032.jpeg?v=1403526037",
            "sku":"333812817"
         }
      ]
   }
]
```

| It is also possible to nest multiple Container components. For more information, see [this article](https://support.pdfgeneratorapi.com/en/article/how-to-create-nested-array-multidimensional-array-1xwmauu/).
---

### Properties Tab

Besides the basic settings of the component, such as its position and size, the **Properties** tab of the container offers these options:

* **Split row on page change** – Splits content that does not fit on the page at the page break instead of moving the whole record to the next page.
* **Iterate from left to right** – Places the records next to each other, for example for a gallery layout, instead of from top to bottom.
* **Spacing between rows** – Sets the space in pixels between the iterated records.
* **Advanced Settings** – Additional options, described in the next section.

#### Advanced Settings

Click **Advanced Settings** in the **Properties** tab to open the options for sorting, filtering, and grouping the records.

###### Sorting & Filtering

Sorting and filtering are essential features for working with dynamic data. Using the **Sort by** and **Filter by** options in the **Advanced settings**, you can define the order in which records appear and display only those that match specific conditions.

You can add several **Sort by** rules, and they are applied in the order in which they were created.

||| **Important:** Several **Filter by** rules are connected with **AND**, so a record is displayed only if it meets all of them. For OR logic, select **Expression** as the operator and write the condition with the expression language.

${frame}[Sorting & Filtering](https://www.loom.com/embed/f444d0cfaa0e499c98b7ba15bbcfb8f4?sid=9d7f62f7-730d-4c6a-8ea0-666bbc070928)

###### Group By Option

In the Container component, when you apply the **Group by** option, the container iterates over each group separately. Once grouping is applied, a special data field **grouped_rows** becomes available. This data field contains an array of rows that share the same group name.

For example, if your dataset looks like this:
```
{
	"items": [{
		"name": "Test",
		"value": 1
	}, {
		"name": "Test",
		"value": 1
	}, {
		"name": "Test 2",
		"value": 1
	}]
}
```

After grouping, the data will be transformed into:
```
{
	"items": [{
		"name": "Test",
		"value": 1,
		"grouped_rows": [{
			"name": "Test",
			"value": 1
		}, {
			"name": "Test",
			"value": 1
		}]
	}, {
		"name": "Test 2",
		"value": 1,
		"grouped_rows": [{
			"name": "Test 2",
			"value": 1
		}]
	}]
}
```

To sum a specific data field within each group, apply the sum function to the **grouped_rows** array:  {% sum({grouped_rows::value}) %}

For more information about this option, refer to [this article](https://support.pdfgeneratorapi.com/en/article/how-to-use-the-group-by-option-with-the-table-or-container-component-156ec5a/).
---

### Advanced Tab

* **Unique identifier** – Assigns a unique identifier to the component, which makes it easy to find and update via the API and to navigate to in the Components list.
* **Lock position** – Locks the component in a defined position, preventing it from being affected by other components and ensuring it doesn’t affect them.
* **Auto shrink** – Adjusts the container's height based on the content's height.
---
### Related articles you may find helpful

* [Common use-cases of the Expression language](/en/article/common-use-cases-of-the-expression-language-1seclga/)
* [How to embed editor to my application?](/en/article/how-to-embed-editor-to-my-application-tmxkg5/)
* [How to set up alternate rows in the Container/Table component?](/en/article/how-to-set-up-alternate-rows-in-the-containertable-component-1tod7xg/)