The "Container" component allows to group other components. It is also possible to iterate arrays if the Data Field is set. In that case, the "Container" is used as a template to render each row in the data set. It is possible to nest multiple "Container" components.

Grouping, filtering, sorting option is the same for the container as for the table.



[
{
"line_items": [
{
"name": "Singing Bowl Carved With Brick-Red Highlights And Striking Tool",
"vendor": "Utility Handicrafts",
"image_1": "https://cdn.shopify.com/s/files/1/0257/9571/products/FBM2MA220_8233032b-61a1-4083-8dac-eecc704f4466.jpeg?v=1403526067",
"product_id": "333813489"
},
{
"name": "Onyx Chess Squares Long Box",
"vendor": "Home Decor Accessories",
"image_1": "https://cdn.shopify.com/s/files/1/0257/9571/products/FBK2036_2_8e8a94b1-014c-4e15-b16f-938da6f0a23d.jpeg?v=1403526097",
"product_id": "333813141"
},
{
"name": "Ganesh Statue, Lying On Cobra",
"vendor": "Statues And Sculptures",
"image_1": "https://cdn.shopify.com/s/files/1/0257/9571/products/FBK2032.jpeg?v=1403526037",
"product_id": "333812817"
}
]
}
]

Usecases of grouping other components in the "Container" Component






"Group by" option in the container component
In the Container component when you apply the group by option, then the Container is iterated for each group. Once you apply the grouping, you will have "magic" data field "grouped_rows" which contains array of rows with the same name.

If you have dataset for the container like this
{
"items": [{
"name": "Test",
"value": 1
}, {
"name": "Test",
"value": 1
}, {
"name": "Test 2",
"value": 1
}]
}
Then after grouping you will have
{
"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
}]
}]
}

The sum function should be applied to the "grouped_rows" e.g {% sum({grouped_rows::value}) %}

For more information about Grouping option, please, see this article.

Updated on: 30 / 04 / 2021