Edit in JSFiddle

<div id="myGrid"></div> 
             

(function($) {

var grid,
    columns = [
        {id:"firstName", name:"First Name", field:"firstName", width:70},
        {id:"lastName", name:"Last Name", field:"lastName", width:70},
        {id:"email", name:"Email", field:"email", width:170},
        {id:"percentHealth", name:"% Health", field:"percentHealth", width:90, formatter:GraphicalPercentCompleteCellFormatter},
        {id:"birthday", name:"Birthday", field:"birthday", width:70},
        {id:"married", name:"Married", field:"married", width:50, formatter:BoolCellFormatter}
],
    options = {
        editable: false,
        enableAddRow: false,
        enableCellNavigation: true,
        rowCssClasses: function(item) {
            return (item.percentHealth >= 80) ? "healthy" : "";
        }
    };

$.mockjax({
    url: '/Contact/List',
    responseTime: 750,
    responseText: $.mockJSON.generateFromTemplate({
        "contacts|50-500": [{
            "married|0-1": true,
            "email" : "@EMAIL",
            "firstName": "@MALE_FIRST_NAME",
            "lastName": "@LAST_NAME",
            "birthday": "@DATE_MM/@DATE_DD/@DATE_YYYY",
            "percentHealth|0-100": 0 
        }]
    })
});
        
$.ajax({
    url: "/Contact/List",
    type: "GET",
    dataType: "json",
    success: function(data, textStatus, xhr) {
        grid = new Slick.Grid("#myGrid", data.contacts, columns, options);
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log("Error: " + textStatus);
    }
});

function BoolCellFormatter(row, cell, value, columnDef, dataContext) {
    return value ? "✔" : "";
};
    
}(jQuery));

#myGrid { width: 540px; height: 500px; }

.slick-row.healthy {
    background-color: #DFD;
    color: #555;
}

.slick-row { width: auto !important; }