ui:listCollection

Turns a list of items into the collection that Select and Combobox take as collection. The client rebuilds it as a Zag.js ListCollection.

<ui:listCollection
    items="{
        0: {value: 'de', label: 'Germany'},
        1: {value: 'fr', label: 'France'},
        2: {value: 'ch', label: 'Switzerland', disabled: true}
    }"
    as="countries"
/>

<ui:select.root collection="{countries}">...</ui:select.root>

Name the key that holds the group with groupByKey:

<ui:listCollection
    items="{
        0: {value: 'de', label: 'Germany', region: 'Europe'},
        1: {value: 'fr', label: 'France', region: 'Europe'},
        2: {value: 'us', label: 'United States', region: 'North America'},
        3: {value: 'ca', label: 'Canada', region: 'North America'}
    }"
    as="countries"
    groupByKey="region"
/>

groupSort takes asc, desc or a list of group keys in the order you want.

An item is an array or an object with a value, a label and optionally disabled. When your items use other keys, name them with itemToValueKey, itemToStringKey and isItemDisabledKey. A key can be a dot path such as country.isoCode.

Only the value, label, disabled flag and group of an item reach the page. Every other key, like the columns of a database record, stays on the server, so a template can still read it from item.original.