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
Vernice Volkman	416-146-3012	[email protected]	West Hazel	Solomon Islands
Mckayla Schmidt	737-945-3806	[email protected]	East Linamouth	Jordan
Carlos Schmitt	765-361-6520	[email protected]	New Shyanneton	United States of America
Mathias Donnelly	495-544-3988	[email protected]	Marieberg	Kiribati
Winona Legros	185-221-2096	[email protected]	Maxinemouth	Marshall Islands
Emmet Witting	751-951-8068	[email protected]	North Gisselle	Djibouti
Tavares Franecki	391-455-5738	[email protected]	East Aylamouth	Gabon
Spencer Stiedemann	081-613-9390	[email protected]	East Nyasiabury	Timor-Leste
Brooks Hammes	447-736-1514	[email protected]	West Torreymouth	Christmas Island
Alford Mertz	798-129-3803	[email protected]	West Akeemfurt	Tokelau
Betty Dibbert	539-135-7735	[email protected]	Port Hortense	Kiribati
Marta Jacobson	742-779-5176	[email protected]	West Verla	Malaysia
Rashad Windler	813-049-3741	[email protected]	Meaganberg	Uruguay
Aracely Dooley	282-188-3354	[email protected]	West Lurlineville	Switzerland
Mason Moore	265-466-2637	[email protected]	Baumbachville	Gabon
Maida Conn	368-797-1911	[email protected]	Lake Ezra	Hong Kong
Frederic Feil	022-194-9482	[email protected]	Jovannyland	Cote d'Ivoire
Nestor Romaguera	815-978-8462	[email protected]	West Israel	Lao People's Democratic Republic
Odessa Rowe	982-233-0807	[email protected]	Kacibury	Albania
Roberto Koelpin	215-772-4307	[email protected]	Satterfieldville	Tajikistan

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