JSFiddle - React, Tailwind, and code Playground

by mrajcok

HTML

<table id="t1">
    <thead>
        <tr><th>Name<th>Age
    </thead>
</table>

CSS

td, th {
    padding: 2px 4px;
}
th {
    font-weight: bold;
}

JavaScript

function tabulate(data, columns) {
    var table = d3.select("#t1");
    table.select('tbody').remove();
	var tbody = table.append('tbody');
    data.forEach(function(row) {
        var tr = tbody.append('tr');
        columns.forEach(function(column) {
           tr.append('td').text(row[column]);
        });
    });
    return table;
}

// create some people
var people = [
    {name: "Jill", age: 30},
    {name: "Bob", age: 32},
    {name: "George", age: 29},
    {name: "Sally", age: 31}
];

// render the table
var peopleTable = tabulate(people, "name age".split(' '));

// sort by age
peopleTable.selectAll("tbody tr")
    .sort(function(a, b) {
        return d3.descending(a.age, b.age);
    });