JSFiddle - React, Tailwind, and code Playground

by Elijah Manor

HTML

<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.0.min.js"></script>
<script src="https://github.com/mleibman/SlickGrid/raw/master/slick.core.js"></script>
<script src="https://github.com/mleibman/SlickGrid/raw/master/slick.editors.js"></script>
<script src="https://github.com/mleibman/SlickGrid/raw/master/slick.grid.js"></script>
<script src="https://github.com/mennovanslooten/mockJSON/raw/master/js/jquery.mockjson.js"></script>
<script src="https://github.com/appendto/jquery-mockjax/raw/master/jquery.mockjax.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/slick-default-theme.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css">
<div id="myGrid"></div>

CSS

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

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

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

JavaScript

(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));