How do I sort array on click by table header

Question

 var teamData = [{"teamName":"Liverpool","GW12FIX":"FUL (A)","GW12":0.61,"GW13FIX":"TOT (H)","GW13":0.51,"GW14FIX":"CRY (A)","GW14":0.63,"GW15FIX":"WBA (H)","GW15":0.68,"GW16FIX":"NEW (A)","GW16":0.56,"AVG":0.60},
    {"teamName":"Chelsea","GW12FIX":"EVE (A)","GW12":0.62,"GW13FIX":"WOL (A)","GW13":0.54,"GW14FIX":"WHU (H)","GW14":0.55,"GW15FIX":"ARS (A)","GW15":0.58,"GW16FIX":"AVL (H)","GW16":0.59,"AVG":0.58},
    {"teamName":"Manchester United","GW12FIX":"MCI (H)","GW12":0.52,"GW13FIX":"SHU (A)","GW13":0.68,"GW14FIX":"LEE (H)","GW14":0.61,"GW15FIX":"LEI (A)","GW15":0.53,"GW16FIX":"WOL (H)","GW16":0.54,"AVG":0.58}];

I have an array and I am trying to add an onClick sort function to the th while loading the table using a function like this

function sortColumn(columnName) {
    const dataType = typeof teamData[0][columnName];
    sortDirection = !sortDirection;

    switch(dataType) {
        case 'number':
        sortNumberColumn(sortDirection, columnName);
        break;
    }
    
    loadTableData(teamData);
}

function sortNumberColumn(sort, columnName) {
    teamData = teamData.sort((f1, f2) => {
        return sort ? f2[columnName] - f1[columnName] : f1[columnName] - f2[columnName]
    });
 
}

I am loading the table like this

 window.onload = () => {
     loadTableData(teamData);
};

   function loadTableData(teamData) {
    var columns=Object.keys(teamData[0]).filter(key=>key.includes("FIX")).map(key=>key.slice(0,key.length-3));
    var tableHTML="";
        tableHTML+="<table>";
        tableHTML+="<tr>";
        tableHTML+="<th>"+"FDR"+"<span>"+"RELATIVE"+"</span></th>"
    for (var i=0; i<columns.length; i++) {
        tableHTML+="<th>"+columns[i]+"</th>";
        
    }
        tableHTML+="<th>"+"AVG"+"</span></th>"
        tableHTML+="</tr>";

    for(var t=0; t<teamData.length; t++) {
        tableHTML+="<tr>";
        
        tableHTML+="<td>"+teamData[t].teamName+"</td>";
        for(var c=0; c<columns.length; c++) {
            
            tableHTML+="<td bgcolor='"+bgcolor(teamData[t][columns[c]])+"'><font color='"+color(teamData[t][columns[c]])+"'>"+teamData[t][columns[c]+"FIX"]+"<br>"+Math.round(teamData[t][columns[c]]*100)+"%"+"</td>";
            
        }
        tableHTML+="<td bgcolor='"+bgcolor(teamData[t].AVG)+"'><font color='"+color(teamData[t].AVG)+"'>"+Math.round(teamData[t].AVG*100)+"%"+"</td>";
    tableHTML+="</tr>";
    }
    tableHTML+="</table>";
    document.getElementById('teamData').innerHTML=tableHTML;
}

If I try to add the function like this the table won't load

for (var i=0; i<columns.length; i++) {
    tableHTML+="<th onclick='"+sortColumn(columns[i])+"'>"+columns[i]+"</th>";

}

It worked fine when I had the th in HTML, I figured it'd be the exact same thing like this just loaded by JS but it isn't and I can't seem to find a solution. Is there an easy fix to this?

Answer 1

I believe your problem comes from how you stringify your function:

// try to log the result of this:
console.log("<th onclick='"+sortColumn(columns[i])+"'>"+columns[i]+"</th>");
// you will probably have something like this:
//   <th onclick='undefined'>GW12</th>

// but what you want should look like:
//  <th onclick='sortColumn("GW12")'>GW12</th>

// So try this:
for (var i=0; i<columns.length; i++) {
    tableHTML+=`<th onclick='sortColumn("${columns[i]}")'>${columns[i]}</th>`;

}

Answer 2

This is because you are actually calling the function. Do something like this:

tableHTML += `<th onclick='sortColumn(${columns[i]})'>${columns[i]}</th>`;