Sort with caret in headers

This is an example of table sorting with the header switching caret based on the sort

by Joviano Dias

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../resources/report.js"></script>
    <link rel="stylesheet" href="../resources/styles.css">
    <title>Report Lighthouse</title></head>
<body>
<table id="my_table" class="zui-table zui-table-highlight-column">
    <thead>
    <tr>
        <th>App Name ▶</th>
        <th>Page ▶</th>
        <th>Performance ▶</th>
        <th>Accessibility ▶</th>
        <th>Best Practices ▶</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>EBM Finder</td>
        <td>Search Page</td>
        <td>0.35</td>
        <td>0.94</td>
        <td>0.93</td>
    </tr>
    <tr>
        <td>EBM Finder</td>
        <td>Results page</td>
        <td>0.32</td>
        <td>0.94</td>
        <td>0.93</td>
    </tr>
    <tr>
        <td>Editorial</td>
        <td>Submissions List</td>
        <td>0.68</td>
        <td></td>
        <td>1</td>
    </tr>
    <tr>
        <td>Editorial</td>
        <td>Details - Manuscript</td>
        <td>0.67</td>
        <td>0.97</td>
        <td>0.93</td>
    </tr>
    <tr>
        <td>Editorial</td>
        <td>Details - Editor Tab</td>
        <td>0.74</td>
        <td>0.98</td>
        <td>0.93</td>
    </tr>
    </tbody>
</table>
</body>
</html>

CSS

table
{
    color: #1d1d1d;
    font: normal 13px "Helvetica Neue", sans-serif;
    padding: 3px;
    text-align: right;
    margin-left: 10px;
    border: 1px;
    border-collapse: collapse;
}

th,td
{
    color: #1d1d1d;
    text-align: right;
    margin-left: 10px;
    padding: 8px 10px;
}

td:nth-child(1) {
    background-color: #57597e;
    color: #F5F5F5;
    text-align: left;
}

td:nth-child(2) {
    background-color: #576D7E;
    color: #F5F5F5;
    text-align: left;
}

th:nth-child(1),th:nth-child(2) {
    text-align: left;
}

th{
    cursor:pointer;
    background: #263c75;
    color: #d0d1d7;
}

th:hover{
    cursor:pointer;
    background: #f0f4fa;
    color: #263c75;
}

JavaScript

function sortTable(f,n){
    let rows = $('#my_table tbody  tr').get();

    rows.sort(function(a, b) {

        let A = getVal(a);
        let B = getVal(b);

        if(A < B) {
            return -1*f;
        }
        if(A > B) {
            return 1*f;
        }
        return 0;
    });

    function getVal(elm){
        let v = $(elm).children('td').eq(n).text().toUpperCase();
        if($.isNumeric(v)){
            v = parseFloat(v,10);
        }
        return v;
    }

    $.each(rows, function(index, row) {
        $('#my_table').children('tbody').append(row);
    });
}
let f_sl = 1;
let f_nm = 1;


$(function(){

    $("#my_table th").click(function(){
        console.log("sorting")
        f_sl *= -1
        let n = $(this).prevAll().length
        sortTable(f_sl,n)
        if(f_sl === -1)
            $(this).text($(this).text().slice(0,-2) + " ▼")
        else
            $(this).text($(this).text().slice(0,-2) + " ▲")

    });

});