Available in the Full Version

Data Grid - Multi-Column Headers

Customer IDCompany InformationAddress InformationPhone Information
Company NameContact NameContact TitleLocal AddressPostal CodePhoneFax
AddressCity
ALFKIAlfreds FutterkisteMaria AndersSales RepresentativeObere Str. 57Berlin12209030-0074321030-0076545
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 2222México D.F.05021(5) 555-4729(5) 555-3745
ANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 2312México D.F.05023(5) 555-3932 
AROUTAround the HornThomas HardySales Representative120 Hanover Sq.LondonWA1 1DP(171) 555-7788(171) 555-6750
BERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8LuleåS-958 220921-12 34 650921-12 34 67
BLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 57Mannheim683060621-084600621-08924
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place KléberStrasbourg6700088.60.15.3188.60.15.32
BOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 67Madrid28023(91) 555 22 82(91) 555 91 99
BONAPBon app'Laurence LebihanOwner12, rue des BouchersMarseille1300891.24.45.4091.24.45.41
BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager23 Tsawassen Blvd.TsawassenT2F 8M4(604) 555-4729(604) 555-3745
BSBEVB's BeveragesVictoria AshworthSales RepresentativeFauntleroy CircusLondonEC2 5NT(171) 555-1212 
CACTUCactus Comidas para llevarPatricio SimpsonSales AgentCerrito 333Buenos Aires1010(1) 135-5555(1) 135-4892
CENTCCentro comercial MoctezumaFrancisco ChangMarketing ManagerSierras de Granada 9993México D.F.05022(5) 555-3392(5) 555-7293
CHOPSChop-suey ChineseYang WangOwnerHauptstr. 29Bern30120452-076545 
COMMIComércio MineiroPedro AfonsoSales AssociateAv. dos Lusíadas, 23Sao Paulo05432-043(11) 555-7647 
CONSHConsolidated HoldingsElizabeth BrownSales RepresentativeBerkeley Gardens 12 BreweryLondonWX1 6LT(171) 555-2282(171) 555-9199
DRACDDrachenblut DelikatessenSven OttliebOrder AdministratorWalserweg 21Aachen520660241-0391230241-059428
DUMONDu monde entierJanine LabruneOwner67, rue des Cinquante OtagesNantes4400040.67.88.8840.67.89.89
EASTCEastern ConnectionAnn DevonSales Agent35 King GeorgeLondonWX3 6FW(171) 555-0297(171) 555-3373
ERNSHErnst HandelRoland MendelSales ManagerKirchgasse 6Graz80107675-34257675-3426
 

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/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.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>