JSFiddle - React, Tailwind, and code Playground

by PhilM

HTML

<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
    var headers = thead.append("tr")
        .selectAll("th")
        .data(columns)
        .enter()
        .append("th");
    headers.text(function(column) { return column; });

    // create a row for each object in the data
    var rows = tbody.selectAll("tr")
        .data(data)
        .enter()
        .append("tr");

    // create a cell in each row for each column
    var cells = rows.selectAll("td")
        .data(function(row) {
            return columns.map(function(column) {
                return {column: column, value: row[column]};
            });
        })
        .enter()
        .append("td")
            .attr("class", function(d, i) {return i < 2 ? "personText" : "personIncome"})
            .text(function(d) { return d.value; });

    // add column click handlers
    headers.on("click", function(d, i){
            peopleTable.selectAll("tbody tr")
                .sort(function(a, b) {
                    return d3.descending(a[columns[i]], b[columns[i]]);
                });
        });    
    return table;
}

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

for (var i=0; i < 5000; i++){
    people.push(
        {
            name: "Person " + i, 
            age: Math.floor(Math.random()*50),
            income : Math.floor(Math.random()*10000),
            asdf : Math.floor(Math.random()*10000),
            adsferw : Math.floor(Math.random()*10000),
            qwer : Math.floor(Math.random()*10000),
            zxc : Math.floor(Math.random()*10000),
            tre : Math.floor(Math.random()*10000),
            zxcvf : Math.floor(Math.random()*10000),
            yuu : Math.floor(Math.random()*10000),
            hjhhj :...