Documentation

Report Edit

Grid with Complex Header

Grid control supports up to three header lines. Header cells can be merged using colSpan and rowSpan attributes, similar to how tables work in HTML.

NameContactAddress
PhoneEmailCityCountry
Justus Erdman615-543-8911[email protected]West MurrayBangladesh
Rhiannon Towne273-483-7242[email protected]West RoxannefortPakistan
Wade Brown691-303-0593[email protected]ElsieportSierra Leone
Triston Murray451-023-2547[email protected]ConstancelandBelize
Janice Veum897-127-6911[email protected]MaudielandChile
Lera Nikolaus050-355-9973[email protected]Lake CristinaEritrea
Reid Schinner715-738-3786[email protected]TromptownCyprus
Mustafa Welch482-391-6468[email protected]KayleighfurtIsle of Man
Alize Jewess768-125-1722[email protected]CharlesvilleLebanon
Camden Bergstrom126-482-5048[email protected]West KamrynAustria
Romaine Will191-850-6394[email protected]MajorbergLithuania
Hattie Wintheiser476-340-3886[email protected]FreddyviewLesotho
Brycen McDermott016-007-2192[email protected]South SebastianCayman Islands
Deonte Raynor854-668-0644[email protected]South AlfredMayotte
Stephan Beahan009-978-8416[email protected]New LoyviewBelarus
Margot Grimes548-949-3982[email protected]New ErnaSvalbard & Jan Mayen Islands
Jules Thiel557-051-9650[email protected]AlyciaburyUzbekistan
Elva Aufderhar173-182-4602[email protected]West EliDominican Republic
Denis Reinger101-596-5605[email protected]New RickyNepal
Madie Windler661-573-6441[email protected]West TristonCosta Rica
ControllerIndex
<Grid records-bind='$page.records'
    style={{width: "100%"}}
    columns={[
        {
            header1: {
                text: 'Name',
                rowSpan: 2
            },
            field: 'fullName',
            sortable: true
        }, {
            align: 'center',
            header1: {
                text: 'Contact',
                colSpan: 2
            },
            header2: 'Phone',
            style: "white-space: nowrap",
            field: 'phone'
        }, {
            header2: 'Email',
            style: "font-size: 10px",
            field: 'email',
            sortable: true,
            align: 'center'
        }, {
            header1: {
                text: 'Address',
                colSpan: 2,
                align: 'center',
                allowSorting: false
            },
            header2: 'City',
            field: 'city',
            sortable: true
        }, {
            header2: 'Country',
            field: 'country',
            sortable: true
        },
    ]}
    sorters-bind="$page.sorters"
/>
Copied!Cx Fiddle