JSFiddle - React, Tailwind, and code Playground

by newfulluser

HTML

<html>

<head>
	<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.16/cr-1.4.1/fc-3.2.4/fh-3.1.3/r-2.2.1/datatables.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
	<link rel="stylesheet" type="text/css" href="/main.css" />
</head>

<body>

	<table class="table" id="ranktable" class="table table-striped table-bordered display responsive no-wrap" cellspacing="0" width="100%">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">Coin</th>
				<th scope="col">Price USD</th>
				<th scope="col">Price BTC</th>
				<th scope="col">24h Change</th>
				<th scope="col">Trading Volume</th>
			</tr>
		</thead>
	</table>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.16/cr-1.4.1/fc-3.2.4/fh-3.1.3/r-2.2.1/datatables.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="/table.js"></script>

</body>

</html>

JavaScript

$(document).ready(function () {
	var table = $('#ranktable').DataTable({
    //data: data,
    ajax: {
      url: "https://api.coinmarketcap.com/v1/ticker/?limit=0",
      dataSrc: ''
    },
		"paging": false,
		"ordering": true,
		"info": false,
    colReorder: true,
    responsive: {
        details: true
    },
    fixedHeader: true,  
    columns: [
    	{
      	data: 'id',
      	render: function (data, type, row, meta) {
        	return '<img src="https://files.coinmarketcap.com/static/img/coins/32x32/' + data + '.png" />'
      	}
    	},
    	{
      	data: 'name',
        render: function (data, type, row, meta) {
          return '<a href="http://dash.org/">' + data + ' (' + data +')</a></td>'
        }
    	},
			{
       data: 'price_usd',
   		 render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) 
			},
      {
      	data: 'price_btc',
        render: $.fn.dataTable.render.number( ',', '.', 8, '₿' ) 
      },
      {
      	data: 'percent_change_24h',
        render: $.fn.dataTable.render.number( ',', '.', 2, '', '%' ) 
      },
      {
      	data: '24h_volume_usd',
			  render: $.fn.dataTable.render.number( ',', '.', 2, '$' )
      },
    ]
	});
})