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
Queenie Bechtelar	541-417-3152	[email protected]	Judyberg	Andorra
Amanda Roob	477-426-2787	[email protected]	Goldnerchester	Northern Mariana Islands
Belle Balistreri	367-887-0002	[email protected]	Port Chris	China
Carmella Barton	243-799-3601	[email protected]	Ramirohaven	El Salvador
Kolby Rosenbaum	888-415-1035	[email protected]	West Erwin	Guadeloupe
Kaley Stehr	293-607-8985	[email protected]	Jovannytown	Montserrat
Kristopher Schaden	740-989-0292	[email protected]	Stefanville	Belarus
Norval Bechtelar	511-232-7884	[email protected]	Alvisbury	Guam
Larissa Kuhlman	493-470-7172	[email protected]	Lueilwitzchester	Trinidad and Tobago
Dell Terry	641-218-0123	[email protected]	South Sarai	Zimbabwe
Natalie Stracke	515-900-4861	[email protected]	Grimesville	Bulgaria
Belle Cole	166-859-5550	[email protected]	East Kelsie	Nauru
Waldo Beier	964-729-6823	[email protected]	Clarabellefurt	Uganda
Enos Orn	663-856-9962	[email protected]	Ronaldostad	Serbia
Nikita Von	295-175-7092	[email protected]	Ernestineshire	Angola
Barney Kutch	125-316-5218	[email protected]	Port Oceane	Cook Islands
Lloyd Koss	754-447-3275	[email protected]	Lake Valentinbury	Turkmenistan
Cecelia Abshire	060-455-3769	[email protected]	Russelchester	China
Branson Block	775-458-2253	[email protected]	East Benny	Suriname
Delbert Zemlak	460-644-8968	[email protected]	New Leonel	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