JSFiddle - React, Tailwind, and code Playground

HTML

<input id="col" type="text" value="1"><br/>
<a class="order" data="a" href="#">a..z</a></br>
<a class="order" data="d" href="#">z..a</a>
<div id="results"></div>

CSS

body
{
    font-family: Consolas;
}

JavaScript

var arr = [
    ["bob","12","yes"],
    ["joe","","no"],
    ["tim","19","no"],
    ["dan","","yes"]
];

var print = function() {
    var result = "";
    for(var el in arr)
    {
        result += "[ "
        for(var val in arr[el])
        {
            result += (arr[el][val] || "<i>empty</i>") + " "
        }
        result += "]<br/>";
    }
    return result;
};

$(".order").click(function(e){
    e.preventDefault();
    var col = $("#col").val();
    if ($(this).attr("data") == "a")
    {
        arr.sort(function (a, b) {
            return (a[col] || "|||").toUpperCase().localeCompare((b[col] || "|||").toUpperCase())
        });
    }
    else
    {
        arr.sort(function (a, b) {
            return (b[col] || "!!!").toUpperCase().localeCompare((a[col] || "!!!").toUpperCase())
        });
    }
    $("#results").html(print());
});

$("#results").html(print());