JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="table_div"></div>

CSS

.parentcl{
    font-weight: bold !important;
}
.close:before{
content:"→ "
}
.open:before{
content:"↘ "
}
.leveltwo{
    padding-left: 20px !important;
}
.levelthree{
    padding-left: 45px !important;
    font-style:italic;
}
.gtableheader {
    font-weight: bold;
    background-color: grey;
}
.rowodd {
    background-color: beige;
}

JavaScript

google.load('visualization', '1', {
    packages: ['table']
});
google.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'id');
    data.addColumn('string', 'parentId');
    data.addColumn('boolean', 'visible');
    data.addColumn('number', 'level');
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addRows([
        ['1', null, true, 1, 'Foo', 10],
        ['1.1', '1', false, 2, 'Foo 1', 2],
        ['1.1.1', '1.1', false, 3, 'Foo 1a', 2],
        ['1.1.2', '1.1', false, 3, 'Foo 1b', 2],
        ['1.2', '1', false, 2, 'Foo 2', 3],
        ['1.3', '1', false, 2, 'Foo 3', 5],
        ['1.3.1', '1.3', false, 3, '<input type="checkbox" id="cbox1" value="second_checkbox">', 1],
        ['1.3.2', '1.3', false, 3, '<input type="checkbox" id="cbox2" value="second_checkbox">', 4],
        ['2', null, true, 1, 'Bar', 14],
        ['2.1', '2', false, 2, 'Bar 1', 6],
        ['2.2', '2', false, 2, 'Bar 2', 7],
        ['2.2.1', '2.2', false, 3, 'Bar 2a', 3],
        ['2.2.2', '2.2', false, 3, 'Bar 2b', 2],
        ['2.2.3', '2.2', false, 3, 'Bar 2c', 2]
    ]);

    // get all rows with children
    // start by finding all child rows (ie, rows with parents)
    var children = data.getFilteredRows([{
        column: 1,
        minValue: '1'
    }]);
    var parentsArray = [];
    var parentId;
    // identify the parents of all children
    for (var i = 0; i < children.length; i++) {
        parentId = data.getValue(children[i], 1);
        if (parentsArray.indexOf(parentId) === -1) {
            parentsArray.push(parentId);
        }
    }
    
    //format the parent rows
    var parent = data.getFilteredRows([{
        column: 3,
        value: 1
    }]);
    for (var j = 0; j < parent.length; j++) {
        parentId = data.getValue(parent[j], 0);
        if (parentsArray.indexOf(parentId) !== -1) {
            data.setProperty(parent[j], 4,...