Skip to main content
Fluid Primitives

ui:listCollection

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 null
items ListCollectionItem The items of the collection. {value: string, label: string, disabled: boolean} Yes null
itemToValueKey string The key to use for the item value. No null
itemToStringKey string The key to use for the item label. No null
isItemDisabledKey string The key to use for the item disabled state. No null
groupByKey string The key to use for grouping items. No null
groupSort array|string Sorting for groups. No null