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

Loading...

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

Loading...

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

Loading...