JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
<div id="container"></div>

CSS

td, th {
    padding: 2px 4px;
}

th {
    font-weight: bold;
}

JavaScript

function tabulate(data, columns) {
    var table = d3.select("#container").append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

    // append the header row
    thead.append("tr")
        .selectAll("th")
        .data(columns)
        .enter()
        .append("th")
            .text(function(column) { return column; });
console.log("here")
    // create a row for each object in the data
    var rows = tbody.selectAll("tr")
    .data([data], function (d) {console.log(d); return d})
        .enter()
        .append("tr");

    // create a cell in each row for each column
    var cells = rows.selectAll("td")
        .data(function(row) {
            console.log(row)
            return columns.map(function(column) {
                //console.log(column);
                return {column: column, value: row[column]};
            });
        })
        .enter()
        .append("td")
            .text(function(d) { return d.value; });
    
    return table;
}

// Json data
min_max = {"a":[1,10],"b":[11,20],"c":[21,30]}

// render the table
var dataTable = tabulate(min_max, ["max", "min"]);