First row does not get sorted, background colour formatting lost

I just completed an HTML data table with data from API. Now I am trying to sort this. I found one solution online, but this one does not sort the first row at all and loses the green color formatting in the background. (as per screenshot below)

It does sort all the rows but the first one in ascending and descending orders though.

I leave the JS below for your reference, could anyone kindly hint me what this snippet did wrong? I’m not looking for the complete solution code, but just inspiration or materials that help me resolve this error.

var getCellValue = function(tr, idx){ return tr.children[idx].innerText || tr.children[idx].textContent; }

var comparer = function(idx, asc) { return function(a, b) { return function(v1, v2) {
        return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
    }(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}};'th')).forEach(function(th) { th.addEventListener('click', function() {
        var table = th.parentNode
        while(table.tagName.toUpperCase() != 'TABLE') table = table.parentNode;'tr:nth-child(n+2)'))
            .sort(comparer(, this.asc = !this.asc))
            .forEach(function(tr) { table.appendChild(tr) });

I could not find the complete solution for this, but I did resolve the background colour formatting. For this, I have added the following:

    background-color: var(--bs-table-bg);

    background-color: var(--bs-table-active-bg);

This way the colors stay even after the table gets sorted in descending and ascending orders.

I ended up applying solutions on StackOverFlow for the unsorted first row. Sorting HTML table with JavaScript - Stack Overflow