cenk:reactive-datatables

Provides a meteor.js way of using jquery.dataTables with reactively-updating data, instant search, state saving / pagination etc.

This is a fork of ephemer:reactive-datatables with additional functionality. Had to fork and create my own because ephemer was not being responsive, not accepting the pull requests.

The table only updates the row requiring to be updated. Other improvements to come.

Installation

meteor add cenk:reactive-datatables

Usage

In your template:

<template name="containsTheDataTable">
    {{> reactiveDatatable tableData=reactiveDataFunction options=optionsObject }}
</template>

Important: Due to the way Blaze interprets parameters upon calling a template, reactiveDataFunction should return a function that returns an array, not return the data itself. I'm sure there's a cleverer way to do this, but it works for now:

dataTableData = function () {
    return Meteor.users.find().fetch(); // or .map()
};

Template.containsTheDataTable.helpers({
    reactiveDataFunction: function () {
        return dataTableData;
    },
    optionsObject: optionsObject // see below
});

Set up your datatable's options as per the jquery.dataTables API, e.g.:

var optionsObject = {
    columns: [{
        title: 'Real Name',
        data: 'profile.realname', // note: access nested data like this
        className: 'nameColumn'
    }, {
        title: 'Photo',
        data: 'profile.picture',
        render: renderPhoto, // optional data transform, see below
        className: 'imageColumn'
    }],
    // ... see jquery.dataTables docs for more
}

function renderPhoto(cellData, renderType, currentRow) {
    // You can return html strings, change sort order etc. here
    // Again, see jquery.dataTables docs
    var img = "<img src='" + cellData + "' title='" + currentRow.profile.realname + "'>"
    return img;
}

I've deliberately kept this package as close as possible to the original API. I've also deliberately not exposed any global variables, although you can access the DataTable API in the usual jquery way using the '#datatable' selector from your template, i.e., to get an array with your data:

$('#datatable').DataTable().rows()

About returning a function

The reason you need to return a function with an array and not just the array itself (see code example above) is because the autorun / reactive context is on the datatable end (which is how the datatable knows to do the reactive updates).

If you just pass an array into the datatable (this would involve a 1-line source code change), it won't know when the array has been updated. This is because arrays by themselves don't have an .invalidate() function attached. The trick of passing a wrapped function into the datatable's template is the only way I can see to encapsulate the datatable functionality in a package. Please send me a pull request if you can see a better way around this.