Handsontable example

by handsoncode

HTML

<div id="example"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

CSS

.handsontable .ht_nestingParent,
.handsontable .ht_nestingParent ~ td {
  background: #B5B5B5;
  color: #222;
}

Babel + JSX

const 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',
    ...