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
Jovani Spinka350-754-9339[email protected]CummingsviewBrazil
Juana Robel514-688-2235[email protected]UlisesviewBritish Virgin Islands
Maximillia Little896-324-7915[email protected]HilpertboroughParaguay
Donato Connelly767-973-0739[email protected]GinachesterBouvet Island (Bouvetoya)
Hester Lehner844-061-1490[email protected]OthalandGrenada
Chelsea Reinger143-247-9024[email protected]WolfsideZambia
Sydni Johnson020-271-1625[email protected]DoloreschesterPuerto Rico
Faustino Kassulke904-297-8785[email protected]MillschesterNicaragua
Sienna Beatty921-964-3486[email protected]MadelynvilleSerbia
Aubrey Torphy755-890-6200[email protected]CoralandSaint Pierre and Miquelon
Nigel Kulas089-231-7086[email protected]New IssacboroughMozambique
Dante Pacocha136-158-3033[email protected]East VaughnfortGhana
Polly Armstrong217-084-7211[email protected]HeidenreichburghPakistan
Ezequiel Robel576-799-4795[email protected]AnastasiaburghIceland
Beryl Veum838-770-6027[email protected]SpinkamouthReunion
Jannie Hudson455-873-1196[email protected]UptonsideNiue
King Dickens705-082-9377[email protected]Lake ElviestadFalkland Islands (Malvinas)
Otto Harris468-145-6421[email protected]Port RossburghTaiwan
Brandon McDermott045-414-1768[email protected]Lake AlessiaCosta Rica
Florine Beier423-565-7525[email protected]New ReeseAntigua and Barbuda
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