Nested Header

Grid.js supports nested headers. All you need to do is to define nested columns attribute in your column config:

Live Editor

const grid = new Grid({ columns: [ { name: 'Name', columns: [{ name: 'First' }, { name: 'Last' }] }, 'Email', { name: 'Address', columns: [{ name: 'Country' }, { name: 'City', columns: [{ name: 'Name' }] }] }, ], data: Array(5).fill().map(x => [ faker.name.firstName(), faker.name.lastName(), faker.internet.email(), faker.address.countryCode(), faker.address.city(), ]) });

const grid = new Grid({
  columns: [
      { 
        name: 'Name',
        columns: [{
          name: 'First'
        }, {
          name: 'Last'
        }]
      },
      'Email',
      { 
        name: 'Address',
        columns: [{
          name: 'Country'
        }, {
          name: 'City',
          columns: [{
            name: 'Name'
          }]
        }]
      },
   ],
  data: Array(5).fill().map(x => [
    faker.name.firstName(),
    faker.name.lastName(),
    faker.internet.email(),
    faker.address.countryCode(),
    faker.address.city(),
  ])
});

Result

Name		Email	Address
First	Last		Country	City
				Name
Tamia	Bergnaum	Theodore8@yahoo.com	IO	Declanburgh
Jaylan	Feil	Jewell.Nader35@hotmail.com	GF	North Aliyahbury
Autumn	Rohan	Wava94@gmail.com	CU	Lubbock
Beryl	Gusikowski	Rigoberto_Maggio@yahoo.com	FJ	Danielmouth
Donny	Klein	Andres78@yahoo.com	CW	Smyrna

You can also enable "sorting" when using nested headers:

Live Editor

const grid = new Grid({ sort: true, columns: [ { name: 'Name', columns: [{ name: 'First' }, { name: 'Last' }] }, 'Email', ], data: Array(5).fill().map(x => [ faker.name.firstName(), faker.name.lastName(), faker.internet.email(), ]) });

const grid = new Grid({
  sort: true,
  columns: [
      { 
        name: 'Name',
        columns: [{
          name: 'First'
        }, {
          name: 'Last'
        }]
      },
      'Email',
   ],
  data: Array(5).fill().map(x => [
    faker.name.firstName(),
    faker.name.lastName(),
    faker.internet.email(),
  ])
});

Result

Name		Email
First	Last
Jalen	Lubowitz	Miguel.Veum6@gmail.com
Omer	Heathcote	Leonardo.Satterfield@hotmail.com
Isabel	Koss	Vicky92@gmail.com
Lauryn	Nicolas	Lora80@gmail.com
Elvie	Walter	Naomi_Mosciski61@gmail.com

It can also be used with fixedHeader option:

Live Editor

const grid = new Grid({ sort: true, fixedHeader: true, height: '400px', columns: [ { name: 'Name', columns: [{ name: 'First' }, { name: 'Last' }] }, 'Email', ], data: Array(50).fill().map(x => [ faker.name.firstName(), faker.name.lastName(), faker.internet.email(), ]) });

const grid = new Grid({
  sort: true,
  fixedHeader: true,
  height: '400px',
  columns: [
      { 
        name: 'Name',
        columns: [{
          name: 'First'
        }, {
          name: 'Last'
        }]
      },
      'Email',
   ],
  data: Array(50).fill().map(x => [
    faker.name.firstName(),
    faker.name.lastName(),
    faker.internet.email(),
  ])
});

Result

Name		Email
First	Last
Johnathan	Wisozk	Lesley57@hotmail.com
Chaya	Dooley	Jamir.Ernser@hotmail.com
Savion	Doyle	Dudley.Bartell@yahoo.com
Oceane	Howell	Emmett75@yahoo.com
King	Orn	Raquel_Jerde10@yahoo.com
Gretchen	Jerde	Arnoldo.Armstrong70@yahoo.com
Vicente	Anderson	Tressie_Veum@yahoo.com
Della	Christiansen	Nicole_Wisozk93@hotmail.com
Shaina	Corwin	Minerva48@gmail.com
Hosea	Hoppe	Gerson_Reichel@gmail.com
Karlie	Schowalter	Katlyn10@gmail.com
Dale	Bogan	Lorine_Feest24@gmail.com
Ulises	Mohr	Vince.Prosacco@gmail.com
Tony	Stoltenberg	Clinton_Koss13@yahoo.com
Arnulfo	Funk	Maya62@hotmail.com
Jolie	Romaguera	Dejuan33@gmail.com
Jayme	Cremin	Greg_Volkman6@gmail.com
Arch	Harber	Pearl9@hotmail.com
Marie	Wilderman	Kayleigh30@yahoo.com
Genesis	Skiles	Damian31@yahoo.com
Baby	Rolfson	Nova_Bogan@yahoo.com
Randi	Bashirian	Aurelia50@gmail.com
Selmer	Bernhard	Kurt.Koelpin@yahoo.com
Fatima	Kohler	Adalberto_McDermott31@gmail.com
Jazmin	Macejkovic	Esteban_Barton@hotmail.com
Chester	Hartmann	Joseph.Jenkins@hotmail.com
Verda	Smith	Carolina.Vandervort73@hotmail.com
Angelica	O'Hara	Marisol_Douglas@gmail.com
Marcel	Lueilwitz	Margarett51@yahoo.com
Vernon	Howe	Julianne_Gutkowski@gmail.com
Brenden	Runolfsdottir	Aryanna_Koepp@yahoo.com
Viola	Rolfson	Juliet.Bernhard@yahoo.com
Frederic	Carroll	Marcia_McClure@yahoo.com
Kaci	Mills	Vernon27@yahoo.com
Derick	Goodwin	Lexus_Lockman@hotmail.com
Eleanora	Monahan	Bobbie.Robel35@gmail.com
Maxine	Bins	Judy.Tromp43@hotmail.com
Tracey	Wilderman	Pietro_Cruickshank61@hotmail.com
Porter	Koch	Miller.Kub78@hotmail.com
Cortez	Haag	Abagail41@hotmail.com
Sedrick	Lehner	Elizabeth_Osinski18@gmail.com
Quinton	Brakus	Kelly.Keeling18@hotmail.com
Nicolas	Gislason	Tania_Waelchi73@yahoo.com
Nicola	Treutel	Mustafa25@hotmail.com
Jude	Hickle	Kaitlin85@gmail.com
Allison	Terry	Albina_Kling0@yahoo.com
Bert	Lueilwitz	Donnie_Haag@hotmail.com
Itzel	Littel	Eloisa_Carter20@yahoo.com
Newton	Abbott	Viola72@yahoo.com
Felton	Christiansen	Rowan.Bode@yahoo.com