# Gallery

A gallery is great for displaying your items in a visually appealing and easy to comprehend way. 

<div data-full-width="true"><figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2Fjwti420ZAIZnZbv4Ipkc%2Fimage.png?alt=media&#x26;token=7167583c-9820-46e5-b91f-381006c572a5" alt=""><figcaption></figcaption></figure></div>

### Gallery data settings

For example, you have a database with product photos, you can display it in the gallery component. Simply select a resource and collection and configure the display:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-MEUTS5Cb65Kk4L2d8GI%2F-MEUZHNQbiX8joctXtPL%2FGIF.gif?alt=media\&token=734fbba7-954a-4cbc-9c56-54654859b39b)

More information about Data & Display Settings, Search and Action you can find in our documentation.

### Group by field

**Group by field** allows you to organize and display your visual content in a more structured and meaningful way.

* **Dynamic Organization**: Automatically group your gallery items based on any field, such as category, date, or custom tags, making it easier for users to navigate and find what they’re looking for.
* **Customizable Display**: Tailor the appearance of each group with customizable headers, separators, and styling options, ensuring your gallery aligns perfectly with your app's design.

{% @arcade/embed flowId="BSGnbcLcdnBzMq48GLoU" url="<https://app.arcade.software/share/BSGnbcLcdnBzMq48GLoU>" %}

{% content-ref url="" %}
[](https://docs.jetadmin.io/user-guide/design-and-structure/components/lists)
{% endcontent-ref %}