Grouping in Lists

List control supports grouping.

A
Alexandra Larson
Phone: 211-565-2006
City: Ryannfurt
Alycia Koch
Phone: 256-609-2827
City: Jeremieburgh
Antonina Wintheiser
Phone: 856-668-9241
City: New Giovannyshire
Abelardo Keeling
Phone: 168-396-0339
City: West Thelma
4 item(s)
C
Clair Nienow
Phone: 229-211-4008
City: Port Trinity
Cayla Ritchie
Phone: 741-119-6965
City: West Aishamouth
2 item(s)
E
Edythe Kautzer
Phone: 614-306-7303
City: Zoieside
Eula Beier
Phone: 114-913-4273
City: Gracielabury
2 item(s)
G
Gordon Tromp
Phone: 006-620-1892
City: Handville
Guido Harber
Phone: 671-264-2629
City: Devynside
2 item(s)
H
Harry Ebert
Phone: 327-218-6133
City: Giannistad
1 item(s)
K
Karlie Altenwerth
Phone: 548-452-2844
City: Sporerbury
King Marvin
Phone: 365-313-4911
City: North Itzelborough
2 item(s)
L
Lorenz Murazik
Phone: 710-911-3303
City: New Candace
1 item(s)
M
Marcos Steuber
Phone: 147-018-4460
City: Townefurt
1 item(s)
N
Natalia Koss
Phone: 014-657-7457
City: East Glenfort
1 item(s)
P
Pauline Glover
Phone: 813-030-0235
City: Damarisburgh
1 item(s)
R
Randal Nikolaus
Phone: 439-058-7381
City: Feilport
1 item(s)
T
Twila Aufderhar
Phone: 704-769-3966
City: New Hayleychester
1 item(s)
W
Wanda Schneider
Phone: 789-857-2645
City: Port Walton
1 item(s)

<List
    records-bind='$page.records'
    selection={{
        type: KeySelection,
        bind: '$page.selection'
    }}
    grouping={{
        key: {
            firstLetter: {expr: '{$record.fullName}[0]'}
        },
        aggregates: {
            count: {
                type: 'count',
                value: 1
            }
        },
        header: <div style="padding-top: 25px" >
            <strong text-bind="$group.firstLetter"/>
        </div>,
        footer: <strong text-tpl="{$group.count} item(s)"/>
    }}
>
    <strong text-bind="$record.fullName"></strong>
    <br/>
    Phone: <span text-bind="$record.phone" />
    <br/>
    City: <span text-bind="$record.city" />
</List>

Copied!Cx Fiddle

Documentation

Grouping in Lists