JSFiddle - React, Tailwind, and code Playground

by jezrael

HTML

<script src="https://dl.dropboxusercontent.com/u/84444599/web/tablesaw.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/84444599/web/tablesaw.css">
<div id="ajaxed"></div>

CSS

#ajaxed {margin-top:3em;}

JavaScript

var mydata = [ { "c01": "1", "c02": "9,50", "c03": "0,11", "c04": "3,45", "c05": "9,24", "c06": "14,56", "c07": "0,44", "c08": "0,06", "c09": "0,71", "c10": "0,90" }, 
			   { "c01": "2", "c02": "9 732", "c03": "56,52", "c04": "5 744", "c05": "3", "c06": "1 742", "c07": "16,79", "c08": "64,79", "c09": "67,79", "c10": "68,79" },
			   { "c01": "3", "c02": "9 312", "c03": "54,08", "c04": "5 378", "c05": "3", "c06": "2 528", "c07": "68,79", "c08": "67,79", "c09": "69,79", "c10": "61,79" } ];

		$( '#ajaxed' ).html( "<table class='tablesaw' data-tablesaw-mode='swipe' id='mytable'><thead><tr><th scope='col' data-tablesaw-priority='persist'>ID</th><th scope='col'>col1</th><th scope='col'>col3</th><th scope='col'>col2</th><th scope='col'>col4</th><th scope='col'>col5</th><th scope='col'>col6</th><th scope='col'>col7</th><th scope='col'>col8</th><th scope='col'>col9</th></tr></thead><tbody id='place1'></tbody></table>" );

		var tbody = $( '#mytable tbody' ), props = ["c01","c02","c03","c04","c05","c06","c07","c08","c09","c10"];
		console.log(mydata);
		$.getJSON( "https://api.myjson.com/bins/4q20m", function( data ) {
			console.log(data.data);
			$.each(data.data, function(i, value){
				var tr = $('<tr>');
				//console.log(value);
				$.each(props, function(i, prop){
					//console.log(value[prop]);
					$('<td>').html(value[prop]).appendTo(tr); 
				});
				tbody.append(tr);
			});
	});

		$('#mytable').table().data( "table" ).refresh();