JSGrid Basic

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css">
<div id="jsGrid"></div>

CSS

.jsgrid-cell { 
    overflow: hidden; 
}

.jsgrid-pager { text-align: center; }

JavaScript

var data = [
    {
        "Name": "Test Test",
        "Married": false,
        "Age": 80,
        "Id": 1
    },
    {
        "Name": "Connor Johnston",
        "Married": false,
        "Age": 80,
        "Id": 2
    },
    {
        "Name": "Lacey Hess",
        "Married": false,
        "Age": 30,
        "Id": 3
    },
    {
        "Name": "Timothy Henson",
        "Married": false,
        "Age": 80,
        "Id": 4
    }
];

var sortFunc = function (id1, id2) {
        let item1 = data.find(function (o) {
            return o.Id === id1;
        });
        let item2 = data.find(function (o) {
            return o.Id === id2;
        });

        if (!item1 || !item2) {
        		// How is it possible?
            // Reproducible only in Chrome
            console.log("Id1: " + id1, "Id2: " + id2);
            console.log("Item1: " + item1, "Item2: " + item2);
            return NaN;
        }

        if (item1.Age === item2.Age) {
            let result = item1.Name.localeCompare(item2.Name);
            return result;
        }
        
        if (item1.Age > item2.Age) {
            return 1;
        } else {
            return -1;
        }
    };

data.sort(function(item1, item2) {
    return sortFunc(item1.Id, item2.Id);
})