JSFiddle - React, Tailwind, and code Playground

by rwaldin

JavaScript

d3.table = function(config) {
var columns = [];

var tbl = function(selection) {
if (columns.length == 0) columns = d3.keys(selection.data()[0][0]);
console.log(columns);
// Creating the table
var table = selection.append("table");
var thead = table.append("thead");
var tbody = table.append("tbody");

// appending the header row
var th = thead.selectAll("th")
        .data(columns)

th.enter().append("th");
    th.text(function(d) { return d });
th.exit().remove()

// creating a row for each object in the data
var rows = tbody.selectAll('tr')
    .data(function(d) { return d; })

rows.enter().append("tr");
rows.attr('data-row',function(d,i){return i});
rows.exit().remove();   

// creating a cell for each column in the rows
var cells = rows.selectAll("td").data(function(row) {
    return columns.map(function(key) {
        return {key:key, value:row[key]};
    });
});

cells.enter().append("td");
cells.text(function(d) { return d.value; })
    .attr('data-col',function(d,i){return i})
    .attr('data-key',function(d,i){return d.key});
cells.exit().remove();

return tbl;
};

tbl.columns = function(_) {
if (!arguments.length) return columns;
columns = _;
return this;
};

return tbl;
};

/// new table
var t = d3.table();

/// loading data
var data = [
{"date":"Jan 2000","price":1394.46},
{"date":"Feb 2000","price":1366.42},
{"date":"Mar 2000","price":1498.58},
{"date":"Apr 2000","price":1452.43},
{"date":"May 2000","price":1420.6},
{"date":"Jun 2000","price":1454.6},
{"date":"Jul 2000","price":1430.83},
{"date":"Aug 2000","price":1517.68},
{"date":"Sep 2000","price":1436.5}
];

d3.select("body")
    .datum(data.filter(function(d){return d.price<1400})) /// filter on lines
    .call(t);