Grouping in Lists

List control supports grouping.

B
Brice Blick
Phone: 017-506-3352
City: New Kailee
1 item(s)
C
Camron Kessler
Phone: 690-517-9092
City: Janiyaton
1 item(s)
E
Elvie Gulgowski
Phone: 636-638-3108
City: New Linwoodstad
Eleanora Cassin
Phone: 736-639-6066
City: New Addison
Emmy Mueller
Phone: 680-197-5211
City: Lake Samanta
3 item(s)
G
Golda Runolfsson
Phone: 145-584-7562
City: Marvinfurt
1 item(s)
H
Haskell Gleason
Phone: 724-915-1386
City: South Ardella
1 item(s)
J
Jimmie Windler
Phone: 645-985-0704
City: Kattiestad
1 item(s)
K
Kody Heidenreich
Phone: 080-898-8419
City: Wilsonview
Kenna Rau
Phone: 302-388-8823
City: Terenceborough
2 item(s)
M
Martin Kulas
Phone: 421-324-1305
City: Cindyland
Mauricio Ortiz
Phone: 672-572-9894
City: Port Pascale
Moises Keebler
Phone: 524-759-9285
City: New Mikehaven
3 item(s)
P
Paul Halvorson
Phone: 500-906-3704
City: New Ignacio
1 item(s)
R
Roxanne Frami
Phone: 709-536-3231
City: Florineport
1 item(s)
S
Shea Daniel
Phone: 417-947-0178
City: South Bell
Skylar Hahn
Phone: 829-001-3542
City: Medaberg
Skyla Marvin
Phone: 141-033-0563
City: Bertatown
3 item(s)
W
Wilma Schultz
Phone: 785-900-6390
City: Alessandroview
Ward Yost
Phone: 077-151-6150
City: Mattiehaven
2 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