JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<svg class="canvas"></svg>

CSS

svg {
  vertical-align: middle;
  background: rgba(255,255,255, 0.2);
  box-shadow: inset 0 0 3px 0px #CECECE;
}

.header rect{
  fill: #0099FF;
}

.header text{
  fill: white;
  font: 10px sans-serif;
  text-anchor: middle;
}

.cell rect{
  fill: #66FFFF;
}

.cell text{
  fill: black;
  font: 10px sans-serif;
  text-anchor: middle;
}

JavaScript

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var canvas = d3.select(".canvas")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var headerGrp = canvas.append("g").attr("class", "headerGrp");
var rowsGrp = canvas.append("g").attr("class","rowsGrp");

var fieldHeight = 30;
var fieldWidth = 90;

var previousSort = null;
var format = d3.time.format("%a %b %d %Y");
//var dateFn = function(date) { return format.parse(d.created_at) };


var jsonData = [
{ "id": 3, "name": "Richy", "male": true, "born": "Sun May 05 2013", "amount": 12000},
{ "id": 1, "name": "Susi", "male": false, "born": "Mon May 13 2013", "amount": 2000},
{ "id": 2, "name": "Patrick", "male": true, "born": "Thu Jun 06 2013", "amount": 17000},
{ "id": 4, "name": "Lorenz", "male": true, "born": "Thu May 09 2013", "amount": 15000},
{ "id": 5, "name": "Christina", "male": false, "born": "Mon Jul 01 2013", "amount": 16000}
];

refreshTable(null);

function refreshTable(sortOn){

	// create the table header	
	var header = headerGrp.selectAll("g")
		.data(d3.keys(jsonData[0]))
	  .enter().append("g")
		.attr("class", "header")
		.attr("transform", function (d, i){
			return "translate(" + i * fieldWidth + ",0)";
		})
		.on("click", function(d){ return refreshTable(d);});
	
	header.append("rect")
		.attr("width", fieldWidth-1)
		.attr("height", fieldHeight);
		
	header.append("text")
		.attr("x", fieldWidth / 2)
		.attr("y", fieldHeight / 2)
		.attr("dy", ".35em")
		.text(String);
	
	// fill the table	
	// select rows
    var rows = rowsGrp.selectAll("g.row").data(jsonData, 
    function(d){ return d.id; });
	
	// create rows	
	var rowsEnter = rows.enter().append("svg:g")
		.attr("class","row")
		.attr("transform", function (d, i){
			return...