Kockout Table

This plugin provides a powerful yet easy implementation of tables using knockout by providing a custom component

<ko-table params="list: people, options: {}"></ko-table>

Try out demo

Features

• Provide table data from your viewModel (ObservableArray)
• Lazy load data for each page
• Choose any number of keys from the objects on your array.
• Reordering of columns
• Specify column widths and headers
• Filter columns
• Custom css classes for tables and rows so that you can customize according to your CSS framework
• Pagination
• Multiselect rows
• AMD (Require.js) compatible

Installation

Lazy Loading feature requires Jquery to be loaded prior to the ko.table

Option 1

<script src="js/jquery.js"></script>   <!-- if LazyLoading is required -->
<script src="js/knockout.js"></script> 
<script src="js/knockout.table.min.js"></script> 

Option 2

In your requirejs config, include plugin in path

requirejs.config({
    paths:{
    knockout: 'js/lib/knockout.min',
    kotable: 'js/lib/knockout.table.min',
    jquery: 'js/lib/jquery.js'
    ...
    }
});

While defining your app.js

define(['jquery','knockout','kotable',function($,ko){
/* Your app code */
}])

How to Use

<ko-table params="list: persons, options: VMoptions"> </ko-table> 

component takes two arguments. An observable array on your view model to populate the table and an 'options' object on your view model to customize the table.

var viewModel = function(){
    this.VMoptions = {
        tableClass:'table table-striped',    //Optional. Specifies class for <table> tag
        pageRecords: 5,                      //Optional. Number of records per page.
        selectable: true,                    //Optional. Multiselect rows. Defaults to false
        columns:[                            //Optional.If not specfied all keys in your data will appear on table.
            { 
                key:'name',                  //Required if columns is specified.
                name:'Name',        //Optional.This specifies table column header. If not given,key becomes header
                filter:true                  //Optional. false if not specified.
            },
            { 
                key:'address'                // key:'address', name:'address', filter:false
            }
        ]
    };
    this.persons = ko.observableArray([
    { name:'Bob', address: 'New Delhi', dob:'14-03-1993'},
    { name: 'Harry', address : 'Mumbai', dob:'10-07-1990'}
    ]);
}
ko.applyBindings(new viewModel());

Lazy Load data

Lazy loading requires user to define afunction on his viewModel which takes page number and Records per page as two arguments and returns a promise. In the background, this plugin fetches 3 pages ahead of the current page in order to improve performance.

<ko-table params="list: getPage, options: VMoptions"> </ko-table> 

var viewModel = function(){
    this.VMoptions = {
        tableClass:'table table-striped',    //Optional. Specifies class for <table> tag
        pageRecords: 5,                      //Optional. Number of records per page. 
        columns: [
            {
                key: 'id', // take data from this key in your object array
                name: 'ID', //name to display on column header
                filter: true, //true or false. if not specified default:false
                width: '' //optional col width in px or perc
            },
            {
                key: 'email',
                name: 'E-Mail',
                filter: true
            }
        ]
    };
    this.getPage = function(pageNo,records){
        return $.getJSON('http://nameless-sun-2869.getsandbox.com/sidemenu?pageNo='+pageNo+'&records='+records);
    };
}
ko.applyBindings(new viewModel());

Todos

• Write Tests
• Add sort option
• Render HTML content in cell
• Serial number column as option

Development

Want to contribute? Great!

Knockout Table uses Gulp for fast developing.

Open your favorite Terminal and run these commands.

$ git clone https://github.com/vaibhav93/knockout-table.git
$ npm install

Make changes,add features and build by running

$ gulp

License

MIT