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.

Name	Contact		Address
Name	Phone	Email	City	Country
Jovani Spinka	350-754-9339	[email protected]	Cummingsview	Brazil
Juana Robel	514-688-2235	[email protected]	Ulisesview	British Virgin Islands
Maximillia Little	896-324-7915	[email protected]	Hilpertborough	Paraguay
Donato Connelly	767-973-0739	[email protected]	Ginachester	Bouvet Island (Bouvetoya)
Hester Lehner	844-061-1490	[email protected]	Othaland	Grenada
Chelsea Reinger	143-247-9024	[email protected]	Wolfside	Zambia
Sydni Johnson	020-271-1625	[email protected]	Doloreschester	Puerto Rico
Faustino Kassulke	904-297-8785	[email protected]	Millschester	Nicaragua
Sienna Beatty	921-964-3486	[email protected]	Madelynville	Serbia
Aubrey Torphy	755-890-6200	[email protected]	Coraland	Saint Pierre and Miquelon
Nigel Kulas	089-231-7086	[email protected]	New Issacborough	Mozambique
Dante Pacocha	136-158-3033	[email protected]	East Vaughnfort	Ghana
Polly Armstrong	217-084-7211	[email protected]	Heidenreichburgh	Pakistan
Ezequiel Robel	576-799-4795	[email protected]	Anastasiaburgh	Iceland
Beryl Veum	838-770-6027	[email protected]	Spinkamouth	Reunion
Jannie Hudson	455-873-1196	[email protected]	Uptonside	Niue
King Dickens	705-082-9377	[email protected]	Lake Elviestad	Falkland Islands (Malvinas)
Otto Harris	468-145-6421	[email protected]	Port Rossburgh	Taiwan
Brandon McDermott	045-414-1768	[email protected]	Lake Alessia	Costa Rica
Florine Beier	423-565-7525	[email protected]	New Reese	Antigua and Barbuda

Controller Index

<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

Documentation

Grid with Complex Header