JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
<table id="products" class="display" cellspacing="0" width="100%">
	<thead>
		<tr>
			<th class="colTicker col1">Ticker</th>
			<th class="colIssueName col2">Issue Name</th>
			<th class="colSectorName col3">Sector</th>
			<th class="colAssetClass col4">Asset Class</th>
			<th class="colAssetClassCode col5">Asset Class Code</th>
			<th class="colCountryOfRisk col6">Country</th>
			<th class="colMarketValue col7">Market Value</th>
			<th class="colUnitPrice col8">Price</th>
			<th class="colIsin col9">ISIN</th>
			<th class="colSedol col10">Sedol</th>
			<th class="colCurrencyCode col11">Currency Code</th>
		</tr>
	</thead>
</table>

CSS

.hide {
    display: none;
}

JavaScript

var productJson = [
		{"colTicker": "EUR", "colIssueName": "EUR/USD", "colSectorName": "Cash and/or Derivatives", "colAssetClass": "Equity", "colAssetClassCode": "EQ", "colCountryOfRisk": "United States", "colMarketValue": {"display": "$8,178,642", "raw": "8178642.07"}, "colUnitPrice": {"display": "1.00", "raw": "1"}, "colIsin": "-", "colSedol": "-", "colCurrencyCode": "USD"},
		{"colTicker": "CHF", "colIssueName": "CHF/USD", "colSectorName": "Cash and/or Derivatives", "colAssetClass": "Equity", "colAssetClassCode": "EQ", "colCountryOfRisk": "United States", "colMarketValue": {"display": "$6,916,638", "raw": "6916638.13"}, "colUnitPrice": {"display": "1.00", "raw": "1"}, "colIsin": "-", "colSedol": "-", "colCurrencyCode": "USD"},
		{"colTicker": "AUD", "colIssueName": "AUD/USD", "colSectorName": "Cash and/or Derivatives", "colAssetClass": "Equity", "colAssetClassCode": "EQ", "colCountryOfRisk": "United States", "colMarketValue": {"display": "$6,388,334", "raw": "6388333.57"}, "colUnitPrice": {"display": "1.00", "raw": "1"}, "colIsin": "-", "colSedol": "-", "colCurrencyCode": "USD"},
		{"colTicker": "EUR", "colIssueName": "EUR/USD", "colSectorName": "Cash and/or Derivatives", "colAssetClass": "Equity", "colAssetClassCode": "EQ", "colCountryOfRisk": "United States", "colMarketValue": {"display": "$5,302,801", "raw": "5302800.97"}, "colUnitPrice": {"display": "1.00", "raw": "1"}, "colIsin": "-", "colSedol": "-", "colCurrencyCode": "USD"},
		{"colTicker": "JPY", "colIssueName": "JPY/USD", "colSectorName": "Cash and/or Derivatives", "colAssetClass": "Equity", "colAssetClassCode": "EQ", "colCountryOfRisk": "United States", "colMarketValue": {"display": "$4,761,928", "raw": "4761927.64"}, "colUnitPrice": {"display": "1.00", "raw": "1"}, "colIsin": "-", "colSedol": "-", "colCurrencyCode": "USD"},
		{"colTicker": "GBP", "colIssueName": "GBP/USD", "colSectorName": "Cash and/or Derivatives", "colAssetClass": "Equity", "colAssetClassCode": "EQ", "colCountryOfRisk": "United...