You're viewing the legacy site. Visit cxjs.io/docs for the latest documentation. Legacy site. Visit cxjs.io/docs for new docs.

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
Vernice Volkman416-146-3012[email protected]West HazelSolomon Islands
Mckayla Schmidt737-945-3806[email protected]East LinamouthJordan
Carlos Schmitt765-361-6520[email protected]New ShyannetonUnited States of America
Mathias Donnelly495-544-3988[email protected]MariebergKiribati
Winona Legros185-221-2096[email protected]MaxinemouthMarshall Islands
Emmet Witting751-951-8068[email protected]North GisselleDjibouti
Tavares Franecki391-455-5738[email protected]East AylamouthGabon
Spencer Stiedemann081-613-9390[email protected]East NyasiaburyTimor-Leste
Brooks Hammes447-736-1514[email protected]West TorreymouthChristmas Island
Alford Mertz798-129-3803[email protected]West AkeemfurtTokelau
Betty Dibbert539-135-7735[email protected]Port HortenseKiribati
Marta Jacobson742-779-5176[email protected]West VerlaMalaysia
Rashad Windler813-049-3741[email protected]MeaganbergUruguay
Aracely Dooley282-188-3354[email protected]West LurlinevilleSwitzerland
Mason Moore265-466-2637[email protected]BaumbachvilleGabon
Maida Conn368-797-1911[email protected]Lake EzraHong Kong
Frederic Feil022-194-9482[email protected]JovannylandCote d'Ivoire
Nestor Romaguera815-978-8462[email protected]West IsraelLao People's Democratic Republic
Odessa Rowe982-233-0807[email protected]KaciburyAlbania
Roberto Koelpin215-772-4307[email protected]SatterfieldvilleTajikistan
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