Handsontable example

by handsoncode

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@9.0.1/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@9.0.1/dist/handsontable.full.css">
<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>

CSS

* {
  font-family: Sans-serif; font-size: 11px
}

.handsontable .generalStyle {
  background: #eee
}

.handsontable .ht_nestingParent,
.handsontable .ht_nestingParent~td {
  background: #db0d5c;
  color: #fff;
}

JavaScript

var sourceDataObject = [{
    category: 'Best Rock Performance',
    artist: null,
    title: null,
    label: null,
    __children: [{
        title: 'Don\'t Wanna Fight',
        artist: 'Alabama Shakes',
        label: 'ATO Records'
      }, {
        title: 'What Kind Of Man',
        artist: 'Florence & The Machine',
        label: 'Republic'
      }, {
        title: 'Something From Nothing',
        artist: 'Foo Fighters',
        label: 'RCA Records'
      }, {
        title: 'Ex\'s & Oh\'s',
        artist: 'Elle King',
        label: 'RCA Records'
      }, {
        title: 'Moaning Lisa Smile',
        artist: 'Wolf Alice',
        label: 'RCA Records/Dirty Hit'
      }

    ]
  }, {
    category: 'Best Metal Performance',
    __children: [{
      title: 'Cirice',
      artist: 'Ghost',
      label: 'Loma Vista Recordings'
    }, {
      title: 'Identity',
      artist: 'August Burns Red',
      label: 'Fearless Records'
    }, {
      title: '512',
      artist: 'Lamb Of God',
      label: 'Epic Records'
    }, {
      title: 'Thank You',
      artist: 'Sevendust',
      label: '7Bros Records'
    }, {
      title: 'Custer',
      artist: 'Slipknot',
      label: 'Roadrunner Records'
    }, ]
  }, {
    category: 'Best Rock Song',
    __children: [{
      title: 'Don\'t Wanna Fight',
      artist: 'Alabama Shakes',
      label: 'ATO Records',
    }, {
      title: 'Ex\'s & Oh\'s',
      artist: 'Elle King',
      label: 'RCA Records',
    }, {
      title: 'Hold Back The River',
      artist: 'James Bay',
      label: 'Republic',
    }, {
      title: 'Lydia',
      artist: 'Highly Suspect',
      label: '300 Entertainment',
    }, {
      title: 'What Kind Of Man',
      artist: 'Florence & The Machine',
      label: 'Republic',
    }]
  }, {
    category: 'Best Rock Album',
    __children: [{
      title: 'Drones',
      artist: 'Muse',
      label: 'Warner Bros. Records',
    }, {
      title: 'Chaos And The Calm',
      artist: 'James Bay',
     ...