Available in the Full Version
Data Grid - Multi-Column Headers
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Multi-Column Headers feature of the igGrid which allows you to group columns under a parent column header.
This sample has three multi-column header columns. "Company Information" and "Phone Information" have two levels while "Address Information" has three levels.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<table id="grid1"></table>
<script src="/data-files/nw-customers.js"></script>
<script>
$(function () {
$("#grid1").igGrid({
width: "100%",
height: "500px",
autoGenerateColumns: false,
dataSource: nwCustomers,
responseDataKey: "results",
columns: [
{ headerText: "Customer ID", key: "CustomerID", dataType: "string", width: "100px" },
{
headerText: "Company Information",
group: [
{ headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px" },
{ headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px" },
{ headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
]
},
{
headerText: "Address Information",
group: [
{
headerText: "Local Address",
group: [
{ headerText: "Address", key: "Address", dataType: "string", width: "150px" },
{ headerText: "City", key: "City", dataType: "string", width: "100px" }
]
},
{ headerText: "Postal Code", key: "PostalCode", dataType: "string", width: "100px" }
]
},
{
headerText: "Phone Information",
group: [
{ headerText: "Phone", key: "Phone", dataType: "string", width: "150px" },
{ headerText: "Fax", key: "Fax", dataType: "string", width: "150px" }
]
}
],
features: [
{
name: 'MultiColumnHeaders'
},
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'CustomerID',
classes: 'ui-hidden-phone ui-hidden-tablet'
},
{
columnKey: 'ContactTitle',
classes: 'ui-hidden-phone ui-hidden-tablet'
},
{
columnKey: 'PostalCode',
classes: 'ui-hidden-phone'
},
{
columnKey: 'Phone',
classes: 'ui-hidden-phone'
},
{
columnKey: 'Fax',
classes: 'ui-hidden-phone'
}
]
},
]
});
});
</script>
</body>
</html>
var nwCustomers = {
"results": [{
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ALFKI')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ALFKI",
"CompanyName": "Alfreds Futterkiste",
"ContactName": "Maria Anders",
"ContactTitle": "Sales Representative",
"Address": "Obere Str. 57",
"City": "Berlin",
"Region": null,
"PostalCode": "12209",
"Country": "Germany",
"Phone": "030-0074321",
"Fax": "030-0076545",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ALFKI')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ALFKI')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANATR')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ANATR",
"CompanyName": "Ana Trujillo Emparedados y helados",
"ContactName": "Ana Trujillo",
"ContactTitle": "Owner",
"Address": "Avda. de la Constituci\u00f3n 2222",
"City": "M\u00e9xico D.F.",
"Region": null,
"PostalCode": "05021",
"Country": "Mexico",
"Phone": "(5) 555-4729",
"Fax": "(5) 555-3745",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANATR')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANATR')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANTON')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ANTON",
"CompanyName": "Antonio Moreno Taquer\u00eda",
"ContactName": "Antonio Moreno",
"ContactTitle": "Owner",
"Address": "Mataderos 2312",
"City": "M\u00e9xico D.F.",
"Region": null,
"PostalCode": "05023",
"Country": "Mexico",
"Phone": "(5) 555-3932",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANTON')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANTON')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('AROUT')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "AROUT",
"CompanyName": "Around the Horn",
"ContactName": "Thomas Hardy",
"ContactTitle": "Sales Representative",
"Address": "120 Hanover Sq.",
"City": "London",
"Region": null,
"PostalCode": "WA1 1DP",
"Country": "UK",
"Phone": "(171) 555-7788",
"Fax": "(171) 555-6750",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('AROUT')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('AROUT')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BERGS')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BERGS",
"CompanyName": "Berglunds snabbk\u00f6p",
"ContactName": "Christina Berglund",
"ContactTitle": "Order Administrator",
"Address": "Berguvsv\u00e4gen 8",
"City": "Lule\u00e5",
"Region": null,
"PostalCode": "S-958 22",
"Country": "Sweden",
"Phone": "0921-12 34 65",
"Fax": "0921-12 34 67",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BERGS')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BERGS')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLAUS')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BLAUS",
"CompanyName": "Blauer See Delikatessen",
"ContactName": "Hanna Moos",
"ContactTitle": "Sales Representative",
"Address": "Forsterstr. 57",
"City": "Mannheim",
"Region": null,
"PostalCode": "68306",
"Country": "Germany",
"Phone": "0621-08460",
"Fax": "0621-08924",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLAUS')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLAUS')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLONP')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BLONP",
"CompanyName": "Blondesddsl p\u00e8re et fils",
"ContactName": "Fr\u00e9d\u00e9rique Citeaux",
"ContactTitle": "Marketing Manager",
"Address": "24, place Kl\u00e9ber",
"City": "Strasbourg",
"Region": null,
"PostalCode": "67000",
"Country": "France",
"Phone": "88.60.15.31",
"Fax": "88.60.15.32",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLONP')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLONP')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOLID')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BOLID",
"CompanyName": "B\u00f3lido Comidas preparadas",
"ContactName": "Mart\u00edn Sommer",
"ContactTitle": "Owner",
"Address": "C/ Araquil, 67",
"City": "Madrid",
"Region": null,
"PostalCode": "28023",
"Country": "Spain",
"Phone": "(91) 555 22 82",
"Fax": "(91) 555 91 99",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOLID')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOLID')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BONAP')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BONAP",
"CompanyName": "Bon app'",
"ContactName": "Laurence Lebihan",
"ContactTitle": "Owner",
"Address": "12, rue des Bouchers",
"City": "Marseille",
"Region": null,
"PostalCode": "13008",
"Country": "France",
"Phone": "91.24.45.40",
"Fax": "91.24.45.41",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BONAP')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BONAP')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOTTM')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BOTTM",
"CompanyName": "Bottom-Dollar Markets",
"ContactName": "Elizabeth Lincoln",
"ContactTitle": "Accounting Manager",
"Address": "23 Tsawassen Blvd.",
"City": "Tsawassen",
"Region": "BC",
"PostalCode": "T2F 8M4",
"Country": "Canada",
"Phone": "(604) 555-4729",
"Fax": "(604) 555-3745",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOTTM')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOTTM')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BSBEV')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BSBEV",
"CompanyName": "B's Beverages",
"ContactName": "Victoria Ashworth",
"ContactTitle": "Sales Representative",
"Address": "Fauntleroy Circus",
"City": "London",
"Region": null,
"PostalCode": "EC2 5NT",
"Country": "UK",
"Phone": "(171) 555-1212",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BSBEV')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BSBEV')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CACTU')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CACTU",
"CompanyName": "Cactus Comidas para llevar",
"ContactName": "Patricio Simpson",
"ContactTitle": "Sales Agent",
"Address": "Cerrito 333",
"City": "Buenos Aires",
"Region": null,
"PostalCode": "1010",
"Country": "Argentina",
"Phone": "(1) 135-5555",
"Fax": "(1) 135-4892",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CACTU')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CACTU')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CENTC')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CENTC",
"CompanyName": "Centro comercial Moctezuma",
"ContactName": "Francisco Chang",
"ContactTitle": "Marketing Manager",
"Address": "Sierras de Granada 9993",
"City": "M\u00e9xico D.F.",
"Region": null,
"PostalCode": "05022",
"Country": "Mexico",
"Phone": "(5) 555-3392",
"Fax": "(5) 555-7293",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CENTC')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CENTC')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CHOPS')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CHOPS",
"CompanyName": "Chop-suey Chinese",
"ContactName": "Yang Wang",
"ContactTitle": "Owner",
"Address": "Hauptstr. 29",
"City": "Bern",
"Region": null,
"PostalCode": "3012",
"Country": "Switzerland",
"Phone": "0452-076545",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CHOPS')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CHOPS')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('COMMI')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "COMMI",
"CompanyName": "Com\u00e9rcio Mineiro",
"ContactName": "Pedro Afonso",
"ContactTitle": "Sales Associate",
"Address": "Av. dos Lus\u00edadas, 23",
"City": "Sao Paulo",
"Region": "SP",
"PostalCode": "05432-043",
"Country": "Brazil",
"Phone": "(11) 555-7647",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('COMMI')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('COMMI')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CONSH')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CONSH",
"CompanyName": "Consolidated Holdings",
"ContactName": "Elizabeth Brown",
"ContactTitle": "Sales Representative",
"Address": "Berkeley Gardens 12 Brewery",
"City": "London",
"Region": null,
"PostalCode": "WX1 6LT",
"Country": "UK",
"Phone": "(171) 555-2282",
"Fax": "(171) 555-9199",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CONSH')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CONSH')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DRACD')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "DRACD",
"CompanyName": "Drachenblut Delikatessen",
"ContactName": "Sven Ottlieb",
"ContactTitle": "Order Administrator",
"Address": "Walserweg 21",
"City": "Aachen",
"Region": null,
"PostalCode": "52066",
"Country": "Germany",
"Phone": "0241-039123",
"Fax": "0241-059428",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DRACD')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DRACD')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DUMON')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "DUMON",
"CompanyName": "Du monde entier",
"ContactName": "Janine Labrune",
"ContactTitle": "Owner",
"Address": "67, rue des Cinquante Otages",
"City": "Nantes",
"Region": null,
"PostalCode": "44000",
"Country": "France",
"Phone": "40.67.88.88",
"Fax": "40.67.89.89",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DUMON')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DUMON')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('EASTC')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "EASTC",
"CompanyName": "Eastern Connection",
"ContactName": "Ann Devon",
"ContactTitle": "Sales Agent",
"Address": "35 King George",
"City": "London",
"Region": null,
"PostalCode": "WX3 6FW",
"Country": "UK",
"Phone": "(171) 555-0297",
"Fax": "(171) 555-3373",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('EASTC')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('EASTC')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ERNSH')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ERNSH",
"CompanyName": "Ernst Handel",
"ContactName": "Roland Mendel",
"ContactTitle": "Sales Manager",
"Address": "Kirchgasse 6",
"City": "Graz",
"Region": null,
"PostalCode": "8010",
"Country": "Austria",
"Phone": "7675-3425",
"Fax": "7675-3426",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ERNSH')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ERNSH')/CustomerDemographics"
}
}
}]
};