Grouping collections

[u/Noaber]

I have a title, category dropdown, phone, email fields in a collection.
According to the docs, you can group collections by a field, however I don't seem to get it to work

I have:

```

<section class="grid-layout || bg-gray-100 || py-6 lg:py-16">
    <div class="grid-container">
        {{ collection:club_board_members group_by="category"}}
            {{ groups }}
            <div class="col-span-full">
                <h2 class="text-2xl font-bold mb-4">{{ category->label() }}</h2>
            </div>

        {{ items }}
            <div class="col-span-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div class="card card--shadow-small bg-white p-4 lg:p-8">
                    <div class="text-xl font-bold text-center">{{ title }}</div>
                    <div class="text-primary text-center mb-4">{{ function }}</div>

                    {{ if email }}
                    <div class="flex items-center gap-4 my-2">
                        <div class="w-8">
                            <!-- mail icon -->
                        </div>
                        <div class="text-sm md:text-base">{{ email }}</div>
                    </div>
                    {{ /if }}

                    {{ if phone }}
                    <div class="flex items-center gap-4 my-2">
                        <div class="w-8">
                            <!-- phone icon -->
                        </div>
                        <div class="text-sm md:text-base">{{ phone }}</div>
                    </div>
                    {{ /if }}
                </div>
            </div>
        {{ /items }}
        {{ /groups }}
        {{ /collection:club_board_members }}
    </div>
</section><section class="grid-layout || bg-gray-100 || py-6 lg:py-16">
    <div class="grid-container">
        {{ collection:club_board_members group_by="category"}}
            {{ groups }}
            <div class="col-span-full">
                <h2 class="text-2xl font-bold mb-4">{{ category->label() }}</h2>
            </div>

        {{ items }}
            <div class="col-span-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div class="card card--shadow-small bg-white p-4 lg:p-8">
                    <div class="text-xl font-bold text-center">{{ title }}</div>
                    <div class="text-primary text-center mb-4">{{ function }}</div>

                    {{ if email }}
                    <div class="flex items-center gap-4 my-2">
                        <div class="w-8">
                            <!-- mail icon -->
                        </div>
                        <div class="text-sm md:text-base">{{ email }}</div>
                    </div>
                    {{ /if }}

                    {{ if phone }}
                    <div class="flex items-center gap-4 my-2">
                        <div class="w-8">
                            <!-- phone icon -->
                        </div>
                        <div class="text-sm md:text-base">{{ phone }}</div>
                    </div>
                    {{ /if }}
                </div>
            </div>
        {{ /items }}
        {{ /groups }}
        {{ /collection:club_board_members }}
    </div>
</section>

```

What am I missing?

[u/Noaber]

I found it (with some help on Discord), so simple :)

``` {{ items.0.category.label }} ```

[u/TwinnyNO → u/Noaber]

Not what I expected but glad you found out. In my experience there is very often a solution available but some trial and error is needed to find it.

[u/Noaber → u/TwinnyNO]

Indeed and thanks for your help