Skip to main content
Fluid Primitives

ui:listCollection

View Sourcefor ListCollectionViewHelper viewhelper↗

Create a ListCollection from an array of items.

This is needed for components like Select that expect a Zag.js ListCollection instance. This ViewHelper is a first approach to get this DX working. Currently you should format your items like {value: string, label: string, disabled: boolean}.

The itemToString, itemToValue, isItemDisabled and groupBy props are currently supported as key props like groupByKey.

Example

<ui:listCollection
    items="{
        0: {value: 'apple', label: 'Apple'},
        1: {value: 'banana', label: 'Banana', disabled: true}
    }"
    as="collection"
/>

Grouped example:

<ui:listCollection
    items="{
        0: {value: 'apple', label: 'Apple', type: 'Fruits'},
        1: {value: 'banana', label: 'Banana', disabled: true, type: 'Fruits'},
        2: {value: 'carrot', label: 'Carrot', type: 'Vegetables'},
        3: {value: 'broccoli', label: 'Broccoli', type: 'Vegetables'}
    }"
    as="collection"
    groupByKey="type"
/>

Arguments

Name Type Description Required Default
as string Variable name to assign the result to No -
items array The items of the collection. {value: string, label: string, disabled: boolean} Yes -
itemToValueKey string The key to use for the item value. No -
itemToStringKey string The key to use for the item label. No -
isItemDisabledKey string The key to use for the item disabled state. No -
groupByKey string The key to use for grouping items. No -
groupSort array|string Sorting for groups. No -