Logo

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>
This site is an XMLUI™ app.