JSFiddle - React, Tailwind, and code Playground

by hughes

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<table id="root">
  <thead class="table-header">   
    <tr>
      <th><div class="th-inner">a</div></th>
      <th><div class="th-inner">b</div></th>
      <th><div class="th-inner">c</div></th>   
    </tr> 
  </thead>
</table>

JavaScript

var mydata = ['x', 'y', 'z'];

var cells = d3.select('.table-header tr')
	.selectAll('div.th-inner').data(mydata)
	.selectAll('div.th-but').data(function(d) { return d; });

cells.enter()
	.insert('div')
  .classed('th-but', true)
  .text(function(d) { return d; });