Knockout Virtual Grid

Knockout Virtual Grid is a Knockout component for working with large amounts of data in tables via cell virtualization.

In order to for the table to provide a 'native' table appearance (for both arrow-key navigation and editing), it uses editableCell.

Demo

Knockout Virtual Grid Demo (via JSBin - click the 'Edit in JSBin' button to see the code)

Latest demo now supports editing!

Requirements

Knockout Virtual Grid is designed to work with Knockout 3.2 (via the new "component" support) and RequireJS.

Installation & Usage

Install it via bower:

bower install --save knockout-virtual-grid

Second, register Knockout Virtual Grid (and its dependencies) via RequireJs. One way is via a global requirejs configuration object (shown below).

NOTE: the paths and shim keys must match the name shown below

requirejs.config({
    paths: {
        knockout: 'bower_components/knockout/dist/knockout',
        editablecell: 'bower_components/knockout-editable-cell/out/editableCell',
        'src/knockout-virtual-grid': 'bower_components/knockout-virtual-grid/out/knockout-virtual-grid'
    },
    shim: {
        editablecell: { deps: ['knockout'] },
        'src/knockout-virtual-grid': { deps: ['knockout', 'editablecell'] }
    }
});

Add a reference to the Knockout Virtual Grid stylesheet:

<html>
    <head>
    <link href="bower_components/knockout-virtual-grid/out/knockout-virtual-grid.min.css" rel="stylesheet" />

ko.components.register('virtual-grid', {
    { require: 'src/knockout-virtual-grid' }
});

Finally, you can use Knockout Virtual Grid in a view by adding the component, and populating its parameters:

<virtual-grid params="dataSource: myDataSource"></virtual-grid>

The dataSource is expected to be a ko.observableArray containing VirtualGrid.IVirtualGridRows.

TypeScript users: you can add a reference to the included d.ts file:

/// <reference path="bower_components/knockout-virtual-grid/out/knockout-virtual-grid.d.ts" />

Documentation

NOTE: Futher documentation to come!

Until the remainder of the functionality and documentation is in place, you can look at the live demo, or at the live demo's base project vg-demo.

Editing (new!)