Grouping in Lists

List control supports grouping.

A
Angelica Gerlach
Phone: 624-042-4977
City: Vickiestad
1 item(s)
B
Brandon Mitchell
Phone: 172-918-7137
City: Gretaport
1 item(s)
C
Chet Kovacek
Phone: 800-698-1964
City: New Zechariahmouth
Camila Smitham
Phone: 307-358-9178
City: Tomasachester
Caleigh Jerde
Phone: 777-983-0079
City: VonRuedenfurt
3 item(s)
D
Deven Macejkovic
Phone: 838-023-5724
City: Lake Emmanueltown
Dock Parisian
Phone: 525-746-1692
City: Breitenbergfurt
2 item(s)
F
Felipa Kuhn
Phone: 747-727-1775
City: North Donny
1 item(s)
G
Garrett Jones
Phone: 438-000-0466
City: South Cynthiaville
1 item(s)
H
Hester Littel
Phone: 522-457-3986
City: Hermannside
1 item(s)
K
Kenyatta Pouros
Phone: 583-767-9623
City: East Mable
1 item(s)
L
Lexus Cruickshank
Phone: 151-074-7491
City: Kirstinbury
1 item(s)
M
Marianne Connelly
Phone: 286-576-7120
City: Heavenmouth
1 item(s)
N
Name Murazik
Phone: 238-338-5971
City: Melanyhaven
1 item(s)
O
Orlo Price
Phone: 084-467-3037
City: South Ernesto
1 item(s)
R
Robb Pollich
Phone: 946-632-9129
City: Altheaport
1 item(s)
S
Scotty Emard
Phone: 590-218-9231
City: Pacochaborough
Sylvan Dare
Phone: 319-629-1103
City: West Myah
Spencer Jacobs
Phone: 423-311-3730
City: South Haliefurt
3 item(s)
V
Verna Jacobi
Phone: 053-258-3950
City: Tryciafurt
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