Handsontable example

HTML

<div id="sport_example"></div>

CSS

</style> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <link href="http://handsontable.com//styles/main.css" rel="stylesheet"> <link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet"> <script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script> <style type="text/css"> body {
    background: white;
    margin: 20px;
}
h2 {
    margin: 20px 0;
}

JavaScript

$(document).ready(function () {

    var container = document.getElementById('sport_example');
    var baseUrl = "http://localhost:5455/";

    var dataSport = [
        [1, "Los Angeles Lakers", "<img src='" + baseUrl + "images/logos/nba-teams/lakers.gif'>", "2600", "0.93", "0.02", "293", "104.1"],
        [2, "New York Knicks", "<img src='" + baseUrl + "images/logos/nba-teams/knicks.gif'>", "2500", "0.79", "0.00", "278", "53.4"],
        [3, "Chicago Bulls", "<img src='" + baseUrl + "images/logos/nba-teams/bulls.gif'>", "2000", "0.100", "0.03", "201", "65.3"],
        [4, "Boston Celtics", "<img src='" + baseUrl + "images/logos/nba-teams/celtic.gif'>", "1700", "0.94", "0.09", "173", "54.9"]
    ];

    var hot = new Handsontable(container, {
        data: dataSport,
        height: 600,
        colHeaders: ["Rank", "Team", "Logo", "Current Value ($mil)", "1-Yr Value Change (%)", "Debt/Value (%)", "Revenue ($mil)", "Operating Income ($mil)"],
        rowHeaders: false,
        stretchH: 'all',
        columnSorting: true,
        contextMenu: true,
        autoWrapRow: true,
        columns: [{
            data: 0,
            type: 'numeric'
        }, {
            data: 1,
            type: 'text'
        }, {
            data: 2,
            renderer: 'html',
            width: 200
        }, {
            data: 3,
            type: 'numeric',
            format: '$0,0.00'
        }, {
            data: 4,
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 5,
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 6,
            type: 'numeric',
            format: '$0,0.00'
        }, {
            data: 7,
            type: 'numeric',
            format: '$0,0.00'
        }],
        cells: function (row, col, prop) {
            var cellProperties = {};
            cellProperties.className = 'htMiddle htCenter';


            
            if (hot.getDataAtRowProp(row, "Team") == "Boston...