[Annoucement] Reactive DataTables for MeteorJS

austinrivas

Hello Everyone,

I've spent some time over the past few weeks putting together a reactive DataTables component for MeteorJS that allows you to page, sort, and filter millions of records while maintaining meteor's awesome server / client reactivity.

The packages is hosted on Meteor's package repository [ AtmosphereJS ]( https://atmospherejs.com/package/luma-datatables )

[ Here is a Live Example ]( http://luma-datatables.meteor.com/ )

[ Here is the Annotated Source ]( http://lumapictures.github.io/luma-datatables/ )

Any input is appreciated, and pull requests are more than welcome!

Setting up the component is simple :

1. Define the component in your template

[code]
{{> dataTable
selector=browsers.selector
columns=browsers.columns
collection=browsers.collection
options=browsers.options
subscription=browsers.subscription
query=browsers.query
}}
[/code]

2. Setup the data in your controller or as template helpers

[code]
if Meteor.isClient
Template.home.browsers =
columns: [
{
sTitle: "Engine"
mData: "engine"
}
{
sTitle: "Browser"
mData: "browser"
}
{
sTitle: "Platform"
mData: "platform"
}
{
sTitle: "Version"
mData: "version"
sClass: "center"
}
{
sTitle: "Grade"
mData: "grade"
sClass: "center"
mRender: ( dataSource, call, rawData ) ->
rawData ?= ""
switch rawData.grade
when "A" then return "A"
else return rawData.grade
}
{
sTitle: "Created"
mData: "createdAt"
mRender: ( dataSource, call, rawData ) ->
rawData.createdAt ?= ""
if rawData.createdAt
return moment( rawData.createdAt ).fromNow()
else return rawData.createdAt
}
{
sTitle: "Counter"
mData: "counter"
}
]
selector: "dataTable-browsers"
collection: Browsers
subscription: "all_browsers"
options:
oLanguage:
sProcessing: "You must build construct additional pylons!"
query:
grade: "A"
[/code]

3. Publish data on the server ( coffeescript )

[code]
if Meteor.isServer
DataTable.debug = "true"
DataTable.publish "all_browsers", Browsers
[/code]

allan

Very cool! Thanks for sharing this with us :-).

I've added a link on the DataTables news feed.

Allan

(p.s. you might want to add a license to indicate if it is OSS, and if so what license, or if it is commercial etc)

austinrivas

Thanks @allan!

I've added an MIT License to the repo, I usually neglect that kind of thing so thanks for the reminder.

Also, here is the example code in JS for the uninitiated : )

On the Client :
[code]
if (Meteor.isClient)
Template.home.browsers = {
columns: [
{
sTitle: "Engine",
mData: "engine"
},
{
sTitle: "Browser",
mData: "browser"
},
{
sTitle: "Platform",
mData: "platform"
},
{
sTitle: "Version",
mData: "version",
sClass: "center"
},
{
sTitle: "Grade",
mData: "grade",
sClass: "center",
mRender: function (dataSource, call, rawData) {
if (rawData == null) rawData = "";
switch rawData.grade
when "A" then return "A"
else return rawData.grade
if (rawData.grade === "A") return "A";
return rawData.grade;
}
},
{
sTitle: "Created",
mData: "createdAt",
mRender: function (dataSource, call, rawData) {
if (rawData.createdAt == null) rawData.createdAt = "";
if (rawData.createdAt)
return moment(rawData.createdAt).fromNow()
else
return rawData.createdAt || "";
},
{
sTitle: "Counter",
mData: "counter"
}
],
selector: "dataTable-browsers",
collection: Browsers,
subscription: "all_browsers",
options: {
oLanguage: {
sProcessing: "You must construct additional pylons!"
}
},
query: {
grade: "A"
}
}
[/code]

On the server :
[code]
if (Meteor.isServer) {
DataTable.debug = "true";
DataTable.publish("all_browsers", Browsers);
}
[/code]

rwillmer

Excellent! Thanks for sharing this
Rachel

austinrivas

Updated to v1.10.0 and all I had to do was change the css selector for the filter from

[code] .dataTables_filter input[type=text] [/code]

to

[code] .dataTables_filter input[type=search] [/code]

gotta love well tested code :)

really looking forward to playing around with the new api.

austinrivas

Meteor jQuery DataTable v1.0.0

I have finally been able to merge in the following features, along with testing for the core functionality, and upgrade the meteor jquery-datatables package to v1.0.0

Your feedback is always welcomed and encouraged.

Reactive Query

Live Example

The query parameter for reactive tables is now reactive ( duh ). My goal was to have the table impose no structure on the query and just use raw mongoDB selector.

The basic idea is that you set a session variable ( or some other reactive datasource ) to your initial query and then use that var as the query parameter for the table component. Whenever the query parm changes the table will automagically rerender using the new query to fetch its dataset.

You can see a basic implementation of this there. In this example the table controls just extend the query object with whatever value they are set to. I tried to include examples of all the common control types, but if you think of any that I missed feel free to let me know.

Currently applying the filter can cause a somewhat janky table reload depending on what its contents looks like, this is something I plan on addressing ASAP.

Server Base Query

I changed the way that the DataTable class publishes data. Instead of publish() being a static method it is now an instance method that requires a DataTable instance. I think this is a more sustainable structure that will allow for a lot more flexibility in the future.

Here is how you instantiate a server DataTable component.

RowsTable = new DataTableComponent
  subscription: "rows"
  collection: Rows
  query:
    someProperty: "someValue"
    otherProperty: $regex: "value"
    nested:
      property: $gte: 0

The query you define on the server will limit your dataset to the client while preserving all of the pagination, sorting, and filtering.

TODOS

Filter / Control Plugins

I would like to begin leveraging datatables plugins api so that it is possible to apply table controls and filters via the dom property. This would duplication the functionality seen in the example, but automate the binding process for the table controls filters.

Janky Table Load on Filter

Currently applying new filters to a table causes a somewhat janky table reload. This is something I would like to address ASAP.

@allan if you have any free time ( lol ) I would love to pick your brain on the best way to solve this.

Breaking Changes

The DataTableComponent is now classy cased along with the actual template name.

{{> DataTable options }}

instead of

{{> dataTable options }}

Please try to break this as much as possible, @landland has reported some problems with nested properties, but I haven't had time to confirm or test that.

• Austin

procrazium

Can you please give a simple example in javacript/jquery? I have to finish and deliver the data-table implementation for my meteor project by Friday but the coffee script code is least helpful since I dont know how to write or understand it so fast.

What I need working browser, as well as publisher from server side that I can just put in my template and it works.

Thanks.