SlickGrid example

uses knockout for geek cred

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">
<script src="http://bladnman.com/js/MMStopWatch.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css">
This fiddle uses Knockout, but disregard that. There is a bit of added overhead for that, and though the markup looks different, the Slick Grid concepts are the same
<br><br>
<a href="#" data-bind="click: addItems.bind($data, 100)">Add 100 Items</a> | 
<a href="#" data-bind="click: addItems.bind($data, 500)">Add 500 Items</a> | 
<a href="#" data-bind="click: addItems.bind($data, 1000)">Add 1000 Items</a> | 
<a href="#" data-bind="click: addItems.bind($data, 10000)">Add 10,000 Items</a> | 
<a href="#" data-bind="click: addItems.bind($data, 50000)">Add 50,000 Items</a>
<br>
<a href="#" data-bind="click: addItems.bind($data, 500000)">Add 500,000 Items</a> |

<a href="#" data-bind="click: addItems.bind($data, 1000000)">Add 1 million</a> | 
<a href="#" data-bind="click: addItems.bind($data, 5000000)">Add 5 million</a> 
<br><BR>
<div id="grid" data-bind="slickGrid: { data: items, columns: columns  }"></div>
<div id="statusbar">
    <div style="float: left">
        Total: <span data-bind="html: items().length"/>
    </div>
    <div style="float: right">
        <span data-bind="html: lastTimerMessage"/>
    </div>
</div>

<button data-bind="click: emptyTable">Empty Table</button>

CSS

#grid { height: 300px; width: 100%; }
#statusbar {
    background: #e5e5e5;
    padding: 5px;
    height:  20px;
}

JavaScript

var grid;

ko.bindingHandlers.slickGrid = {
    init: function(element, valueAccessor) {
        var settings = valueAccessor();
        var data = ko.utils.unwrapObservable(settings.data);
        var columns = ko.utils.unwrapObservable(settings.columns);
        var options = ko.utils.unwrapObservable(settings.options) || {};
        grid = new Slick.Grid(element, data, columns, options);
        grid.autosizeColumns();
    },
    update: function(element, valueAccessor, allBindingAccessor, viewModel) {
        var settings = valueAccessor();
        var data = ko.utils.unwrapObservable(settings.data); //just for subscription
        grid.resizeCanvas(); // NB Very important for when a scrollbar appears
        grid.render();
    }
}

function Item(id, name, price) {
    this.id = id;
    this.name = name;
    this.price = price;
}

var viewModel = {
    items: ko.observableArray([]),
    lastTimerMessage: ko.observable(),
    _itemsToAdd: 1,

    addItems: function(num) {
        this.lastTimerMessage("running...");
        this._itemsToAdd = num;
        setTimeout(this._addItemsNow, 50);
    },

    _addItemsNow: function() {
        MMStopWatch.start(viewModel._itemsToAdd + " Items Added");

        var tempArray = [];


        for (var x = 0; x < viewModel._itemsToAdd; x++) {
            var item = new Item(x, "New item - " + x, 5.00);
            tempArray.push(item);
            if (tempArray.length > 10000) {
                ko.utils.arrayPushAll(viewModel.items, tempArray);
                tempArray = [];
            }
        }

        ko.utils.arrayPushAll(viewModel.items, tempArray);

        MMStopWatch.stop(viewModel._itemsToAdd + " Items Added");


        grid.render();
viewModel.lastTimerMessage(MMStopWatch.describe(viewModel._itemsToAdd + " Items Added"));
    },

    columns: [
        {
        id: "id",
        name: "ID",
        field: "id"},
    {
        id: "name",
        name: "Name",
        field: "name"},
    {
        id:...