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 dataSet = [["NSCLC","non small cell lung, Adeno, Squamous, nonsquamous, recurrent","Metastatic","EGFR positive","1st line, no brain metastasis","Alternative","afatinib(40mg)","1211502","","12","23975.28"],["NSCLC","non small cell lung, Adeno, Squamous, nonsquamous, recurrent","Metastatic","ALK rearrangement","1st line","Preferred","alectinib(600mg BID)","1241317","","12","40635.84"],["NSCLC","non small cell lung, Adeno, Squamous, nonsquamous, recurrent","Metastatic","ALK rearrangement","Subsequent","Alternative","alectinib(600mg BID)","1241317","Subsequent treatment, if crizotinib is chosen 1st line","12","40635.84"],["NSCLC, Adeno","non small cell lung, nonsquamous, recurrent","Metastatic","","Subsequent","Alternative","atezolizumab(1200mg)","1241385","","12","35522.16"]]