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
Justus Erdman	615-543-8911	[email protected]	West Murray	Bangladesh
Rhiannon Towne	273-483-7242	[email protected]	West Roxannefort	Pakistan
Wade Brown	691-303-0593	[email protected]	Elsieport	Sierra Leone
Triston Murray	451-023-2547	[email protected]	Constanceland	Belize
Janice Veum	897-127-6911	[email protected]	Maudieland	Chile
Lera Nikolaus	050-355-9973	[email protected]	Lake Cristina	Eritrea
Reid Schinner	715-738-3786	[email protected]	Tromptown	Cyprus
Mustafa Welch	482-391-6468	[email protected]	Kayleighfurt	Isle of Man
Alize Jewess	768-125-1722	[email protected]	Charlesville	Lebanon
Camden Bergstrom	126-482-5048	[email protected]	West Kamryn	Austria
Romaine Will	191-850-6394	[email protected]	Majorberg	Lithuania
Hattie Wintheiser	476-340-3886	[email protected]	Freddyview	Lesotho
Brycen McDermott	016-007-2192	[email protected]	South Sebastian	Cayman Islands
Deonte Raynor	854-668-0644	[email protected]	South Alfred	Mayotte
Stephan Beahan	009-978-8416	[email protected]	New Loyview	Belarus
Margot Grimes	548-949-3982	[email protected]	New Erna	Svalbard & Jan Mayen Islands
Jules Thiel	557-051-9650	[email protected]	Alyciabury	Uzbekistan
Elva Aufderhar	173-182-4602	[email protected]	West Eli	Dominican Republic
Denis Reinger	101-596-5605	[email protected]	New Ricky	Nepal
Madie Windler	661-573-6441	[email protected]	West Triston	Costa Rica

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