Group items in List by a property
<Component name="Test">
<!--
{
items:
[
{ id: 1, name: 'Alice', active: true, group: 'A' },
{ id: 2, name: 'Bob', active: false, group: 'B' },
{ id: 3, name: 'Carol', active: true, group: 'A' },
{ id: 4, name: 'Dave', active: true, group: 'B' }
]
}
-->
<DataSource
id="allPeopleGroupBy"
url="/api/people_groupby"
resultSelector="data.items"
/>
<List data="{allPeopleGroupBy}" groupBy="group">
<property name="groupHeaderTemplate">
<Text variant="subtitle">Group {$group.key}</Text>
</property>
<Text>{$item.name}</Text>
</List>
</Component>
<Component name="Test">
<!--
{
items:
[
{ id: 1, name: 'Alice', active: true, group: 'A' },
{ id: 2, name: 'Bob', active: false, group: 'B' },
{ id: 3, name: 'Carol', active: true, group: 'A' },
{ id: 4, name: 'Dave', active: true, group: 'B' }
]
}
-->
<DataSource
id="allPeopleGroupBy"
url="/api/people_groupby"
resultSelector="data.items"
/>
<List data="{allPeopleGroupBy}" groupBy="group">
<property name="groupHeaderTemplate">
<Text variant="subtitle">Group {$group.key}</Text>
</property>
<Text>{$item.name}</Text>
</List>
</Component>