Grid Sorting

Grid Sorting

by Saksham Malhotra

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Grid Sorting</title>
   </head>
   <body>
      <h2>Fund Performance</h2>
      <table id="fundData" cellpadding="0" cellspacing="0">
         <thead>
            <tr>
               <th data-column="ticker">Ticker</th>
               <th data-column="name">Fund Name</th>
               <th data-column="asset class Name">Asset Class</th>
               <th data-column="returns 1Y">1Y</th>
               <th data-column="returns 2Y">2Y</th>
               <th data-column="returns 3Y">3Y</th>
               <th data-column="returns 4Y">4Y</th>
               <th data-column="returns 5Y">5Y</th>
            </tr>
         </thead>
         <tbody>
         </tbody>
      </table>
        
   </body>
</html>

CSS

/* Add your css styles here */
h2 {
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight:normal;
}

#fundData {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:left;
    margin:0px auto;
}

#fundData thead th{
    font-weight:normal;
    background-color:#eaeaea;
    position:relative;
}

#fundData, #fundData thead tr {
    border-bottom:1px solid #ddd;
}

#fundData th:hover {
    background-color: #d0edf8;
}

#fundData tbody tr:nth-child(2n) {
    background-color:#ecf6ff;
}

/*could have done this by assigning class as well*/
#fundData tr td:nth-child(4), #fundData tr th:nth-child(4), #fundData tr td:nth-child(5), #fundData tr th:nth-child(5),
#fundData tr td:nth-child(6), #fundData tr th:nth-child(6), #fundData tr td:nth-child(7), #fundData tr th:nth-child(7), 
#fundData tr td:nth-child(8), #fundData tr th:nth-child(8){
    text-align:right;
}

#fundData th, #fundData td {
    padding: 10px 30px 10px 10px;
}

#fundData tr th:last-child, #fundData tr td:last-child {
    padding-right:10px;   
}
#fundData th.asc:after, #fundData th.desc:after {
    content:'';
    position:absolute;
    right:10px;
    border:4px solid transparent;
}

#fundData th.asc:after {
    top:calc(50% - 8px);
    border-bottom-color:#999;
}

#fundData th.desc:after {
    top:calc(50%);
    border-top-color:#999;
}

JavaScript

var performanceData =
[{
   "ticker": "IVV",
   "asset class code": "EQ",
   "asset class Name": "Equity",
   "name": "iShares Core S&P 500 ETF",
   "returns 1Y": 1.74,
   "returns 2Y": 1.2,
   "returns 3Y": 2.2,
   "returns 4Y": -0.2,
   "returns 5Y": 0.6
}, {
   "ticker": "EFA",
   "asset class code": "EQ",
   "asset class Name": "Equity",
   "name": "iShares MSCI EAFE ETF",
   "returns 1Y": 1.74,
   "returns 2Y": 1.2,
   "returns 3Y": 2.2,
   "returns 4Y": -0.2,
   "returns 5Y": 0.6
}, {
   "ticker": "AGG",
   "asset class code": "FI",
   "asset class Name": "Fixed Income",
   "name": "iShares Core U.S. Aggregate Bond ETF",
   "returns 1Y": 1.24,
   "returns 2Y": 2.2,
   "returns 3Y": 2.9,
   "returns 4Y": -0.4,
   "returns 5Y": 0.9
}, {
   "ticker": "IWF",
   "asset class code": "EQ",
   "asset class Name": "Equity",
   "name": "iShares Russell 1000 Growth ETF",
   "returns 1Y": 3.14,
   "returns 2Y": 3.1,
   "returns 3Y": 4.2,
   "returns 4Y": -0.4,
   "returns 5Y": 0.2
}, {
   "ticker": "SLV",
   "asset class code": "COMM",
   "asset class Name": "Commodities",
   "name": "iShares Silver Trust",
   "returns 1Y": 3.74,
   "returns 2Y": 2.1,
   "returns 3Y": 5.2,
   "returns 4Y": 2.4,
   "returns 5Y": 9.0
}];

function sortObj(list, key, order) {
    function compare(a, b) {
        a = a[key];
        b = b[key];
        var result = (order === 'asc') ? a-b : b-a;
        return result;
    }
    
    return list.sort(compare);
}

// Add your javascript here
$(function() {
    function renderTable(column, sortDirection) {
        for(let tuple of performanceData) {
            $('#fundData tbody').append('<tr><td>' + tuple['ticker'] + '</td>' + 
                                        '<td>' + tuple['name'] + '</td>' + 
                                        '<td>' + tuple['asset class Name'] + '</td>' + 
                                        '<td>' + tuple['returns 1Y'] + '</td>' + 
                                        '<td>' + tuple['returns 2Y'] +...