kyleshevlin/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>D3 Reusable Table Pattern</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th,
      td {
        padding: 15px;
        border: 1px solid rgba(0, 0, 0, .15);
      }
      th {
        text-align: left;
      }
    </style>
  </head>
  <body>
    <div class="js-table-one"></div>
    <div class="js-table-two"></div>

    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="table.js"></script>
    <script src="main.js"></script>
  </body>
</html>

## main.js
d3.json('matches.json', function(err, matches) {
  var data = matches.matches;
  var first = d3.select('.js-table-one');
  var second = d3.select('.js-table-two');

  // Table One
  var tableOneWrap = first.append('div').classed('table-wrap', true);
  var tableOne = d3.chart.table();
  tableOne
    .data(data)
    .columns(['Class', 'Map', 'Partner'])
    .returns({
      0: function(d) { return d.class; },
      1: function(d) { return d.map; },
      2: function(d) { return d.partner; }
    });
  tableOne(tableOneWrap);

  // Table Two
  var tableTwoWrap = first.append('div').classed('table-wrap', true);
  var tableTwo = d3.chart.table();
  tableTwo
    .data(data)
    .columns(['Kills', 'Assists', 'Deaths'])
    .returns({
      0: function(d) { return d.kills; },
      1: function(d) { return d.assists; },
      2: function(d) { return d.deaths; }
    });
  tableTwo(tableTwoWrap);
});

## matches.json
{
  "matches": [
    {
      "id": 1,
      "class": "Hunter",
      "map": "Asylum",
      "partner": "unoudid",
      "kills": 7,
      "assists": 2,
      "deaths": 5,
      "score": 3
    },
    {
      "id": 2,
      "class": "Hunter",
      "map": "Pantheon",
      "partner": "Blackt1g3r",
      "kills": 6,
      "assists": 3,
      "deaths": 3,
      "score": 5
    },
    {
      "id": 3,
      "class": "Warlock",
      "map": "Asylum",
      "partner": "Malagate",
      "kills": 7,
      "assists": 6,
      "deaths": 2,
      "score": 5
    },
    {
      "id": 4,
      "class": "Warlock",
      "map": "The Burning Shrine",
      "partner": "unoudid",
      "kills": 7,
      "assists": 3,
      "deaths": 2,
      "score": 5
    },
    {
      "id": 5,
      "class": "Titan",
      "map": "Pantheon",
      "partner": "Mid7night",
      "kills": 9,
      "assists": 1,
      "deaths": 1,
      "score": 5
    }
  ]
}

## table.js
if (!d3.chart) {
  d3.chart = {};
}

d3.chart.table = function() {
  var div,
      data,
      columns = [],
      returns = {};

  function chart(container) {
    div = container;
    var table = container.append('table');
    update();
  }

  chart.update = update;

  function update() {
    var table = div.select('table');

    var thead = table.append('thead').append('tr');
    columns.forEach(function(column) {
      thead.append('th')
        .text(column);
    });

    var tbody = table.append('tbody');

    var rows = tbody.selectAll('tr.row')
      .data(data, function(d) { return d.id; })

    var rowsEnter = rows.enter().append('tr').classed('row', true);

    for (var i = 0; i < columns.length; i++) {
      var td = rowsEnter.append('td').text(returns[i]);
    }
  }

  chart.data = function(value) {
    if (!arguments.length) return data;
    data = value;
    return chart;
  }

  chart.columns = function(value) {
    if (!arguments.length) return columns;
    columns = value;
    return chart;
  }

  chart.returns = function(value) {
    if (!arguments.length) return returns;
    returns = value;
    return chart;
  }

  return chart;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>D3 Reusable Table Pattern</title>
	<style>
	table {
	border-collapse: collapse;
	}
	th,
	td {
	padding: 15px;
	border: 1px solid rgba(0, 0, 0, .15);
	}
	th {
	text-align: left;
	}
	</style>
	</head>
	<body>
	<div class="js-table-one"></div>
	<div class="js-table-two"></div>

	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="table.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	d3.json('matches.json', function(err, matches) {
	var data = matches.matches;
	var first = d3.select('.js-table-one');
	var second = d3.select('.js-table-two');

	// Table One
	var tableOneWrap = first.append('div').classed('table-wrap', true);
	var tableOne = d3.chart.table();
	tableOne
	.data(data)
	.columns(['Class', 'Map', 'Partner'])
	.returns({
	0: function(d) { return d.class; },
	1: function(d) { return d.map; },
	2: function(d) { return d.partner; }
	});
	tableOne(tableOneWrap);

	// Table Two
	var tableTwoWrap = first.append('div').classed('table-wrap', true);
	var tableTwo = d3.chart.table();
	tableTwo
	.data(data)
	.columns(['Kills', 'Assists', 'Deaths'])
	.returns({
	0: function(d) { return d.kills; },
	1: function(d) { return d.assists; },
	2: function(d) { return d.deaths; }
	});
	tableTwo(tableTwoWrap);
	});
	{
	"matches": [
	{
	"id": 1,
	"class": "Hunter",
	"map": "Asylum",
	"partner": "unoudid",
	"kills": 7,
	"assists": 2,
	"deaths": 5,
	"score": 3
	},
	{
	"id": 2,
	"class": "Hunter",
	"map": "Pantheon",
	"partner": "Blackt1g3r",
	"kills": 6,
	"assists": 3,
	"deaths": 3,
	"score": 5
	},
	{
	"id": 3,
	"class": "Warlock",
	"map": "Asylum",
	"partner": "Malagate",
	"kills": 7,
	"assists": 6,
	"deaths": 2,
	"score": 5
	},
	{
	"id": 4,
	"class": "Warlock",
	"map": "The Burning Shrine",
	"partner": "unoudid",
	"kills": 7,
	"assists": 3,
	"deaths": 2,
	"score": 5
	},
	{
	"id": 5,
	"class": "Titan",
	"map": "Pantheon",
	"partner": "Mid7night",
	"kills": 9,
	"assists": 1,
	"deaths": 1,
	"score": 5
	}
	]
	}
	if (!d3.chart) {
	d3.chart = {};
	}

	d3.chart.table = function() {
	var div,
	data,
	columns = [],
	returns = {};

	function chart(container) {
	div = container;
	var table = container.append('table');
	update();
	}

	chart.update = update;

	function update() {
	var table = div.select('table');

	var thead = table.append('thead').append('tr');
	columns.forEach(function(column) {
	thead.append('th')
	.text(column);
	});

	var tbody = table.append('tbody');

	var rows = tbody.selectAll('tr.row')
	.data(data, function(d) { return d.id; })

	var rowsEnter = rows.enter().append('tr').classed('row', true);

	for (var i = 0; i < columns.length; i++) {
	var td = rowsEnter.append('td').text(returns[i]);
	}
	}

	chart.data = function(value) {
	if (!arguments.length) return data;
	data = value;
	return chart;
	}

	chart.columns = function(value) {
	if (!arguments.length) return columns;
	columns = value;
	return chart;
	}

	chart.returns = function(value) {
	if (!arguments.length) return returns;
	returns = value;
	return chart;
	}

	return chart;
	}