# GroupedItemList

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/groupedItemList
*Captured:* 2026-04-27T14:58:01.947Z

## GroupedItemList

### Example: Grouped by name (default)

Grouped by name (default)
A

Aaron
bar2

Alice
bar1

Amelia
bar3

B

Barbara
bar5

Bob
bar4

C

Carl
bar7

Catherine
bar8

Charlie
bar6

D

Daniel
bar10

David
bar9

Diana
bar11

E

Edward
bar12

Eleanor
bar14

Eve
bar13

F

Fred
bar15

#### React (tsx)

```tsx
import GroupedItemList from '@rio-cloud/rio-uikit/GroupedItemList';

type CustomItem = {
    id: string;
    name: string;
    foo: string;
    creationDate: string;
};

const items: CustomItem[] = [
    { id: '1', name: 'Alice', foo: 'bar1', creationDate: '2024-09-01' },
    { id: '2', name: 'Aaron', foo: 'bar2', creationDate: '2024-09-01' },
    { id: '3', name: 'Amelia', foo: 'bar3', creationDate: '2024-09-01' },
    { id: '4', name: 'Bob', foo: 'bar4', creationDate: '2024-09-02' },
    { id: '5', name: 'Barbara', foo: 'bar5', creationDate: '2024-09-02' },
    { id: '6', name: 'Charlie', foo: 'bar6', creationDate: '2024-09-03' },
    { id: '7', name: 'Carl', foo: 'bar7', creationDate: '2024-09-03' },
    { id: '8', name: 'Catherine', foo: 'bar8', creationDate: '2024-09-03' },
    { id: '9', name: 'David', foo: 'bar9', creationDate: '2024-09-04' },
    { id: '10', name: 'Daniel', foo: 'bar10', creationDate: '2024-09-04' },
    { id: '11', name: 'Diana', foo: 'bar11', creationDate: '2024-09-05' },
    { id: '12', name: 'Edward', foo: 'bar12', creationDate: '2024-09-05' },
    { id: '13', name: 'Eve', foo: 'bar13', creationDate: '2024-09-06' },
    { id: '14', name: 'Eleanor', foo: 'bar14', creationDate: '2024-09-06' },
    { id: '15', name: 'Fred', foo: 'bar15', creationDate: '2024-09-07' },
];

export default () => {
    // Custom render function for group dividers
    const renderCustomDivider = (groupKey: string) => (
        <div className='text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16'>{groupKey}</div>
    );

    // Custom render function for list items (rendered as <li> when using <ul>)
    const renderCustomItem = (item: CustomItem) => (
        <li
            key={item.id}
            className={`list-group-item display-flex gap-15 padding-y-15 ${item.id === '6' ? 'list-group-item-warning' : ''}`}
        >
            <div className='rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40'>
                <span className='rioglyph rioglyph-user text-size-20 text-color-darker' />
            </div>
            <div>
                <div className='text-bold'>{item.name}</div>
                <div>{item.foo}</div>
            </div>
        </li>
    );

    return (
        <div>
            <h4>Grouped by name (default)</h4>
            <GroupedItemList
                items={items}
                renderDivider={renderCustomDivider}
                renderItem={renderCustomItem}
                listElement='ul' // Render the list as unordered list
                listElementClassName='list-group border rounded shadow-default'
            />
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <h4>Grouped by name (default)</h4>
    <div class="grouped-item-list ">
        <div class="group-divider ">
            <div class="text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16">A</div>
        </div>
        <ul class="list-group border rounded shadow-default">
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Aaron</div>
                    <div>bar2</div>
                </div>
            </li>
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Alice</div>
                    <div>bar1</div>
                </div>
            </li>
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Amelia</div>
                    <div>bar3</div>
                </div>
            </li>
        </ul>
        <div class="group-divider ">
            <div class="text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16">B</div>
        </div>
        <ul class="list-group border rounded shadow-default">
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Barbara</div>
                    <div>bar5</div>
                </div>
            </li>
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Bob</div>
                    <div>bar4</div>
                </div>
            </li>
        </ul>
        <div class="group-divider ">
            <div class="text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16">C</div>
        </div>
        <ul class="list-group border rounded shadow-default">
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Carl</div>
                    <div>bar7</div>
                </div>
            </li>
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Catherine</div>
                    <div>bar8</div>
                </div>
            </li>
            <li class="list-group-item display-flex gap-15 padding-y-15 list-group-item-warning">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Charlie</div>
                    <div>bar6</div>
                </div>
            </li>
        </ul>
        <div class="group-divider ">
            <div class="text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16">D</div>
        </div>
        <ul class="list-group border rounded shadow-default">
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Daniel</div>
                    <div>bar10</div>
                </div>
            </li>
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">David</div>
                    <div>bar9</div>
                </div>
            </li>
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Diana</div>
                    <div>bar11</div>
                </div>
            </li>
        </ul>
        <div class="group-divider ">
            <div class="text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16">E</div>
        </div>
        <ul class="list-group border rounded shadow-default">
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Edward</div>
                    <div>bar12</div>
                </div>
            </li>
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Eleanor</div>
                    <div>bar14</div>
                </div>
            </li>
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Eve</div>
                    <div>bar13</div>
                </div>
            </li>
        </ul>
        <div class="group-divider ">
            <div class="text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16">F</div>
        </div>
        <ul class="list-group border rounded shadow-default">
            <li class="list-group-item display-flex gap-15 padding-y-15 ">
                <div class="rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40">
                    <span class="rioglyph rioglyph-user text-size-20 text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-bold">Fred</div>
                    <div>bar15</div>
                </div>
            </li>
        </ul>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| items | T[] | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an id and name property plus some other attributes. |
| groupBy | keyof T \| ((item: T) => string) | 'name' | The property of the items to group by as a string, or a custom group function. Defaults to name if not provided. |
| groupSortOrder | SortDirectionType | 'asc' | The order in which to sort the groups. Accepts asc for ascending or desc for descending. |
| itemSortOrder | SortDirectionType | 'asc' | The order in which to sort the items inside a group. Accepts asc for ascending or desc for descending. |
| groupSortFunction | (groups: Group[]) => Group[] | — | Sorting function for the groups. |
| itemSortFunction | (items: T[]) => T[] | — | Sorting function for the items within each group. |
| renderDivider | (groupKey: string) => React.ReactNode | — | A custom render function for the group divider. Receives the group key (e.g., letter or date) as a parameter. |
| renderItem | (item: T) => React.ReactNode | — | A custom render function for individual list items. Receives an item as a parameter. |
| listElement | 'div' \| 'ul' | 'div' | Specifies the HTML element to use for the list inside each group. Default is div. Use ul for rendering the list items as <li> elements. |
| listElementClassName | string | — | Optional class name for the list element inside each group. Applied to the div or ul wrapping the items. |
| dividerElementClassName | string | — | Optional class name for the divider element in each group. Applied to the div wrapping each group divider. |
| className | string | — | Optional class name for the outer wrapper element. Applied to the outer div wrapping the entire component. |

### Example: Grouped by date

Grouped by date
Switch group sort order Switch item sort order
2024-09-07

Parcel O
(Pending)

2024-09-06

Truck N
(Delivered)

Truck M
(In Transit)

2024-09-05

Freight L
(Pending)

Freight K
(Delivered)

2024-09-04

Pallet J
(In Transit)

Pallet I
(Pending)

2024-09-03

Container H
(Delivered)

Container G
(In Transit)

Container F
(Pending)

2024-09-02

Package E
(Delivered)

Package D
(In Transit)

2024-09-01

Shipment C
(Pending)

Shipment B
(Delivered)

Shipment A
(In Transit)

#### React (tsx)

```tsx
import { useState } from 'react';

import GroupedItemList, { type Group } from '@rio-cloud/rio-uikit/GroupedItemList';
import Button from '@rio-cloud/rio-uikit/Button';
import { naturalSortByProperty, sortByProperty } from '@rio-cloud/rio-uikit/SortUtils';

type LogisticItem = {
    id: string;
    name: string;
    status: string;
    deliveryDate: string;
};

const logisticItems: LogisticItem[] = [
    { id: '1', name: 'Shipment A', status: 'In Transit', deliveryDate: '2024-09-01' },
    { id: '2', name: 'Shipment B', status: 'Delivered', deliveryDate: '2024-09-01' },
    { id: '3', name: 'Shipment C', status: 'Pending', deliveryDate: '2024-09-01' },
    { id: '4', name: 'Package D', status: 'In Transit', deliveryDate: '2024-09-02' },
    { id: '5', name: 'Package E', status: 'Delivered', deliveryDate: '2024-09-02' },
    { id: '6', name: 'Container F', status: 'Pending', deliveryDate: '2024-09-03' },
    { id: '7', name: 'Container G', status: 'In Transit', deliveryDate: '2024-09-03' },
    { id: '8', name: 'Container H', status: 'Delivered', deliveryDate: '2024-09-03' },
    { id: '9', name: 'Pallet I', status: 'Pending', deliveryDate: '2024-09-04' },
    { id: '10', name: 'Pallet J', status: 'In Transit', deliveryDate: '2024-09-04' },
    { id: '11', name: 'Freight K', status: 'Delivered', deliveryDate: '2024-09-05' },
    { id: '12', name: 'Freight L', status: 'Pending', deliveryDate: '2024-09-05' },
    { id: '13', name: 'Truck M', status: 'In Transit', deliveryDate: '2024-09-06' },
    { id: '14', name: 'Truck N', status: 'Delivered', deliveryDate: '2024-09-06' },
    { id: '15', name: 'Parcel O', status: 'Pending', deliveryDate: '2024-09-07' },
];

export default () => {
    const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
    const [itemSortOrder, setItemSortOrder] = useState<'asc' | 'desc'>('desc');

    const handleChangeSortOrder = () => {
        setSortOrder(prevOrder => (prevOrder === 'asc' ? 'desc' : 'asc'));
    };

    const handleChangeItemSortOrder = () => {
        setItemSortOrder(prevOrder => (prevOrder === 'asc' ? 'desc' : 'asc'));
    };

    // Custom render function for group dividers
    const renderCustomDivider = (groupKey: string) => (
        <div className='text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16'>{groupKey}</div>
    );

    // Custom render function for list items (rendered as <li> when using <ul>)
    const renderSimpleCustomItem = (item: LogisticItem) => (
        <div key={item.id} className='padding-10 border border-bottom-only display-flex gap-5'>
            <div>{item.name}</div>
            <div className='text-light'>({item.status})</div>
        </div>
    );

    // Sorting function for groups by deliveryDate
    const groupSortFunction = (groups: Group[]) => naturalSortByProperty(groups, 'groupKey', sortOrder);

    // Sorting function for items within each group
    const itemSortFunction = (items: LogisticItem[]) => sortByProperty(items, 'name', itemSortOrder);

    return (
        <div>
            <h4>Grouped by date</h4>
            <div className='btn-toolbar'>
                <Button onClick={handleChangeSortOrder}>Switch group sort order</Button>
                <Button onClick={handleChangeItemSortOrder}>Switch item sort order</Button>
            </div>
            <GroupedItemList
                items={logisticItems}
                groupBy={(item: LogisticItem) => item.deliveryDate}
                groupSortOrder={sortOrder}
                groupSortFunction={groupSortFunction}
                itemSortFunction={itemSortFunction}
                renderDivider={renderCustomDivider}
                renderItem={renderSimpleCustomItem}
            />
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <h4>Grouped by date</h4>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default btn-component" tabindex="0">Switch group sort order</button>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Switch item sort order</button>
    </div>
    <div class="grouped-item-list ">
        <div class="group-divider ">
            <div class="text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16">2024-09-07</div>
        </div>
        <div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Parcel O</div>
                <div class="text-light">(Pending)</div>
            </div>
        </div>
        <div class="group-divider ">
            <div class="text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16">2024-09-06</div>
        </div>
        <div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Truck N</div>
                <div class="text-light">(Delivered)</div>
            </div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Truck M</div>
                <div class="text-light">(In Transit)</div>
            </div>
        </div>
        <div class="group-divider ">
            <div class="text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16">2024-09-05</div>
        </div>
        <div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Freight L</div>
                <div class="text-light">(Pending)</div>
            </div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Freight K</div>
                <div class="text-light">(Delivered)</div>
            </div>
        </div>
        <div class="group-divider ">
            <div class="text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16">2024-09-04</div>
        </div>
        <div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Pallet J</div>
                <div class="text-light">(In Transit)</div>
            </div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Pallet I</div>
                <div class="text-light">(Pending)</div>
            </div>
        </div>
        <div class="group-divider ">
            <div class="text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16">2024-09-03</div>
        </div>
        <div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Container H</div>
                <div class="text-light">(Delivered)</div>
            </div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Container G</div>
                <div class="text-light">(In Transit)</div>
            </div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Container F</div>
                <div class="text-light">(Pending)</div>
            </div>
        </div>
        <div class="group-divider ">
            <div class="text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16">2024-09-02</div>
        </div>
        <div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Package E</div>
                <div class="text-light">(Delivered)</div>
            </div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Package D</div>
                <div class="text-light">(In Transit)</div>
            </div>
        </div>
        <div class="group-divider ">
            <div class="text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16">2024-09-01</div>
        </div>
        <div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Shipment C</div>
                <div class="text-light">(Pending)</div>
            </div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Shipment B</div>
                <div class="text-light">(Delivered)</div>
            </div>
            <div class="padding-10 border border-bottom-only display-flex gap-5">
                <div>Shipment A</div>
                <div class="text-light">(In Transit)</div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| items | T[] | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an id and name property plus some other attributes. |
| groupBy | keyof T \| ((item: T) => string) | 'name' | The property of the items to group by as a string, or a custom group function. Defaults to name if not provided. |
| groupSortOrder | SortDirectionType | 'asc' | The order in which to sort the groups. Accepts asc for ascending or desc for descending. |
| itemSortOrder | SortDirectionType | 'asc' | The order in which to sort the items inside a group. Accepts asc for ascending or desc for descending. |
| groupSortFunction | (groups: Group[]) => Group[] | — | Sorting function for the groups. |
| itemSortFunction | (items: T[]) => T[] | — | Sorting function for the items within each group. |
| renderDivider | (groupKey: string) => React.ReactNode | — | A custom render function for the group divider. Receives the group key (e.g., letter or date) as a parameter. |
| renderItem | (item: T) => React.ReactNode | — | A custom render function for individual list items. Receives an item as a parameter. |
| listElement | 'div' \| 'ul' | 'div' | Specifies the HTML element to use for the list inside each group. Default is div. Use ul for rendering the list items as <li> elements. |
| listElementClassName | string | — | Optional class name for the list element inside each group. Applied to the div or ul wrapping the items. |
| dividerElementClassName | string | — | Optional class name for the divider element in each group. Applied to the div wrapping each group divider. |
| className | string | — | Optional class name for the outer wrapper element. Applied to the outer div wrapping the entire component. |

### Example: Example 3

Grouped by custom key with basic styling

A
Air Freight: The transportation of goods via air
Air Waybill (AWB): A document for air shipments detailing the goods and their destination

B
Bill of Lading (B/L): A contract between the shipper and the carrier for ocean transport
Bulk Cargo: Unpackaged goods shipped in large quantities, like grains or coal

C
Cargo: Goods transported by a vehicle such as a ship, truck, or aircraft
Carrier: A company that transports goods via road, rail, sea, or air
Consignee: The person or company receiving the shipment
Customs: Government agency responsible for regulating shipments entering a country

D
Dangerous Goods: Items that require special handling due to safety concerns, like chemicals
Demurrage: A charge for delaying the return of a container beyond the allowed time

F
Freight Forwarder: A company that organizes shipments on behalf of shippers
Full Container Load (FCL): A shipment that fills an entire container

L
Logistics: The management of the flow of goods between the point of origin and consumption
LTL (Less than Truckload): A shipment that doesn’t require a full truckload

V
Vessel: A large ship used to transport goods across seas and oceans

#### React (tsx)

```tsx
import Divider from '@rio-cloud/rio-uikit/Divider';
import GroupedItemList from '@rio-cloud/rio-uikit/GroupedItemList';

type Item = {
    id: string;
    term: string;
    explanation: string;
};

const items = [
    { id: '1', term: 'Air Freight', explanation: 'The transportation of goods via air' },
    {
        id: '2',
        term: 'Air Waybill (AWB)',
        explanation: 'A document for air shipments detailing the goods and their destination',
    },
    {
        id: '3',
        term: 'Bill of Lading (B/L)',
        explanation: 'A contract between the shipper and the carrier for ocean transport',
    },
    { id: '4', term: 'Bulk Cargo', explanation: 'Unpackaged goods shipped in large quantities, like grains or coal' },
    { id: '5', term: 'Cargo', explanation: 'Goods transported by a vehicle such as a ship, truck, or aircraft' },
    { id: '6', term: 'Carrier', explanation: 'A company that transports goods via road, rail, sea, or air' },
    { id: '7', term: 'Consignee', explanation: 'The person or company receiving the shipment' },
    {
        id: '8',
        term: 'Customs',
        explanation: 'Government agency responsible for regulating shipments entering a country',
    },
    {
        id: '9',
        term: 'Demurrage',
        explanation: 'A charge for delaying the return of a container beyond the allowed time',
    },
    {
        id: '10',
        term: 'Dangerous Goods',
        explanation: 'Items that require special handling due to safety concerns, like chemicals',
    },
    { id: '11', term: 'Freight Forwarder', explanation: 'A company that organizes shipments on behalf of shippers' },
    { id: '12', term: 'Full Container Load (FCL)', explanation: 'A shipment that fills an entire container' },
    { id: '13', term: 'LTL (Less than Truckload)', explanation: 'A shipment that doesn’t require a full truckload' },
    {
        id: '14',
        term: 'Logistics',
        explanation: 'The management of the flow of goods between the point of origin and consumption',
    },
    { id: '15', term: 'Vessel', explanation: 'A large ship used to transport goods across seas and oceans' },
];

export default () => {
    // Custom render function for list items (rendered as <li> when using <ul>)
    const renderCustomItem = (item: Item) => (
        <li key={item.id}>
            <span className='text-bold'>{item.term}: </span>
            <span>{item.explanation}</span>
        </li>
    );

    return (
        <div>
            <h5>Grouped by custom key with basic styling</h5>
            <Divider />
            <GroupedItemList
                items={items}
                groupBy='term'
                renderItem={renderCustomItem}
                listElement='ul'
                listElementClassName='margin-bottom-20'
            />
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <h5>Grouped by custom key with basic styling</h5>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div class="grouped-item-list ">
        <div class="group-divider ">A</div>
        <ul class="margin-bottom-20">
            <li>
                <span class="text-bold">Air Freight: </span>
                <span>The transportation of goods via air</span>
            </li>
            <li>
                <span class="text-bold">Air Waybill (AWB): </span>
                <span>A document for air shipments detailing the goods and their destination</span>
            </li>
        </ul>
        <div class="group-divider ">B</div>
        <ul class="margin-bottom-20">
            <li>
                <span class="text-bold">Bill of Lading (B/L): </span>
                <span>A contract between the shipper and the carrier for ocean transport</span>
            </li>
            <li>
                <span class="text-bold">Bulk Cargo: </span>
                <span>Unpackaged goods shipped in large quantities, like grains or coal</span>
            </li>
        </ul>
        <div class="group-divider ">C</div>
        <ul class="margin-bottom-20">
            <li>
                <span class="text-bold">Cargo: </span>
                <span>Goods transported by a vehicle such as a ship, truck, or aircraft</span>
            </li>
            <li>
                <span class="text-bold">Carrier: </span>
                <span>A company that transports goods via road, rail, sea, or air</span>
            </li>
            <li>
                <span class="text-bold">Consignee: </span>
                <span>The person or company receiving the shipment</span>
            </li>
            <li>
                <span class="text-bold">Customs: </span>
                <span>Government agency responsible for regulating shipments entering a country</span>
            </li>
        </ul>
        <div class="group-divider ">D</div>
        <ul class="margin-bottom-20">
            <li>
                <span class="text-bold">Dangerous Goods: </span>
                <span>Items that require special handling due to safety concerns, like chemicals</span>
            </li>
            <li>
                <span class="text-bold">Demurrage: </span>
                <span>A charge for delaying the return of a container beyond the allowed time</span>
            </li>
        </ul>
        <div class="group-divider ">F</div>
        <ul class="margin-bottom-20">
            <li>
                <span class="text-bold">Freight Forwarder: </span>
                <span>A company that organizes shipments on behalf of shippers</span>
            </li>
            <li>
                <span class="text-bold">Full Container Load (FCL): </span>
                <span>A shipment that fills an entire container</span>
            </li>
        </ul>
        <div class="group-divider ">L</div>
        <ul class="margin-bottom-20">
            <li>
                <span class="text-bold">Logistics: </span>
                <span>The management of the flow of goods between the point of origin and consumption</span>
            </li>
            <li>
                <span class="text-bold">LTL (Less than Truckload): </span>
                <span>A shipment that doesn’t require a full truckload</span>
            </li>
        </ul>
        <div class="group-divider ">V</div>
        <ul class="margin-bottom-20">
            <li>
                <span class="text-bold">Vessel: </span>
                <span>A large ship used to transport goods across seas and oceans</span>
            </li>
        </ul>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| items | T[] | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an id and name property plus some other attributes. |
| groupBy | keyof T \| ((item: T) => string) | 'name' | The property of the items to group by as a string, or a custom group function. Defaults to name if not provided. |
| groupSortOrder | SortDirectionType | 'asc' | The order in which to sort the groups. Accepts asc for ascending or desc for descending. |
| itemSortOrder | SortDirectionType | 'asc' | The order in which to sort the items inside a group. Accepts asc for ascending or desc for descending. |
| groupSortFunction | (groups: Group[]) => Group[] | — | Sorting function for the groups. |
| itemSortFunction | (items: T[]) => T[] | — | Sorting function for the items within each group. |
| renderDivider | (groupKey: string) => React.ReactNode | — | A custom render function for the group divider. Receives the group key (e.g., letter or date) as a parameter. |
| renderItem | (item: T) => React.ReactNode | — | A custom render function for individual list items. Receives an item as a parameter. |
| listElement | 'div' \| 'ul' | 'div' | Specifies the HTML element to use for the list inside each group. Default is div. Use ul for rendering the list items as <li> elements. |
| listElementClassName | string | — | Optional class name for the list element inside each group. Applied to the div or ul wrapping the items. |
| dividerElementClassName | string | — | Optional class name for the divider element in each group. Applied to the div wrapping each group divider. |
| className | string | — | Optional class name for the outer wrapper element. Applied to the outer div wrapping the entire component. |