JSFiddle - React, Tailwind, and code Playground

by aaronk85

HTML

<table>
    <thead id="headings">
        <tr>
            <th id="f_name">First Name</th>
            <th id="l_name">Last Name</th>
            <th id="age">Age</th>
        </tr>
    </thead>
    <tbody id="results">
        <!-- this will be auto-populated -->
    </tbody>
</table>

CSS

table {
    margin: 3px;
}
table th {
    font-weight: bold;
    cursor: pointer;
}
table th, table td {
    padding: 3px;
    border: 1px solid #000;
}

JavaScript

var arr = [
    {
        f_name: 'George',
        l_name: 'Washington',
        age: 279
    },
    {
        f_name: 'Abraham',
        l_name: 'Lincoln',
        age: 202
    },
    {
        f_name: 'Barack',
        l_name: 'Obama',
        age: 50
    }
];

$(function() {
        var id = $('#age').attr('id');
    sortResults(id);    
    showResults();
});

function sortResults(prop) {
    arr = arr.sort(function(a, b) {
            if (b[prop] > a[prop]) return 1;
            if (b[prop] < a[prop]) return -1;
            return 0;
    });
    showResults();
}

function showResults () {
    var html = '';
    for (var e in arr) {
        html += '<tr>'
            +'<td>'+arr[e].f_name+'</td>'
            +'<td>'+arr[e].l_name+'</td>'
            +'<td>'+arr[e].age+'</td>'
        +'</tr>';
    }
    $('#results').html(html);
}