require('../../css/table-twbs.css');

var React = require('react');
var { DataTable } = require('react-tabula');
var d3 = require('d3');

function buildTable(data) {
  var renderMapUrl =
    (val, row) =>
      <a href={`https://www.google.com/maps?q=${row['LAT']},${row['LON']}`}>
        Google Maps
      </a>;

  var tableColumns = [
    { title: 'Phylum', prop: 'PHYLUM' },
    { title: 'Animal Genus', prop: 'ANIMAL GENUS' },
    { title: 'Animal', prop: 'ANIMAL' },
    { title: 'No. of Walks', prop: 'WALKS', defaultContent: '<none>' },
    { title: 'Meals per day', prop: 'EATS', defaultContent: '<none>' },
    { title: 'Naps per day', prop: 'SLEEPS', defaultContent: '<none>' }
    ],
    columnKeys = [ 'PHYLUM', 'ANIMAL GENUS', 'WALKS', 'EATS', 'SLEEPS' ];

  return (
    <DataTable
      className="container"
      keys={columnKeys}
      columns={tableColumns}
      initialData={data}
      initialPageSize={15}
      initialSortBy={{ prop: 'PHYLUM', order: 'ascending' }}
      pageSizeOptions={[ 5, 15, 50, 100 ]}
      pageSizeMax={100}
    />
  );
}

d3.csv('/dupe_data.csv', function(error, rows) {
  window.tabula = React.render(buildTable(rows), document.body);
});

@@ -110,32 +110,9 @@
 ');%0A
-var d3 = require('d3');
 %0A
+
 %0Afun
@@ -146,156 +146,91 @@
 var 
-renderMapUrl =%0A    (val, row) =%3E%0A      %3Ca href=%7B%60https://www.google.com/maps?q=$%7Brow%5B'LAT'%5D%7D,$%7Brow%5B'LON'%5D%7D%60%7D%3E%0A        Google Maps%0A      %3C/a%3E;%0A%0A  var
+columnKeys = %5B 'PHYLUM', 'ANIMAL GENUS', 'ANIMAL', 'WALKS', 'EATS', 'SLEEPS' %5D,%0A   
  tab
@@ -601,82 +601,8 @@
 %0A   
- %5D,%0A    columnKeys = %5B 'PHYLUM', 'ANIMAL GENUS', 'WALKS', 'EATS', 'SLEEPS'
  %5D;%0A
@@ -908,59 +908,836 @@
 %0A%7D%0A%0A
-d3.csv('/dupe_data.csv', function(error, rows) %7B%0A  
+%0Avar records = %5B%0A  %7B%0A    'PHYLUM': 'Canidae',%0A    'ANIMAL GENUS': 'Canis',%0A    'ANIMAL': 'Labrador',%0A    'WALKS': 2,%0A    'EATS': 3,%0A    'SLEEPS': 5%0A  %7D,%0A  %7B%0A    'PHYLUM': 'Canidae',%0A    'ANIMAL GENUS': 'Canis',%0A    'ANIMAL': 'Beagle',%0A    'WALKS': 5,%0A    'EATS': 2,%0A    'SLEEPS': 1%0A  %7D,%0A  %7B%0A    'PHYLUM': 'Felidae',%0A    'ANIMAL GENUS': 'Felis',%0A    'ANIMAL': 'Tabby',%0A    'WALKS': 1,%0A    'EATS': 6,%0A    'SLEEPS': 10%0A  %7D,%0A  %7B%0A    'PHYLUM': 'Felidae',%0A    'ANIMAL GENUS': 'Felis',%0A    'ANIMAL': 'Balinese',%0A    'WALKS': 3,%0A    'EATS': 2,%0A    'SLEEPS': 12%0A  %7D,%0A  %7B%0A    'PHYLUM': 'Chordata',%0A    'ANIMAL GENUS': 'Aves',%0A    'ANIMAL': 'Finch',%0A    'WALKS': 0,%0A    'EATS': 10,%0A    'SLEEPS': 2%0A  %7D,%0A  %7B%0A    'PHYLUM': 'Chordata',%0A    'ANIMAL GENUS': 'Aves',%0A    'ANIMAL': 'Crow',%0A    'WALKS': 11,%0A    'EATS': 3,%0A    'SLEEPS': 1%0A  %7D%0A%5D;%0A%0A
 wind
@@ -1773,18 +1773,21 @@
 dTable(r
-ow
+ecord
 s), docu
@@ -1802,8 +1802,4 @@
 y);%0A
-%7D);%0A

update table example to use list of objects