Kendo UI

jQuery + Kendo UI + MockJax

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<div>
    <div id="gridWrap">
        <table id="grid">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>State</th>
                    <th>Postal Code</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Bill McQueen</td>
                    <td>123 Main</td>
                    <td>San Antonio</td>
                    <td>TX</td>
                    <td>10109</td>
                    
                </tr>
                <tr>
                    <td>Sam Martin</td>
                    <td>987 Center Ct</td>
                    <td>Dallas</td>
                    <td>TX</td>
                    <td>39399</td>
                </tr>
                 <tr>
                    <td>Bill Anderson</td>
                    <td>9234 SW 8th Ave</td>
                    <td>Ft Lauderdale</td>
                     <td>FL</td>
                     <td>33222</td>
                </tr>                
            </tbody>
        </table>
    </div>
</div>

CSS

#gridWrap{
    width: 400px;
}

JavaScript

(function() {

    $("#grid").kendoGrid({
        navigatable: true,
        columns: [
            {
            field: "Name",
            width: 220},
        {
            field: "Address",
            width: 220},
        {
            field: "City",
            width: 220},
            { field: "State",
              width: 50},
            { field: "PostalCode",
              width: 100}
        ]

    });

})();