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.
Knockout Virtual Grid Demo (via JSBin - click the 'Edit in JSBin' button to see the code)
Latest demo now supports editing!
Knockout Virtual Grid is designed to work with Knockout 3.2 (via the new "component" support) and RequireJS.
- 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 globalrequirejsconfiguration object (shown below).
NOTE: the
pathsandshimkeys 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 Gridstylesheet:
<html>
<head>
<link href="bower_components/knockout-virtual-grid/out/knockout-virtual-grid.min.css" rel="stylesheet" />- Register it as a Knockout component in your project:
ko.components.register('virtual-grid', {
{ require: 'src/knockout-virtual-grid' }
});- Finally, you can use
Knockout Virtual Gridin 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.tsfile:
/// <reference path="bower_components/knockout-virtual-grid/out/knockout-virtual-grid.d.ts" />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.
Coming soon!