JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable">
    <tr>
        <th>Government Boondoggle</th>
        <th>Original Estimate</th>
        <th>Recent or Final Estimate</th>
    </tr>
    <tr>
        <td>Boston Big Dig highway project</td>
        <td>$2.6b (1985)</td>
        <td>$14.6b (2005)</td>
    </tr>
    <tr>
        <td>Virginia Springfield interchange</td>
        <td>$241m (1994)</td>
        <td>$676m (2003)</td>
    </tr>
    <tr>
        <td>Denver International Airport</td>
        <td>$1.7b (1989)</td>
        <td>$4.8b (1995)</td>
    </tr>
    <tr>
        <td>Hiring of airport security screeners</td>
        <td>$104m (2002)</td>
        <td>$741m (2006)</td>
    </tr>
    <tr>
        <td>Airport security technology upgrade</td>
        <td>$1b (2002)</td>
        <td>$3b (2005)</td>
    </tr>
</table>

CSS

table {
    margin: 1ex;
    border: 1px solid black;
}
td, th {
    padding: 1ex;
    border: 1px solid black;
}
th {
    background: wheat;
}

JavaScript

//--- Get the table we want to sort.
var jTableToSort    = $("table#myTable");

//--- Get the rows to sort, but skip the first row, since it contains column titles.
var jRowsToSort     = jTableToSort.find ("tr:gt(0)");

//--- Sort the rows in place.
jRowsToSort.sort (SortByFirstColumnText).appendTo (jTableToSort);

function SortByFirstColumnText (zA, zB)
{
     var ValA_Text  = $(zA).find ("td:eq(0)").text ();
     var ValB_Text  = $(zB).find ("td:eq(0)").text ();

     if      (ValA_Text  >  ValB_Text)
        return 1;
     else if (ValA_Text  <  ValB_Text)
        return -1;
     else
        return 0;
}