JSFiddle - React, Tailwind, and code Playground

HTML

<table></table>

CSS

table {
    border-collapse: collapse;
    border: 1px solid #CCC;
}
table td {
    border: 1px solid #CCC;
    padding: 10px;
}

JavaScript

var data1 =  [
    {id: "1", name: "b", lastname: "y", marks: "10"},
    {id: "1", name: "a", lastname: "x", marks: "20"},
    {id: "2", name: "a", lastname: "x", marks: "30"},
    {id: "2", name: "b", lastname: "x", marks: "40"},
    {id: "2", name: "c", lastname: "z", marks: "60"},
    {id: "3", name: "d", lastname: "x", marks: "50"},
    {id: "3", name: "a", lastname: "c", marks: "70"}    
];

function sortFunc(a, b) {
    if (a.name < b.name)  return -1;
    else if (a.name > b.name)  return 1;
    else {
        if (a.lastname < b.lastname)  return 1;
        else if (a.lastname > b.lastname)  return -1;
        else {
            if (a.marks < b.marks) return 1;
            else if (a.marks > b.marks) return -1;
        }
        return 0;
    }
}

var sortedData = data1.sort(sortFunc);

for (var i = 0; i < sortedData.length; i++) {
    var item = sortedData[i];
    var $tr = $('<tr />').appendTo('table');
    $('<td />', { text: item.lastname + ', ' + item.name }).appendTo($tr);
    $('<td />', { text: item.marks }).appendTo($tr);
}