Grouping in Lists

List control supports grouping.

B
Bell Hintz
Phone: 152-367-8151
City: South Krystinaborough
1 item(s)
C
Camden Kirlin
Phone: 447-679-7697
City: Stanleyhaven
Connie Jacobson
Phone: 754-300-0845
City: Calebfurt
Chyna Stehr
Phone: 861-337-3061
City: Hoseafurt
3 item(s)
D
Dexter Kirlin
Phone: 729-983-9138
City: Aaliyahberg
1 item(s)
E
Ernestine Sporer
Phone: 830-201-8219
City: Hellerfort
Erin Greenfelder
Phone: 230-659-6997
City: East Tierra
2 item(s)
F
Fletcher Wyman
Phone: 929-013-2294
City: Jakaylafurt
1 item(s)
G
Gordon Carter
Phone: 897-869-7666
City: Devontemouth
Garnet Osinski
Phone: 223-134-4826
City: Cummingsbury
2 item(s)
J
Jean Volkman
Phone: 199-683-6842
City: Rosariochester
1 item(s)
K
Katharina Koch
Phone: 685-720-9218
City: West Rodrick
Kaelyn Lubowitz
Phone: 461-703-9753
City: New Waylon
2 item(s)
L
Lucile Gaylord
Phone: 982-552-7219
City: Lillianbury
Lukas Schiller
Phone: 724-849-4424
City: Kiratown
2 item(s)
P
Philip Hand
Phone: 426-740-1674
City: Earleneshire
1 item(s)
R
Rudolph Durgan
Phone: 145-822-5115
City: Simonisberg
Rudolph Goyette
Phone: 874-960-2405
City: South Name
2 item(s)
S
Sebastian Mosciski
Phone: 544-292-2056
City: Nikolausfurt
Susanna Bednar
Phone: 054-912-0489
City: Rosiestad
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