JSFiddle - React, Tailwind, and code Playground

by dylanmac

HTML

<table id="productListTable" class="display dataTable">
	<thead>
		<tr>
			<th class="colTicker col1">
				Ticker
			</th>
			<th class="colFundShortName col2">
				Fund
			</th>
			<th class="colInceptionDate col3">
				Inception Date
			</th>
			<th class="colNavYearToDate col4">
				YTD (%)
			</th>
		</tr>
	</thead>
	<tbody id="productListBody">
		<tr>
			<td data-raw="MCHI" class="colTicker col1">
				<a href="/one/products/239619/ishares-msci-china-etf">MCHI</a>
			</td>
			<td data-raw="iShares MSCI China ETF" class="colFundShortName col2">
				<a href="/one/products/239619/ishares-msci-china-etf">iShares MSCI China ETF</a>
			</td>
			<td data-raw="1301382000000" class="colInceptionDate col3">Mar 29, 2011</td>
			<td data-raw="0.4" class="colNavYearToDate col4">0.40</td>
		</tr>
		<tr>
			<td data-raw="ECH" class="colTicker col1">
				<a href="/one/products/239618/ishares-msci-chile-capped-etf">ECH</a>
			</td>
			<td data-raw="iShares MSCI Chile Capped ETF" class="colFundShortName col2">
				<a href="/one/products/239618/ishares-msci-chile-capped-etf">iShares MSCI Chile Capped ETF</a>
			</td>
			<td data-raw="1194854400000" class="colInceptionDate col3">Nov 12, 2007</td>
			<td data-raw="-7.96" class="colNavYearToDate col4">-7.96</td>
		</tr>
		<tr>
			<td data-raw="EWCS" class="colTicker col1">
				<a href="/one/products/239617/ishares-msci-canada-smallcap-etf">EWCS</a>
			</td>
			<td data-raw="iShares MSCI Canada Small-Cap ETF" class="colFundShortName col2">
				<a href="/one/products/239617/ishares-msci-canada-smallcap-etf">iShares MSCI Canada Small-Cap ETF</a>
			</td>
			<td data-raw="1327478400000" class="colInceptionDate col3">Jan 25, 2012</td>
			<td data-raw="3.74" class="colNavYearToDate col4">3.74</td>
		</tr>
		<tr>
			<td data-raw="EFA" class="colTicker col1">
				<a href="/one/products/239623/ishares-msci-eafe-etf">EFA</a>
			</td>
			<td data-raw="iShares MSCI EAFE ETF" class="colFundShortName col2">
				<a...

JavaScript

$(document).ready(function() {

    sortProductList = function () {
        $productListDataTable = $('#productListTable');
        $productListDataTable.find('tr > th').click(function () {
            var rows = $productListDataTable.find('tbody tr').toArray().sort(comparer($(this).index()));
            this.asc = !this.asc;
            if (!this.asc) {
                rows = rows.reverse()
            }
            for (var i = 0; i < rows.length; i++) {
                $productListDataTable.append(rows[i])
            }
        });
        function getCellValue(row, index) {
            return $(row).children('td').eq(index).data('raw');
        }
        function comparer(index) {
            return function (a, b) {
                var valA = getCellValue(a, index),
                    valB = getCellValue(b, index);
                return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
            }
        }
    };

});