JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id='container'></div>

CSS

body {font-family: sans;}
h4 {margin: 0px;}
table {border-collapse: collapse; margin: 4px;}
th {text-align: left; background: #EEE;}
th, td {width: 60px; padding: 4px; border:1px solid black;}

JavaScript

var cols = ['id', 'apples', 'oranges', 'pears', 'kiwis', 'peaches', 'name'];
var dataset = [{
    'name': 'foo',
        'children': [{
        'id': 0,
            'apples': 3,
            'oranges': 2,
            'pears': 0,
            'kiwis': 18,
            'peaches': 7,
            'name': 'foo'
    }, {
        'id': 1,
            'apples': 3,
            'oranges': 6,
            'pears': 10,
            'kiwis': 1,
            'peaches': 4,
            'name': 'foo'
    }]
}, {
    'name': 'bar',
        'children': [{
        'id': 2,
            'apples': 12,
            'oranges': 2,
            'pears': 111,
            'kiwis': 13,
            'peaches': 12,
            'name': 'bar'
    }]
}];

var sections = d3.select('#container')
    .selectAll('div.parent')
    .data(dataset);

var sectionsEnter = sections.enter()
    .append('div')
    .attr('class', 'parent');

// don't use selectAll/data/enter to append children that 
// just inherit parent's data
sectionsEnter.append('h4')
    .text(function(d){
        return d.name;
    });

// append table and tr.headings row, still don't need selectAll/data/enter
sectionsEnter.append('table')
    .attr('class', 'parent')
    .append('tr')
    .attr('class', 'headings');

// selecting tables picks up previously inherited data
var tables = sections.selectAll('table');

var colHeadings = tables.select('tr.headings')
    .selectAll('th')
    .data(cols)

colHeadings.enter()
    .append('th')
    .text(function (d) {
        return d;
    });

// one row per child
var rows = tables.selectAll('tr.data')
    .data(function (d) {
        return d.children;
    });

rows.enter()
    .append('tr')
    .attr('class', 'data');

var cells = rows.selectAll('td')
    .data(function(d) {
        // return cell data as an array of prop values, 
        // ordered according to prop names in cols
        return cols.map(function(prop) {
            return d[prop];
        })
    });

cells.enter()
    .append('td')
   ...