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
Rebekah	Kunde	Melvin.Koelpin29@yahoo.com	LB	Maudville
Cameron	Klein	Theresia_Muller79@hotmail.com	MW	Harryton
Paula	Carroll	Javon.Stanton@gmail.com	GM	Bogisichside
Bert	Steuber	Gregoria59@yahoo.com	KG	Montyshire
Novella	Cole	Doug17@hotmail.com	ZM	West Jalenborough

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
Jazmyne	Swaniawski	Branson.West@yahoo.com
Aubrey	Rowe	Wava96@hotmail.com
Kallie	Hegmann	Herminia54@gmail.com
Keenan	Daugherty	Melody79@hotmail.com
Obie	Lubowitz	Yoshiko_Hammes96@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
Marquise	Gerhold	Madison.Fadel26@gmail.com
Frederick	Bergstrom	Isobel.Trantow6@gmail.com
Savannah	Wisozk	Carol_Hoeger36@gmail.com
Aisha	Heidenreich	Makayla.Durgan@yahoo.com
Nikki	Zieme	Gussie.Veum34@hotmail.com
Kyra	MacGyver	Montana.Walker34@gmail.com
Trevor	Toy	Loyal.Kohler42@gmail.com
Florida	Hyatt	Tyreek.Hagenes62@gmail.com
Alexandra	Hilpert	Norwood_Runolfsson13@hotmail.com
Paolo	Little	Judson_Schuster@gmail.com
Elaina	Kessler	Nicklaus_Homenick75@hotmail.com
Stanton	Heaney	Elissa95@gmail.com
Lucile	Bayer	Buck89@hotmail.com
Karen	Lowe	Greg.Johnson@hotmail.com
Rosetta	Gusikowski	Trisha_Marvin14@hotmail.com
Alfreda	Kuhlman	Judson42@hotmail.com
Meghan	Pfannerstill	Gerardo52@gmail.com
Isabel	Nitzsche	Angeline75@gmail.com
Teagan	Kutch	Sonya_Gleichner@hotmail.com
Salvador	Rosenbaum	Sheila.Kovacek55@yahoo.com
Alene	Hahn	Kelvin.Kemmer@yahoo.com
Jerome	Koss	Alexandra_Rice@hotmail.com
Camron	Cremin	Ed.Mohr@hotmail.com
Timmothy	Stracke	Taylor.Greenholt@yahoo.com
Ella	Schmitt	Tyreek72@hotmail.com
Agustin	Strosin	Vicenta_Stamm@gmail.com
Brisa	Wolff	Justice_Graham@yahoo.com
Newton	Yost	Loren32@hotmail.com
Nicholaus	Hackett	Dexter_Marks72@gmail.com
Elisha	Steuber	Alvena.Kshlerin68@yahoo.com
Muhammad	Nitzsche	Edwardo20@gmail.com
Johan	O'Kon	Jasper_Berge@hotmail.com
Savion	Orn	Odessa.Marks@yahoo.com
Catharine	Collins	Maryse_Pfeffer@hotmail.com
Hilda	Schmeler	Vinnie.Hane@hotmail.com
Gunnar	Beatty	Jamir.Crona92@gmail.com
Anahi	Ritchie	Justus10@hotmail.com
Aubree	Kunde	Casey39@yahoo.com
Hollie	Hansen	Bria_Greenfelder@gmail.com
Dave	Altenwerth	Kamille_Johns28@yahoo.com
Jose	Gulgowski	Ines_Aufderhar@gmail.com
Spencer	Cremin	Imelda27@hotmail.com
Santiago	Boehm	Jordane.Simonis16@yahoo.com
Angeline	Schroeder	Ellis15@gmail.com
Brittany	Hamill	Mitchel.Runolfsson42@gmail.com
Hulda	Grimes	Clinton.Hills29@hotmail.com
Bessie	Wilderman	Alice36@yahoo.com
Casandra	Predovic	Jaquan97@yahoo.com
Lourdes	Parker	Tyler_Terry@gmail.com
Ezequiel	Effertz	Keenan22@hotmail.com