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
Jeanette Kassulke	088-166-7056	[email protected]	South Frieda	Panama
Hosea Hauck	857-703-2130	[email protected]	Bennieview	Dominican Republic
Emelia Bashirian	852-669-1307	[email protected]	Heaneystad	Sao Tome and Principe
Claudia VonRueden	498-583-4142	[email protected]	South Kamren	Congo
Deion Crist	319-733-0441	[email protected]	Randallborough	Morocco
Camylle Hansen	124-850-3345	[email protected]	West Delphine	New Zealand
Jaiden Greenholt	889-473-0252	[email protected]	Audieberg	Saudi Arabia
Aglae Little	990-343-2985	[email protected]	Wisokyborough	Dominica
Tremayne Harvey	699-247-4094	[email protected]	Pabloport	Canada
Mekhi Friesen	854-842-5560	[email protected]	Port Darryl	Tunisia
Morris Kuhic	912-653-6130	[email protected]	East Traceyhaven	Saint Kitts and Nevis
Camron Marks	744-488-9904	[email protected]	North Shane	Saint Lucia
Orville King	798-732-8590	[email protected]	Port Darius	Saint Kitts and Nevis
Albertha Goyette	625-671-2809	[email protected]	Lake Monroe	Saudi Arabia
Jayson Rohan	563-584-7194	[email protected]	New Oliverchester	Montserrat
Shad Hintz	867-172-2168	[email protected]	South Earnest	United States of America
Vita Halvorson	234-419-8753	[email protected]	Gislasonview	Denmark
Arno Simonis	266-876-4448	[email protected]	North Araborough	Uruguay
Ruthie Kris	021-214-4132	[email protected]	Theahaven	Israel
Emely Blanda	612-852-5522	[email protected]	East Annastad	Reunion

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