How to change background color of parent rows while using nested rows
HTML
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>
<div id="example"></div>
SCSS
.handsontable .ht_nestingParent,
.handsontable .ht_nestingParent ~ td {
border-top: 1px solid #222;
}
Babel + JSX
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
const example = document.getElementById('example');
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:'Test1',
_children:[]
},{
category:'Test2',
_children:[]
},{
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:'Test3',
_children:[]
},{
category:'Test4',
_children:[]
}, {
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',
}, {
...