Getting started with SlickGrid

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

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<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://mleibman.github.com/SlickGrid/plugins/slick.autotooltips.js"></script>
<div id="myGrid" style="width:600px;height:500px;"></div>

JavaScript

var grid;
var columns = [
    { id: "title", name: "Title", field: "title", sortable: true },
    { id: "long-val", name: "Really Really Really Long Title", field: "longVal", sortable:true, toolTip: "Really Really Really Long Title" },
    { id: "duration", name: "Duration", field: "duration", sortable: true, formatter: dayFormatter },
    { id: "%", name: "% Complete", field: "percentComplete", sortable: true },
    { id: "start", name: "Start", field: "start", formatter: dateFormatter, sortable: true },
    { id: "finish", name: "Finish", field: "finish", formatter: dateFormatter, sortable: true },
    { id: "effort-driven", name: "Effort Driven", field: "effortDriven", sortable: true }
];

function dayFormatter(row, cell, value, columnDef, dataContext) {
    return value + ' days';
}

function dateFormatter(row, cell, value, columnDef, dataContext) {
    return value.getMonth() + '/' + value.getDate() + '/' + value.getFullYear();
}

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    multiColumnSort: true
};

$(function() {
    var MS_PER_DAY = 24 * 60 * 60 * 1000;
    var data = [];
    for (var i = 0; i < 500; i++) {
        var startDate = new Date(new Date("1/1/1980").getTime() + Math.round(Math.random() * 365 * 25) * MS_PER_DAY);
        var endDate = new Date(startDate.getTime() + Math.round(Math.random() * 365) * MS_PER_DAY);
        data[i] = {
            title: "Task " + i,
            longVal: "Super duper long string here",
            duration: Math.round(Math.random() * 30) + 2,
            percentComplete: Math.round(Math.random() * 100),
            start: startDate,
            finish: endDate,
            effortDriven: (i % 5 == 0)
        };
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
    
    grid.registerPlugin(new Slick.AutoTooltips());

    grid.onSort.subscribe(function(e, args) {
        var cols = args.sortCols;

        data.sort(function(dataRow1, dataRow2) {
            for...