Getting started with SlickGrid

https://groups.google.com/d/topic/knockoutjs/OsvpsIfI_fs/discussion

HTML

<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.0.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.5.custom.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css">
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css">
<H2 class="loading">Loading...</H2>
<DIV class="ui-layout-center hidden"></DIV>
<DIV class="ui-layout-north hidden">North</DIV>
<DIV class="ui-layout-south hidden">South</DIV>
<DIV class="ui-layout-west hidden">West</DIV>
<DIV class="ui-layout-east hidden">
    <DIV class="ui-widget-header ui-state-active">East Header</DIV>
    <DIV class="ui-layout-content"></DIV>
    <DIV class="ui-widget-header">East Footer</DIV>
</DIV>

CSS

.ui-layout-center ,
    .ui-layout-east ,
    .ui-layout-east .ui-layout-content {
        padding:        0;
        overflow:        hidden;
    }
    .hidden {
        display:        none;
    }
    .ui-widget-header {
        padding:        7px 15px 9px;
    }
    H2.loading {
        border:            0;
        font-size:        24px;
        font-weight:    normal;
        margin:            30% 0 0 40%;
    }

JavaScript

var myGrid = {}
        , gridData = []
        , gridColumns = [
                { id: "title", name: "Title", field: "title", width: 120 }
            , { id: "duration", name: "Duration", field: "duration" }
            , { id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false }
            ]
        , gridOptions = {
            editable: false
            , asyncEditorLoading: false
            , enableAddRow: false
            , enableCellNavigation: false
            , enableColumnReorder: false
        };

        for (var i = 120; i-- > 0; ) {
            gridData[i] = {
                title: "Task " + i
                , duration: "5 days"
                , percentComplete: Math.round(Math.random() * 100)
                , start: "01/01/2009"
                , finish: "01/05/2009"
                , effortDriven: (i % 5 == 0)
                , c7: "C7-" + i
                , c8: "C8-" + i
                , c9: "C9-" + i
                , c10: "C10-" + i
                , c11: "C11-" + i
                , c12: "C12-" + i
                , c13: "C13-" + i
                , c14: "C14-" + i
                , c15: "C15-" + i
                , c16: "C16-" + i
                , c17: "C17-" + i
            };
        };

        var myLayout;

        $(document).ready(function() {

            // create the layout - with data-table wrapper as the layout-content element
            myLayout = $('body').layout({
                west__initClosed: true
                , east__size: .50
                , center__onresize: function(pane, $pane, state, options) {
                    myGrid.resizeCanvas();
                }
            });

            myGrid = new Slick.Grid(myLayout.panes.center, gridData, gridColumns, gridOptions);

            $('body > H2.loading').hide(); // hide Loading msg

        });